深入浅出TypeScript

JS 和 TS 的区别

Typescript	Javascript
JavaScript 的超集，用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型	动态弱类型语言
可以在编译期间发现并纠正错误	只能在运行时发现错误
不允许改变变量的数据类型	变量可以被赋值成不同类型

简单来说，Typescript = Type + Javascript，它不仅是一门语言，更是生产力工具。

Awesome Typescript：ts开源教程及应用

Typescript Background：ts -> js 在线编译

TS 基础

1. 基础类型

boolean、number、string
undefined、null
any、unknown、void
never
数组类型 []
元组类型 tuple

2. 函数类型

定义：TS定义函数类型时要定义输入参数类型和输出类型，
其中，输入参数是支持可选参数和默认参数的，输出参数可以自动推断，若没有返回值则默认为void类型。

// 可选参数用?表示，且必须放在最后
function buildName(firstName = "Smith", lastName?: string) {
  if (lastName) return firstName + " " + lastName;
  else return firstName;
}
// 函数重载
function add(x: string[]): string
function add(x: any[]): any {
  if (typeof x[0] === 'string') {
    return x.join()
  }
  if (typeof x[0] === 'number') {
    return x.reduce((acc, cur) => acc + cur)
  }
}

3. Interface接口

定义：接口是为了定义对象类型

特点：

可选属性：?

只读属性：readonly

可以描述函数类型

可以描述自定义属性

总结：接口非常灵活 duck typing

// 写法1
interface Person {
  name: string
  age: number
}
const p1: Person = {
  name: 'lin',
  age: 18
}
//写法2
interface RandomKey {
  [propName: string]: string
}
const obj: RandomKey = {
  a: 'hello',
  b: 'world',
  c: 'typescript'
}

4. 类

定义：写法和Javascript差不多，但增加了一些定义。

特点：

增加了public、private、protected 修饰符

抽象类：
- 只能被继承，不能被实例化；
- 作为基类，抽象方法必须被子类实现。

interface约束类，使用implements关键字

class Person {
  protected name: string
  private sex: string
  public constructor(name: string) {
    this.name = name
    this.sex = 'male'
  }
}
class Student extends Person {
  study() {
    console.log(this.name)
    // console.log(this.sex) // sex是父类的私有属性，不能直接访问
  }
}

TS 进阶

1. 高级类型

联合类型 |
交叉类型 &
类型断言
类型别名（type VS interface）

定义：给类型起个别名
相同点：
1. 都可以定义对象或函数；
2. 都允许继承。
差异点
1. interface是TS用来定义对象，type是用来定义别名方便使用；
2. type可以定义基本类型，interface不行；
3. interface可以合并重复声明，type不行。

2. 泛型

什么时候需要泛型：软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能；

在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

举个例子，如果写一个函数接收number类型的参数，后续如果还要接受string、array……，就要重写多个函数重载，不如写一个泛型函数来得省力。

基本定义：

泛型的语法是今里面写类型参数，一般用T表示;
使用时有两种方法指定类型:
1. 定义要使用的类型
2. 通过TS类型推断，自动推导类型
泛型的作用是临时占位，之后通过传来的类型进行推导

function print<T>(arg: T): T {
  console.log(arg)
  return arg
}
print<string>('hello') // 定义 T 为 string
print('hello') // TS 类型推断，自动推导类型

基础操作符

typeof：获取类型
keyof：获取所有键
in：遍历枚举类型
T[K]: 索引访问
extends：泛型约束

常用工具类型

Partial<T>：将类型属性变为可选
Required<T>：将类型属性变为必选
Readonly<T>：将类型属性变为只读
Pick、Record……

TS 实战

声明文件

declare：三方库需要类型声明文件
.d.ts：声明文件定义
@types：三方库TS类型包
tsconfig.json：定义TS的配置

深入浅出TypeScript | 青训营笔记