It’s easy to pass the wrong value to a function. Typescript interfaces are great because they catch errors at compile time or in an IDE. In this lesson we’ll learn how to describe a type shape with Typescript interfaces.

Using interface to describe an object:

interface ComicBookCharacter {
secretIdentity?: string;
alias: string;
health: number;
} let superHero: ComicBookCharacter = {
alias: 'Zero',
health:
};
let superVillain: ComicBookCharacter = {
secretIdentity: "YuLong",
alias: "YuLong",
health:
}; function getSecretIdentity(character: ComicBookCharacter){
if(character.secretIdentity){
console.log(`${character.alias} is ${character.secretIdentity}`);
} else {
console.log(`${character.alias} has no secret identity`);
}
} getSecretIdentity(superHero);

Using interface to describe an function:

interface AttackFunction {
(opponent: {alias: string; health: number}, attackWith: number): number;
} interface ComicBookCharacter {
secretIdentity?: string;
alias: string;
health: number;
} function attackFunc(opponent, attackWith){
opponent.health -= attackWith;
console.log(`${this.alias} attacked ${opponent.alias}, who's health = ${opponent.health}`);
return opponent.health;
} let superHero: ComicBookCharacter = {
alias: 'Zero',
health: ,
strength: ,
attack: attackFunc
};

Using extends: Using extends of an interface is clean way to define interface in typescript.

interface OptionalAttributes {
strength?: number;
insanity?: number;
dexterity?: number;
healingFactor?: number;
} interface ComicBookCharacter extends OptionalAttributes{
secretIdentity?: string;
alias: string;
health: number;
attack: AttackFunction;
}

Code:

interface AttackFunction {
(opponent: {alias: string; health: number}, attackWith: number): number;
} interface KrustyTheClown {
alias: string;
health: number;
inebriationLevel: number;
attack: AttackFunction;
} interface OptionalAttributes {
strength?: number;
insanity?: number;
dexterity?: number;
healingFactor?: number;
} interface ComicBookCharacter extends OptionalAttributes{
secretIdentity?: string;
alias: string;
health: number;
attack: AttackFunction;
} function attackFunc(opponent, attackWith){
opponent.health -= attackWith;
console.log(`${this.alias} attacked ${opponent.alias}, who's health = ${opponent.health}`);
return opponent.health;
} let superHero: ComicBookCharacter = {
alias: 'Zero',
health: ,
strength: ,
attack: attackFunc
};
let superVillain: ComicBookCharacter = {
secretIdentity: "YuLong",
alias: "YuLong",
health: ,
insanity: ,
attack: attackFunc
}; function getSecretIdentity(character: ComicBookCharacter){
if(character.secretIdentity){
console.log(`${character.alias} is ${character.secretIdentity}`);
} else {
console.log(`${character.alias} has no secret identity`);
}
} superHero.attack(superVillain, superHero.strength); //"Zero attacked YuLong, who's health = 2600"

[TypeScript] Using Interfaces to Describe Types in TypeScript的更多相关文章

  1. [TypeScript] Using Assertion to Convert Types in TypeScript

    Sometimes the compiler needs help figuring out a type. In this lesson we learn how to help out the c ...

  2. 在 Typescript 2.0 中使用 @types 类型定义

    在 Typescript 2.0 中使用 @type 类型定义 基于 Typescript 开发的时候,很麻烦的一个问题就是类型定义.导致在编译的时候,经常会看到一连串的找不到类型的提示.解决的方式经 ...

  3. [TypeScript] Transform Existing Types Using Mapped Types in TypeScript

    Mapped types are a powerful and unique feature of TypeScript's type system. They allow you to create ...

  4. [TypeScript] Query Properties with keyof and Lookup Types in TypeScript

    The keyof operator produces a union type of all known, public property names of a given type. You ca ...

  5. [TypeScript] Represent Non-Primitive Types with TypeScript’s object Type

    ypeScript 2.2 introduced the object, a type that represents any non-primitive type. It can be used t ...

  6. [TypeScript] Model Alternatives with Discriminated Union Types in TypeScript

    TypeScript’s discriminated union types (aka tagged union types) allow you to model a finite set of a ...

  7. [TypeScript] Understand lookup types in TypeScript

    Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the proper ...

  8. [TypeScript] Dynamically Allocate Function Types with Conditional Types in TypeScript

    Conditional types take generics one step further and allow you to test for a specific condition, bas ...

  9. [TypeScript] Define Custom Type Guard Functions in TypeScript

    One aspect of control flow based type analysis is that the TypeScript compiler narrows the type of a ...

随机推荐

  1. 84.friend友元类

    #include <iostream> using namespace std; //友元函数的主要作用就是访问私有变量 class myclass { public: friend cl ...

  2. POJ 3174 暴力枚举

    思路: 暴力枚举三个点 判一判 搞定 (x1*y1=x2*y2) x1.y1.x2.y2为他们两两的差 //By SiriusRen #include <cstdio> using nam ...

  3. POJ 3037 SPFA

    题意: 思路: 我们可以发现 到每个点的速度是一样的 那这就成水题了-. 裸的SPFA跑一哈 搞定 //By SiriusRen #include <cmath> #include < ...

  4. Kinect 开发 —— 手势识别(下)

    基本手势追踪 手部追踪在技术上和手势识别不同,但是它和手势识别中用到的一些基本方法是一样的.在开发一个具体的手势控件之前,我们先建立一个可重用的追踪手部运动的类库以方便我们后续开发.这个手部追踪类库包 ...

  5. zhizhang错误(每天更新更新)

    做题反思(Think twice ,Code once) 1.2013NOIP转圈游戏,交代码前一定要静态查错,看看代码写得和自己意思一不一样,竟然把变量n写成了常数10,低级错误 2.2013NOI ...

  6. 自己定义控件的onMeasure方法具体解释

    在我们自己定义控件的时候可能你会用到onMeasure方法,以下就具体的给大家介绍一下这种方法: @Override protected void onMeasure(int widthMeasure ...

  7. BASH 文本模版的简单实现 micro_template_compile

    详细代码 ############################### # # Funciton: micro_template_compile # # Parameter: # [1] => ...

  8. easyui树查找

    前端查询 /* 树查询*/ function searchMaterial(){ var parentNode=$('#selectMaterialTree').tree('getRoots'); / ...

  9. sass自定义滚动条样式

    @mixin scrollBarStyle() { &::-webkit-scrollbar { width: 7px; height: 7px; } &::-webkit-scrol ...

  10. bzoj3307雨天的尾巴(权值线段树合并/DSU on tree)

    题目大意: 一颗树,想要在树链上添加同一物品,问最后每个点上哪个物品最多. 解题思路: 1.线段树合并 假如说物品数量少到可以暴力添加,且树点极少,我们怎么做. 首先在一个树节点上标记出哪些物品有多少 ...