TypeScript 技巧

Project Reference

在一个项目 src 目录下有两个相对独立的模块，分别是 src1 和 src2,其中他们都包含一系列的 .ts 文件

• 此时，在根目录需要使用 tsconfig.json 来配置编译的方式

  {
    "compilerOptions": {
      "lib": ["es2015", "dom"],
      "types": [],
      "outDir": "dist"
    },
    "include": ["src/**/*.ts"]
  }
  

  • 此时编译后的文件会分别到 dist/src1 和 dist/src2 目录下。但是如果 src1 变化了，src2 同时也会再次被编译，这时候我们需要做一些缓存设置

• 在 src1 和 src2 目录下分别创建 tsconfig.json 文件，其中需要添加 composite:true 这样的配置

  //src1 目录下`tsconfig.json`,src2 目录同理
  {
    "compilerOptions": {
      "composite": "true",
      "lib": ["es2015", "dom"],
      "types": [],
      "outDir": "dist"
    },
    "include": ["../../dist/src1"]
  }
  

• 然后在根目录的 tsconfig.json 里加上一个 references 的配置

  // 根目录下`tsconfig.json`
  {
    "compilerOptions": {
      "lib": ["es2015", "dom"],
      "types": [],
      "outDir": "dist"
    },
    "references": [
      { "path": "./src/src1" },
      { "path": "./src/src2" }
    ]
  }
  

• 运行 tsc --build,编译的结果会多出 .d.ts 文件，和缓存文件 tsconfig.tsbuildinfo(此文件会记录这些文件的 hash 值)

  • 使用 Project Refrence 需要使用 tsc --build | -b 来编译,并且需要在子模块中设置 composite:true 来指定
  • 当然，也可以通过 prepend 来指定编译顺序。此时可以优先编译 src2

  {
   ...,
   "references":[
       {"path":"./src/src1"},
       {"path":"./src/src2","prepend":true}
     ]
  }
  

TS 类型来源

ts 中的 declare 语法可以单独声明变量的类型

//object
interface Person {
    name: string
    age?: number
}

declare const guang: Person

//function
declare function add(num1: number, num2: number): number

• 但是像浏览器中内置的类型，基本都是必用的。所以 typescript 中内置了这些类型声明，在 typescript 下的 lib 文件下

  • 因为是内置的，所以很容易就可以配置

  //stsconfig.json`
  {
     "compilerOptions":{
       "lib":["es2015","dom"],
       //...
     },
     //...
  }
  

• 像 node 这种非内置的类型，使用时需要下载 @types/node 才可以使用，这些包会默认放置在 node_modules 目录下的 @types 中

  • 当然也是需要引入才可以使用

  //stsconfig.json`
  {
     "compilerOptions":{
       "types":["node"],
       //...
     },
     //...
  }
  

• 如果像 vue3 这种使用 typescript 编写的，可以自动生成内置的 .d.ts 文件

• 注意：

  • module 后一般接一个路径，而 namespace 后一般是一个命名空间名字
  • 但是，现在一般推荐使用 esmodule,如果在 dts 中没有 import 或者 export,那么所有的类型声明都是全局的，否则是模块内部的

  //tsconfig.json
  {
    "files": ["./global.d.ts"],
    "include": [
      "./types/**/*",
      "./src/**/*"
    ]
  }
  

  • 以下如果不注释 import，那么 .d.ts 不会是全局的

  //global.d.ts
  import * as fs from "fs";
  declare const fn: (a: number, b: number) => number;
  

• reference 可以指定使用的模块的类型，所以在 .d.ts 文件中使用的是 reference，而不是 import

  /// <reference types="node">
  declare const fn: (a: number, b: number) => number;
  

  • 或者在一些配置文件中也可以使用，例如 vite 中的 env.d.ts

  /// <reference types="vite/client" />
  //...
  

TS 模块化开发

• TypeScript 的两种支持
  • 模块化：每个文件可以是一个独立的模块，支持 ES Module，也支持 CommonJS
  • 命名空间：通过nampspace来声明一个命名空间

命名空间

在 TypeScript 早期时，称之为内部模块，主要是将一个模块内部再惊醒作用域的划分，防止命名冲突

• 命名空间是在 Web 应用程序中构建代码的好方法，所有依赖项都作为<script>标签包含在 HTML 页面中

export namespace price {
  export function format(price: number) {
    return "99.99";
  }
}

类型查找

• 另外的一种typescript文件：.d.ts文件
  • 通常的TypeScript文件都是以.ts文件输出
  • 另外一种.d.ts文件按，是用来做类型的声明declare.(仅仅是用来做类型监测，告知 typescript 有哪些类型)
• 三种类型声明
  • 内置类型声明
  • 外部定义类型声明
  • 自己定义类型声明

内置类型声明

• 内置类型声明是typescript自带的，帮助我们内置了JavaScript运行时的一些标准化 API 的声明文件
  • 包括比如Math,Date等内置类型，也包括DOM API，比如Window,Document等
• 内置类型声明通常在我们安装 typescript 的环境中会带有的：
  • https://github.com/microsoft/TypeScript/tree/main/lib

外部定义类型声明

• 外部类型声明通常是我们使用一些库 (比如第三方库) 时，需要的一些类型声明
  • 在自己库中进行类型声明 (编写.d.ts文件)，比如axios
  • 通过社区的一个公有库DefinitelyTyped存放类型声明文件
    • 该库的 GitHub 地址:https://github.com/DefinitelyTyped/DefinitelyTyped/
    • 该库查找声明安装方式的地址:https://www.typescriptlang.org/dt/search?search=
    • 比如我们安装 react 的类型声明：npm i @types/react --save-dev

自定义声明

何时使用自定义声明

• 我们使用的第三方库是一个纯的 JavaScript 库，没有对应的声明文件：比如 lodash
• 我们给自己的代码中声明一些类型，方便在其他地方直接进行使用

变量 - 函数 - 类的声明

declare let whyHeight: number;
declare function whyFoo(): void;
declare class Person {
  name: string;
  age: number;
  constructor(name: string, age: number);
}

声明模块

• 我们也可以声明模块，比如 lodash 模块默认不能使用的情况
• 声明模块的语法：declare module '模块名' {}
  • 在声明模块的内部，我们可以通过 export 导出对应库的类、函数等

declare module "lodash" {
  export function join(arr: any[]): void;
}

声明文件

• 在开发中我们使用了 jpg 这类图片文件，默认typescript也是不支持的，也需要对其进行声明

declare module "*.jpg" {
  const src: string;
  export default src;
}

在我们构建 vue 项目时，vue 会自己初始化一个shimes-vue.d.ts文件

• 其中 vue 的.d.ts文件并没有构建其他的全局属性 (或者自己添加的),所以如果要使用，最好加上去

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

declare module "*.json";
//暴露两个全局属性
declare const $store: any;
declare const $filters: any;

设置别名

使用 vite 开发的时候，经常会使用类似 @ 的别名等情况，如果使用 TypeScript 来设置，需要在 tsconfig.json 来设置，再在 vite.config.ts 中设置 alias，这样才可以使用

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}