TypeScript入坑
TypeScript
安装
$ npm i -g typescript
安装完毕后，可在命令行中使用 tsc 命令测试是否安装成功：
$ tsc --version
可查看到版本信息，则说明安装成功
TypeScript 基础语法
类型注解：在变量定义时，需要声明变量的数据类型
const 变量名: 数据类型 = 变量值
监视模式：
tsc 文件名–watch
在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译成js文件，避免重复手动操作。
ts => js
tsc 文件名
TypeScript 基础类型
- string
- number
- boolean
- 数组
// 数组 let arr: number[] = [3, 2, 4, 1] let array: Array<string> = ['a', 'b', 'c']
元组：元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同
// 元组 let arr3: [number, string, boolean] = [1, 'a', true]
enum：枚举
// 枚举：枚举类型用于定义数值集合 enum Color {Red, Green, Blue} let color1: Color = Color.Red let color2: Color = Color.Green
any: 声明为 any 的变量可以赋予任意类型的值
// any let v: any = 1 v = 'abc' v = true
类型断言
语法：
<类型>值 // 或 值 as 类型
// 类型推断 let str = '1' // string // 类型断言 let str2: number = <number> <any> str console.log(str2) //string '1'
类型推断
当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。
如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。
函数
语法：
function fnName( param1: datatype, param2: datatype = defaultValue, param3?: datatype, ): returntype { // return '表达式' }
剩余参数：
函数体内部 …args剩余运算符
展开运算符 …
联合类型
类型1|类型2|类型3
接口、类、对象
相当于是定义类时使用到的模板
// 接口 interface IPerson { name: string, age: number, sex: string, eat: (food: string) => string, sleep: () => void, } // class class Student implements IPerson { name: string; age: number; sex: string; constructor(name: string, age: number, sex: string) { this.name = name this.age = age this.sex = sex } eat(food: string): string { return '吃东西：' + food } sleep(): void { console.log(this.name + ' 睡觉') } } // 对象 let stu: IPerson = new Student('张三', 18, '男') stu.sleep() let food: string = stu.eat('土豆丝')
泛型
主要是实现重用
例：
function identity<T>(arg: T): T { return arg; }
实现功能：定义一个函数，要求参数类型与返回值类型一致。
<T> 的定义就是一个泛型的结构。
T 可看作是一个类型变量
调用：
const val = identity<number>(35) // 注意，参数是 number 类型，返回值也是 number 类型
