深入浅出TypeScript | 青训营

consoleLog6
62 阅读3分钟

1. 为什么要学TS

1.1. TS与JS对比

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

1.2. TS带来什么

  1. 类型安全
  2. 下一代JS特性
  3. 完善的工具链

1.3. 学习推荐

2. TS基础

2.1. 基础类型

  1. boolean、number、string
  2. undefined、null
  3. any、unknown、void
  4. never
  5. 数组类型[ ]
  6. 元组类型tuple

2.2. 函数类型

  1. 定义：TS定义函数类型时要定义输入参数类型和输出类型
  2. 输入参数：参数支持可选参数和默认参数
  3. 输出参数：输出可以自动推断，没有返回值时，默认为void类型
  4. 函数重载：名称相同但参数不同，可以通过重载支持多种类型

2.3. interface

  1. 定义：接口是为了定义对象类型
  2. 特点：
    • 可选属性: ?
    • 只读属性: readonly
    • 可以描述函数类型
    • 可以描述自定义属性
  3. interface与type
    • interface是接口概念，用于描述对象
    • type是类型别名的概念，用于别名定义，使得看起来更清晰
  4. 总结:接口非常灵活 duck typing

2.4. 类

  1. 定义：写法和JS差不多，增加了一些定义
  2. 特点：
    • 增加了 public、private、protected 修饰符
    • 抽象类
      • 只能被继承，不能被实例化
      • 作为基类，抽象方法必须被子类实现
    • interface约束类，使用implements关键字

3. TS进阶

3.1. 高级类型

  1. 联合类型 |
  2. 交叉类型 &
  3. 类型断言
  4. 类型别名 (type VS interface)
    • 定义：给类型起个别名
    • 相同点： 1.都可以定义对象或函数 2.都允许继承
    • 差异点：
      1. interface是TS用来定义对象，type是用来定义别名方便使用
      2. 2.type可以定义基本类型，interface不行
      3. interface可以合并重复声明，type不行

3.2. 泛型

基本定义

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

3.3. 基础操作符

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

3.4. 常用工具类型

  • Partial：将类型属性变为可选
  • Required：将类型属性变为必选
  • Readonly：将类型属性变为只读
  • Pick、Record...
type Partial<T> = {
    [P in keyof T]?: T[P]
}
    
type Required<T> = {
    [P in keyof T]-?: T[P]
}
    
type Readonly<T> = {
    readonly [P in keyof T]: T[P]
}

4. 实战&工程向

4.1. 声明文件

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

4.2. 后端接口约束

import axios from 'axios'
    
interface API {
    '/book/details': {
        id: number;
    },
    '/book/comment/': {
        id: number,
        comment: string
    }
}
    
function request<T extends keyof API>(url: T, obj: API[T]) {
    return axios.post(url, obj)
}
    
// 报错，url参数错误
request('/book/test', {
    id: 1,
    comment: '非常棒！'
})

// 报错，obj参数错误
request('/book/details', {
    id: 1,
    comment: '非常棒！'
})
avatar
文章
阅读
粉丝