一、概述
1、什么是Typescript？
官方网站的定义是: TypeScript 是 JS 类型的超集，TypeScript 是一个js的外壳，需要编译成浏览器可识别的javascript才可以运行。
2、为什么使用Typescript？
- 弥补javascript缺少类型判断，缺少结构化机制(类、模块、接口等)的不足
- 程序更容易理解 (‘代码即注释’)
- 效率更高（编译期就会发现大部分错误）
- 非常好的包容性（完全兼容js、流行项目都支持Ts）
不足：增加了一些学习成本，短期内增加了一些成本，项目规模小，无必要使用
2、安装和初试
- 安装
npm install -g typescript
- 编译
tsc file.ts
- 简便方法，安装ts-node
每次都需要对ts文件编译产生js文件后再通过node 运行，比较麻烦
npm i ts-node -g ts-node file.ts
3、数据类型
- 原始数据类型
- Boolean
- let isDone: boolean = false;
- Null
let null = null
- Undefined
let undefined = undefined
- Symbol
- String
let firstName:string = "jimmy"
- Number
let age: number = 20 | 0b1111;
- 注意： undefined和null是其他类型的子集
- Eg:
let num: number = undefined | null
- any类型,有明确类型避免使用
let notSure :any = 4
notSure = '1233'
notSure = true
- 联合类型（|）
let numberOrString : number | string = 23
- 数组类型
let arrOfNumbers:number[] = [1,2,3,4]
arrOfNumbers.push(1)
arrOfNumbers.push('1') // error
- Tuple--特殊定义数组类型的方式
let user:[string,number] = ['hello', 99]
user = ["world","haha"] // error
- interface
| 对对象的形状进行描述
| 对类进行抽象
| 鸭子类型 对象的推断，而不是对象本身
interface IPerson{ readonly id：number; name:string; age?:number; } let tom: IPerson = { name : 'tom', id:1, age:19 } // 注意： age后面的问号代表可选属性,代表该属性可以不存在，readonly代表只读属性，代表对象中的该属性只能读不能修改。注意接口命名首字母需要大写，I开头不强制， 每个属性定义后用";" 结尾
- 函数类型
// 对参数和返回值的约定 const add = function(x:number,y:number,z?:number =10):number{ if(typeof m === 'number'){ return x + y + m }else{ return x + y } } // let result = add(1,2) // let result = add(1,2,3) // z为可选类型可选类型放参数最后面 // 类型推断,可以根据赋值推断变量类型 const add2: string = add // error const add2:(x:number,y:number,z?:number =10)=>number = add // true eg： let str = "hello" str = 123 // error str = "world" // true
- class类的支持
// 创建Animate类 class Animate{ public name:string; // 公有属性|默认属性 readonly id:number; // 只读，不可修改赋值 private size:number; // 私有方法，只有自己可以访问 protected key:boolean;// 受保护的属性，自己和子类可以使用 static categoies:string[] = ["mammal",brid]; // 静态属性 static isAnimal(a){ // 静态方法 return a instanceof Animate } constructor(name){ this.name = name; } run(){ return `${this.name} is running` } } // 继承父类 class Cat extends Animate{ constructor(name,key){ super(name) // 继承父类的方法 this.name = name; this.key = key; run(){ // 重写父类run方法 return 'Meow, ' + super.run() } } } const cat = new Cat('miao',true) console.log(cat.run()) // 'Meow, miao is running'
- 类和接口的使用---implements
// 提取公共的接口 interface Radio{ switchRadio(trriger:boolean) : void | number; } // Cellphone特有 interface Battery{ checkBattertStatus(); } class Car implements Radio{ switchRadio(){} } class Cellphone implements Radio,Battery{ switchRadio(){} checkBattertStatus(){} } // 定义接口继承已有 interface RadioWithBattery extends Radio{ checkBattertStatus(); } class Cellphone implements checkBattertStatus{ switchRadio(){} checkBattertStatus(){} }
- 枚举Enums
一般声明常量中使用，并且有一定关系
数字枚举
enum Direction{ Up, Down, Right, Left } console.log(Direction.Up) // 0 console.log(Direction.Down) // 1 console.log(Direction[0]) // Up 可以给Up赋值，后面的会递增
字符串枚举
enum Direction{ Up='UP', Down='DOWN', Right='RIGHT', Left='LEFT', } const value = 'UP' if(Direction['UP']===value){ console.log('go up') }
