TS补充

Partial<T> 是怎么实现的

type Partial<T> = { [P in keyof T]?: T[P] }

• keyof：获取一个类型中所有的成员名称
• Required
• Pick：从一个已知类型中挑选需要的成员字段，形成新的类型
• Record：快速创建一个字典（键值对集合）类型
• typeof：跟 JS 里的 typeof 没有关系
• interface 与 type

interface A {
  name: string
  age: number
}

type B = {
  name: string
  age: number
}

唯一功能上的差异：interface 可以做类型补充声明，非常适合会被扩展的模块

类型补充声明

模块类型补充问题

针对 NPM 上大量的 JS 模块无法直接在 TS 项目中使用，解法：

1. 项目内添加 .d.ts，通过 declare module 的方式声明（几乎没有）
2. 尝试去安装 @types/xxx 类型补充声明模块
   • @types/xxx -> xxx
   • @types/xxx__yyy -> @xxx/yyy
3. 一般新模块都会自己内置当前模块的类型补充声明文件

插件的类型扩展，使用类型补充声明

import { AxiosInstance } from 'axios'

declare module 'vue/types/vue' {
  interface Vue {
    readonly $api: AxiosInstance
  }
}

JS 项目中的类型增强

JavaScript 项目中如何有更好的类型提示：JSDoc + import-types

https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html

https://www.typescriptlang.org/play/index.html?useJavaScript=truee=4#example/jsdoc-support

类型注解

• @type
• @typedef

1. 配置文件类型
2. router 类型
3. store 类型

类型检查

@ts-check