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. Day5费用流

    算法 zkw费用流:多路增广,增光D[y]=D[i]+c的边 无源汇上下界最小费用可行流 每次强行增加下界的流量 类似网络流,拆边 原边的费用为c,拆出来的边费用为0 负边和负圈 直接应用 SDOI2 ...

  2. module.exports,exports和export default,export的区别

    前提:CommonJS模块规范和ES6模块规范是完全不同的两个概念. module.exports,exports属于CommonJS模块规范: export default,export属于ES6模 ...

  3. 单调栈+贪心维护LIS

    普通:O(\(N^2\)) 状态:dp[j]表示,以j结尾的最长的上升子序列 转移:dp[j]=dp[i]+1(if a[j]>a[i] ) 初始化:dp[i]=1 优化(nlogn) solu ...

  4. [BZOJ2238]Mst 最小生成树+树链剖分/并查集

    链接 题解 先构建出最小生成树,如果删的是非树边,直接输出答案 否则问题转化为,把该边删掉后剩下两个联通块,两个端点分别在两个块内的最小边权,LCT可以维护 不妨换一种思考方向:考虑一条非树边可以代替 ...

  5. Restlet 学习笔记

    摘要:网络上对 restlet 的评判褒贬不一,有的说框架封装的很好,很有弹性,有的说 rest 架构风格本身是一种简单的风格,restlet 过设计以使编程过于复杂,其实我倒不觉得 restlet ...

  6. HDU3689 Infinite monkey theorem 无限猴子(字符串DP+KMP)

    题目描述: 大概的意思就是根据无限猴子定理,无限只猴子坐在打字机旁瞎敲,总有一个能敲出莎士比亚文集.现在给你一个打字机和一只猴子,打字机的每个按钮(共n个)上的字母及猴子按下这个按钮的概率已知,而且猴 ...

  7. Flask项目之手机端租房网站的实战开发(十四)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  8. jsp 用shiro 的判断 是否有菜单查看的权限

    实例:spring-shiro.xml 123 /admin/repairType/index = roles["ROLE_ADMIN"]/admin/user=roles[&qu ...

  9. springMVC通过ajax传递参数list对象或传递数组对象到后台

    springMVC通过ajax传递参数list对象或传递数组对象到后台 环境: 前台传递参数到后台 前台使用ajax 后台使用springMVC 传递的参数是N多个对象 JSON对象和JSON字符串 ...

  10. 第一个使用Spring Tool Suite(STS)和Maven建立的Spring mvc 项目

    一.目标 在这篇文章中.我将要向您展示怎样使用Spring Frameworks 和 Maven build创建您的第一个J2ee 应用程序. 二.信息 Maven是一个java项目的构建工具(或者自 ...