TypeScript 是 JavaScript 的一个超集，它支持最新的 ES6 语法。TypeScript 可以编译成纯 JavaScript。

上手

通过 npm 或者 yarn 安装 typescript。生成配置文件，把 ts 文件编译成 js 文件，可以配置文件夹批量编译，也可以单个文件编译，单个文件编译不会启用配置文件。

  1. yarn add typescript --dev
  2. yarn tsc --init
  3. yarn tsc
  4. yarn tsc ts文件相对路径

TypeScript 的语法与 JavaScript 十分接近，但是在配置选项开启了严格检查选项，TypeScript 就不能使用隐式类型。如果使用 vs code， 即使没有开启严格选项，vs code 也会提示 ts 文件的隐式类型警告。

  1. // 可以完全按照 JavaScript 标准语法编写代码
  3. const hello = (name: any) =>  {
  4.   console.log(`Hello, ${name}`)
  5. }
  7. hello('TypeScript')

原始数据类型

  1. // 原始数据类型
  3. const a: string = 'foobar'
  5. const b: number = 100 // NaN Infinity
  7. const c: boolean = true // false
  9. // 在非严格模式（strictNullChecks）下，
  10. // string, number, boolean 都可以为空
  11. // const d: string = null
  12. // const d: number = null
  13. // const d: boolean = null
  15. const e: void = undefined
  17. const f: null = null
  19. const g: undefined = undefined
  21. // Symbol 是 ES2015 标准中定义的成员，
  22. // 使用它的前提是必须确保有对应的 ES2015 标准库引用
  23. // 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015
  24. const h: symbol = Symbol()
  26. // Promise
  28. // const error: string = 100

标准库声明

在配置文件中有一个选项 target，规定 ts 使用的 ES 标准，这个选项的值如果不是 “ES2015” 或以上的版本，Promise 等新特性就无法使用。如果因为一些原因不能更改 target 的值，要解决这个问题，那么可以启用另一个选项 lib，声明要额外使用的标准库。ES2015 和 DOM 一般是需要使用的。

  1. {
  2.   "compilerOptions": {
  3.     "lib": ["ES2015", "DOM", "ES2017"]
  4.   }
  5. }

作用域问题

默认文件中的成员会作为全局成员，多个文件中有相同成员就会出现冲突。使用立即调用函数表达式，或者使用 export 把文件当成一个模块，可以解决问题。

  1. // 作用域问题
  4. // const a = 123  // 全局成员
  6. // 解决办法1: IIFE 提供独立作用域
  7. // (function () {
  8. //   const a = 123
  9. // })()
  11. // 解决办法2: 在当前文件使用 export，也就是把当前文件变成一个模块
  12. // 模块有单独的作用域
  13. const a = 123
  15. export {}

Object 类型

Object 并不单指对象，而是指除原始类型以外的所有类型，包括对象，数组，函数，类等。

数组

  1. // 数组类型
  3. export {} // 确保跟其它示例没有成员冲突
  5. // 数组类型的两种表示方式
  7. const arr1: Array<number> = [1, 2, 3]
  9. const arr2: number[] = [1, 2, 3]
  11. // 案例 -----------------------
  13. // 如果是 JS，需要判断是不是每个成员都是数字
  14. // 使用 TS，类型有保障，不用添加类型判断
  15. function sum (...args: number[]) {
  16.   return args.reduce((prev, current) => prev + current, 0)
  17. }
  19. sum(1, 2, 3) // => 6

元组

元组是一种特殊的数据结构，它有明确的元素数量，元素具有明确的数据类型。

  1. // 元组（Tuple）
  3. export {} // 确保跟其它示例没有成员冲突
  5. const tuple: [number, string] = [18, 'zce']
  7. // const age = tuple[0]
  8. // const name = tuple[1]
  10. const [age, name] = tuple
  12. // ---------------------
  14. const entries: [string, number][] = Object.entries({
  15.   foo: 123,
  16.   bar: 456
  17. })
  19. const [key, value] = entries[0]
  20. // key => foo, value => 123

枚举 enum

  1. // 枚举（Enum）
  3. export {} // 确保跟其它示例没有成员冲突
  5. // 用对象模拟枚举
  6. // const PostStatus = {
  7. //   Draft: 0,
  8. //   Unpublished: 1,
  9. //   Published: 2
  10. // }
  12. // 标准的数字枚举
  13. // enum PostStatus {
  14. //   Draft = 0,
  15. //   Unpublished = 1,
  16. //   Published = 2
  17. // }
  19. // 数字枚举，枚举值自动基于前一个值自增
  20. // enum PostStatus {
  21. //   Draft = 6,
  22. //   Unpublished, // => 7
  23. //   Published // => 8
  24. // }
  26. // 字符串枚举
  27. // enum PostStatus {
  28. //   Draft = 'aaa',
  29. //   Unpublished = 'bbb',
  30. //   Published = 'ccc'
  31. // }
  33. // 常量枚举，不会侵入编译结果
  34. const enum PostStatus {
  35.   Draft,
  36.   Unpublished,
  37.   Published
  38. }
  40. const post = {
  41.   title: 'Hello TypeScript',
  42.   content: 'TypeScript is a typed superset of JavaScript.',
  43.   status: PostStatus.Draft // 3 // 1 // 0
  44. }
  46. // PostStatus[0] // => Draft

函数

TypeScript 的两种函数定义方式：函数声明和函数表达式。

  1. // 函数类型
  3. export {} // 确保跟其它示例没有成员冲突
  5. function func1 (a: number, b: number = 10, ...rest: number[]): string {
  6.   return 'func1'
  7. }
  9. func1(100, 200)
  11. func1(100)
  13. func1(100, 200, 300)
  15. // -----------------------------------------
  17. const func2: (a: number, b: number) => string = function (a: number, b: number): string {
  18.   return 'func2'
  19. }

隐式类型推断

  1. // 隐式类型推断
  3. export {} // 确保跟其它示例没有成员冲突
  5. let age = 18 // number
  7. // age = 'string'  // 报错
  9. let foo  // any
  11. foo = 100
  13. foo = 'string'
  15. // 建议为每个变量添加明确的类型标注

类型断言

告诉 TypeScript，该变量一定是某一类型。

  1. // 类型断言
  3. export {} // 确保跟其它示例没有成员冲突
  5. // 假定这个 nums 来自一个明确的接口
  6. const nums = [110, 120, 119, 112]
  8. const res = nums.find(i => i > 0)
  10. const square = res * res  // 报错，res 有可能是 undefined
  12. // 断言方式一
  13. const num1 = res as number
  15. // 断言方式二
  16. const num2 = <number>res // JSX 下不能使用

接口

interface 是一种规范，或者约定。它规定了一个对象应该有哪些属性或方法。

  1. // 可选成员、只读成员、动态成员
  3. export {} // 确保跟其它示例没有成员冲突
  5. // -------------------------------------------
  7. interface Post {
  8.   title: string
  9.   content: string
  10.   subtitle?: string  // 可选成员
  11.   readonly summary: string // 只读成员，实现后不可修改
  12. }
  14. const hello: Post = {
  15.   title: 'Hello TypeScript',
  16.   content: 'A javascript superset',
  17.   summary: 'A javascript'
  18. }
  20. // hello.summary = 'other'
  22. // ----------------------------------
  24. interface Cache {
  25.   [prop: string]: string
  26. }
  28. const cache: Cache = {}
  30. cache.foo = 'value1'
  31. cache.bar = 'value2'

类

类用来描述一类具体对象的抽象成员。
private：加上这个修饰的属性和方法，只允许在自己本身这个类里访问，程序的任何其它地方都不能访问。
protected：受保护的，位于public和private中间，加上这个修饰的属性和方法，只能在子类（extends）和同包下的程序访问，别的的地方不能访问。
readonly 只能在属性声明或构造方法中赋值一次。

  1. // 类的访问修饰符
  3. export {} // 确保跟其它示例没有成员冲突
  5. class Person {
  6.   public name: string = 'init name' // 默认 public
  7.   private age: number
  8.   protected readonly gender: boolean
  10.   constructor (name: string, age: number) {
  11.     this.name = name
  12.     this.age = age
  13.     this.gender = true
  14.   }
  16.   sayHi (msg: string): void {
  17.     console.log(`I am ${this.name}, ${msg}`)
  18.     console.log(this.age)
  19.   }
  20. }
  22. class Student extends Person {
  23.   private constructor (name: string, age: number) {
  24.     super(name, age)  // 调用父类的构造方法
  25.     console.log(this.gender)
  26.   }
  28.   static create (name: string, age: number) {
  29.     return new Student(name, age)
  30.   }
  31. }
  33. const tom = new Person('tom', 18)
  34. console.log(tom.name)
  35. // console.log(tom.age)
  36. // console.log(tom.gender)
  38. const jack = Student.create('jack', 18)

类与接口

接口相比类更加抽象一些，接口的属性不能初始化值，它的方法没有具体的实现，只是定义了这个接口有这一个方法。比如下面的代码，Eat、Run 接口，动物和人都会吃和跑，但是对于不同的生物来讲，吃和跑的方式不一样，方法的逻辑就不一样。
一个类可以实现多个接口。

  1. // 类与接口
  3. export {} // 确保跟其它示例没有成员冲突
  5. interface Eat {
  6.   eat (food: string): void
  7. }
  9. interface Run {
  10.   run (distance: number): void
  11. }
  13. class Person implements Eat, Run {
  14.   eat (food: string): void {
  15.     console.log(`优雅的进餐: ${food}`)
  16.   }
  18.   run (distance: number) {
  19.     console.log(`直立行走: ${distance}`)
  20.   }
  21. }
  23. class Animal implements Eat, Run {
  24.   eat (food: string): void {
  25.     console.log(`呼噜呼噜的吃: ${food}`)
  26.   }
  28.   run (distance: number) {
  29.     console.log(`爬行: ${distance}`)
  30.   }
  31. }

抽象类

抽象类无法创建实例，但是它可以具体实现方法，接口不行。继承抽象类的子类需要实现用 abstract 修饰的方法或属性。

  1. // 抽象类
  3. export {} // 确保跟其它示例没有成员冲突
  5. abstract class Animal {
  6.   eat (food: string): void {
  7.     console.log(`呼噜呼噜的吃: ${food}`)
  8.   }
  10.   abstract run (distance: number): void
  11. }
  13. class Dog extends Animal {
  14.   run(distance: number): void {
  15.     console.log('四脚爬行', distance)
  16.   }
  18. }
  20. const d = new Dog()
  21. d.eat('嗯西马')
  22. d.run(100)

泛型

泛型是定义函数、接口或类等时，不指定具体的类型，等到调用的时候再传递一个类型。泛型提高了通用性。

  1. // 泛型
  3. export {} // 确保跟其它示例没有成员冲突
  5. function createNumberArray (length: number, value: number): number[] {
  6.   const arr = Array<number>(length).fill(value)
  7.   return arr
  8. }
  10. function createStringArray (length: number, value: string): string[] {
  11.   const arr = Array<string>(length).fill(value)
  12.   return arr
  13. }
  15. function createArray<T> (length: number, value: T): T[] {
  16.   const arr = Array<T>(length).fill(value)
  17.   return arr
  18. }
  20. // const res = createNumberArray(3, 100)
  21. // res => [100, 100, 100]
  23. const res = createArray<string>(3, 'foo')
  24. const res_1 = createArray<number>(4, 0)