[TypeScript] Using Interfaces to Describe Types in TypeScript

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: 8700
};
let superVillain: ComicBookCharacter = {secretIdentity: "YuLong",alias: "YuLong",health: 9150
};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: 9000,strength: 5000,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: 9000,strength: 5000,attack: attackFunc
};
let superVillain: ComicBookCharacter = {secretIdentity: "YuLong",alias: "YuLong",health: 7600,insanity: 200,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相关推荐

[TypeScript] 编程实践之1: Google的TypeScript代码风格2：基本概念
TypeScript语言规范 2 基本概念 2.1 语法约定 2.2 命名 2.2.1 保留字 2.2.2 属性命名 2.2.3 计算属性命名 2.3 声明 2.4 范围 2 基本概念本文档的其余部 ...
typescript 方法后面加感叹号_使用 TypeScript 模板字面类型
介绍在今天的早些时候,Anders Hejlsberg 在 TypeScript 的仓库中发了一个 Pull Request:Template string types and mapped typ ...
typescript的基本结构_上帝视角看 TypeScript
点击蓝色"脑洞前端"关注我哟加个"星标",带你揭开大前端的神秘面纱! ❝ 这是脑洞前端第「99」篇原创文章 TypeScript 的学习资料非常多,其中也不乏 ...
typeScript面试必备之-通识七:typeScript中的可索引接口（数组，对象）+类类型接口...
可索引接口:数组.对象的约束 (不常用) ts定义数组的方式 var arr:number[]=[2342,235325]var arr1:Array<string>=['111','22 ...
[TypeScript] 编程实践之1: Google的TypeScript代码风格3：类型
TypeScript语言规范 3 类型 3.1 Any类型 3.2 基本类型 3.2.1 Number类型 3.2.2 Boolean类型 3.2.3 String类型 3.2.4 Symbol类型 ...
TypeScript深度剖析:Vue项目中应用TypeScript？
一.前言与link类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-component库而来,这个库vue官 ...
【TypeScript】（一）快速上手TypeScript类型语法
文章目录 1.概述 2.TS中的类型 2.1.类型推断 2.2.类型定义 2.3.复杂类型 2.3.1.联合 2.3.2.泛型 2.4.type关键字 3. 总结 1.概述 TypeScript(TS ...
typescript用什么软件写_用TypeScript写了个低配版H5美图工具
前言最近两月在学习canvas时候,发现很多有意思的技术能力,特别是在图像处理这一领域.让我想起大学课堂教学的<数字图像处理>(冈萨雷斯版本).但是很遗憾的是,大学上完课应付考试后全部 ...
什么是TypeScript？为什么我要用它代替JavaScript？ [关闭]
本文翻译自:What is TypeScript and why would I use it in place of JavaScript? [closed] Closed . 已关闭 . This ...

[TypeScript] Using Interfaces to Describe Types in TypeScript

[TypeScript] Using Interfaces to Describe Types in TypeScript相关推荐

最新文章

热门文章