record-for-ts

一、基础类型

数组 :

1 2 3

> const list:number[] = [1,2,3] // 方式一 > const list:Array<number> = [1,2,3] // 方式二 >

元祖 tuple

1 2 3 4 5 6

> let x: [string, number] > x = ['hello',2] // ok > x = [2, 'hello'] //Error > x[3] = 'world' // ok > x[4] = true // Error, 布尔不是string >

枚举 枚举类型是对javascript标准数据结构的一个补充 为一组数值赋予优雅的名字

1 2 3 4 5 6 7 8 9 10

> enum Color {Red, Green, Blue} > let x: Color = Color.Green // 1 默认情况下从0为元素编号 > > // 手动进行编号 > enum Color {Red:1, Green:4, Blue:6} > let x: Color = Color.Green // 4 > > // 枚举值提供的便利： 可以由枚举的值得到它的名字 > let colorName: string = Color[4] // Green >

void 空值 函数返回 只能被赋予undefined null

1 2 3 4

> function warnUser(): void{ > alert("This is a warning message!") > } >

never 永远不存在

1 2 3 4 5 6 7 8 9

> // 返回never的函数必须存在无法达到的终点 > function error(message: string): never{ > throw new Error(message) > } > > function infiniteLoop(): never{ > while(true){} > } >

类型断言 只在编译阶段起作用，假设已经进行了必须的检查

1 2 3 4 5 6 7 8

> // 写法一 "尖括号"写法 > let someValue: any = "this is a string" > let strLength: number = (<string>someValue).length > > // 写法二 "as" 语法 jsx里只允许 as语法 > let someValue: any = "this is a string" > let strLength: number = (someValue as string).length >

二、接口 TS核心原则之一 “鸭式辩型法”

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

> function printLabel(labelObj:{label: string}){ > console.log('label:', labelObj.label) > } > > let myObj = {size: 10, label: 'Size 10 Object'} > printLabel(myObj) > > // use interface > interface labelValue { > label: string; > name?: string; // 可选属性 > readonly count: number; // 只读属性 只能在创建对象时修改值 作为属性使用时 > } > > // ReadonlyArray > let ro:ReadonlyArray<number> = [1,3,4,5] > > function printLabel(labelObj: labelValue){ > console.log('label:',labelObj.label) > } >

额外的属性检查: ts中，对象字面量会经过额外属性检查

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

> interface SquareConfig { > color?: string; > width?: number; > } > > function createSquare(config: SquareConfig): {color: string; area:number}{ > // ... > } > // error: 'colour' not expected in type 'SquareConfig' > let mySquare = createSquare({colour:'red', width: 100}) > > // 绕开额外的类型检查 方法一 使用类型断言 > let mySquare = createSquare({colour:'red',width:100} as SquareConfig) > > // 最佳方式 添加字符串索引签名 > interface SquareConfig { > color?: string; > number?: number; > [propName:string]: any; > } >

函数类型

1 2 3 4 5 6 7 8 9

> interface SearchFunc { > (source:string, subString: string):boolean > } > // 检查对应位置上的参数类型 并不要求参数名字相同 > let mySearch: SearchFunc > mySearch = function(source:string, subString:string){ > return true > } >

可索引的类型

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

> // 具有索引签名 表示当用number去索引StringArray时会得到string类型的返回值 > /* > * 索引签名： 支持两种类型 string | number > */ > interface StringArray { > [index: number]: string; > } > > let myArray: StringArray > myArray = ['Bob', 'Fred'] > > let myStr:string = myArray[0] > > /* > * 可以支持同时使用 string | number两种索引类型 但是要求数字索引的返回值必须是字符串返回值类型的子类型 > */ > class Animal { > name: string; > } > > class Dog extends Animal { > breed: string; > } > // Error! > interface NotOkay { > [x: number]: Animal, > [x: string]: Dog > } >

类类型

类具有两个类型： 静态部分的类型和实例的类型

1 2 3 4 5 6 7 8 9 10 11 12

> // 实现接口 > interface ClockInterface { > currentTime: Date; > } > > class Clock implements ClockInterface { > currentTime: Date; > constructor(h:number, m:number){} > } > > // 类静态部分与实例部分的区别 >

继承接口

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

> interface Shape { > color: string; > } > > interface PenStoke { > penWidth: number; > } > > interface Square extends Shape, PenStoke { > sideLength: number; > } > > let square = <Square>{} > square.color = 'red'; > square.penWidth = 10; >

混合类型 一个对象可以同时作为函数和对象使用，并带有额外属性

1 2 3 4 5 6 7 8 9 10 11 12 13

> interface Counter { > (start: number): string; > interval: number; > reset(): void; > } > > function getCounter(): Counter { > let counter = <Counter>function(start: number) {}; > counter.interval = 123; > counter.reset = function() {}; > return counter; > } >

接口继承类

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

> class Control { > private state: any; // 私有成员 > } > > interface SelectableControl extends Control { > select(): void; > } > > class Button extends Control implements SelectableControl { > select() {} > } > > class TextBox extends Control { > select() {} > } > > // Error state missing > class Image implements SelectableControl { > select(){} > } >

三、类