[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:
};
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的更多相关文章
- [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 ...
- 在 Typescript 2.0 中使用 @types 类型定义
在 Typescript 2.0 中使用 @type 类型定义 基于 Typescript 开发的时候,很麻烦的一个问题就是类型定义.导致在编译的时候,经常会看到一连串的找不到类型的提示.解决的方式经 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [TypeScript] Understand lookup types in TypeScript
Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the proper ...
- [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 ...
- [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 ...
随机推荐
- TCP连接状态详解
tcp状态: LISTEN:侦听来自远方的TCP端口的连接请求 SYN-SENT:再发送连接请求后等待匹配的连接请求 SYN-RECEIVED:再收到和发送一个连接请求后等待对方对连接请求的确认 ES ...
- spring源码分析之@Conditional
根源在AnnotationConfigApplicationContext和AnnotationConfigWebApplicationContext,以AnnotationConfigApplica ...
- C++标准库概述
一.C++标准库的主要组件: 1.标准C库 2.I/O流技术(对标准输入输出设备称为标准I/O,对在外磁盘上文件的输入输出称为文件I/O,对内存中指定的字符串存储空间的输入输出称为串I/O) 3.st ...
- ES6--基础语法(一)
一.支持环境:node.js完全支持,标准浏览器完全支持.二.测试环境: chrome下需要在script标签的最先开始的地方需要添加"use strict". firefox下需 ...
- 39.mutex 的lock_guard与unique_lock
#include <iostream> #include <thread> #include <mutex> using namespace std; #defin ...
- Filebeat的下载(图文讲解)
第一步:进入Elasticsearch的官网 https://www.elastic.co/ 第二步:点击downloads https://www.elastic.co/downloads 第三步: ...
- vue移动端上拉加载更多
LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...
- BZOJ2555: SubString(后缀自动机,LCT维护Parent树)
Description 懒得写背景了,给你一个字符串init,要求你支持两个操作 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 你必须在线支 ...
- 【习题 7-4 UVA-818】Cutting Chains
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二进制枚举要解开哪些环. 把所有和它相关的边都删掉. 对于剩下的联通分量. 看看是不是每一个联通分量都是一条链 ->每个点的度 ...
- 洛谷 P2240 数的计数数据加强版
P2240 数的计数数据加强版 题目背景 无 题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数n): 先输入一个自然数n(n<=1500001),然后对此自然数按照如下方法进行处理: ...