TypeScript 的模块化

TypeScript 支持两种方式来控制我们的作用域：

• 模块化：每个文件可以是一个独立的模块，支持 ES Module，也支持 CommonJS；

  export function add(num1: number, num2: number) {
    return num1 + num2
  }
  
  export function sub (num1: number, num2: number) { 
    return num1 - num2
  }
  

• 命名空间：通过 namespace 来声明一个命名空间：命名空间在 TypeScript 早期时，称之为内部模块，主要目的是将一个模块内部再进行作用域的划分，防止一些命名冲突的问题。

  export namespace Time {
    export function format(time: string) {
      return "2022-02-22"
    }
  }
  
  export namespace Price {
    export function format(price: number) {
      return" 222.22"
    }
  }
  

TypeScript 的类型声明

• 之前提到的 Typescrip t 中的类型，几乎都是自己编写的，但是也有用到一些其他的类型，但是这些其他的类型来自哪里？
  • 涉及到 TypeScript 对类型的管理和查找规则。

• TypeScript 有另一种文件格式「 .d.ts 」文件。
  • 之前编写的 TypeScript 代码（ .ts 文件）最终都会输出为 .js 文件。是通常编写代码的地方。
  • d.ts 用来作「类型的声明」。仅仅用来做类型检测，告诉 TypeScript 有哪些类型。
• TypeScript 查找类型声明的地方：
  • 内置类型声明；
  • 外部定义类型声明；
  • 自定义类型声明；

内置类型声明

内置类型声明是 Typescript 自带的、帮助我们内置了 JavaScript 运行时的一些标准化 API 的声明文件。

• 包括 Math 、 Data 等内置类型， 也包括 DOM API，比如 Window 、 Document 等。
• 内置类型声明通常在我们安装 typescript 的环境中会带有的。

外部定义类型声明和自定义类型声明

外部类型声明通常是使用一些库（比如第三方库）时，需要的一些类型声明。这些库有两种类型声明方式：

• 在自己库中进行类型声明（编写 .d.ts 文件），比如 axio。
• 通过社区的一个公有库 DefinitelyTyped 存放类型声明文件：
  • 该库的 GitHub 地址：https://github.com/DefinitelyTyped/DefinitelyTyped/
  • 该库查找声明安装方式的地址：https://www.typescriptlang.org/dt/search?search=
  • 比如安装 React 的类型声明： npm i @types/react --save-de 。

自定义类型声明的使用场景：

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

🌰 例子：

declare let wName: string;
declare let wAge: number;
declare let wHeight: number;

declare function wFoo(): void;
declare function wBar(): void;

declare class Person {
  name: string
  age: number
	
  constructor(name: string, age: number)
}

let wName = "simon"
let wAge = 18
let wHeight = 1.88

function wFoo() {
  console.log("wFoo")
}
function wBar() {
  console.log ("wBar")
}
function Person (name, age) {
  this.name = name
  this.age = age
}

声明模块

声明模块的语法： declare module '模块名' {} 。

在声明模块的内部，可以通过 export 导出对应库的类、函数等。

声明模块，比如 lodash 模块默认不能使用的情况，可以自己来声明这个模块：

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

声明文件

在某些情况下，可以声明文件：

• 比如在开发 Vue 的过程中，默认是不识别 .vue 文件的，那么就需要对其进行文件的声明；（在 Vue 3 中，基于 TypeScript 开发有一个文件 shims-vue.d.ts ）
• 比如在开发中我们使用了 jpg 这类图片文件，默认 Typescript 也是不支持的，也需要对其进行声明。

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent
  
	export default component
}

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

声明命名空间

• 比如在 Vue 开发中的 index.html 中直接引入了 jQuery：

  • CDN 地址： https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.j

• 我们可以进行命名空间的声明：

declare namespace $ {
  function ajax(settings: any): void
}

• 然后在 main.ts 使用：

$.ajax({
  url: "**",
  success: (res: any) => {
    console.log (res);
  }
});