TS-番外: 模块化

TS模块化

ts模块化有助于帮助开发者更好地管理代码的组织和复杂度。模块可以将相关代码封装在一起，并允许在模块外部导出并使用。TypeScript中最主要使用的模块化方案就是ES Module和js模块化管理差不多

.d.ts文件

类型定义文件，用于描述 TypeScript 代码中定义的 JavaScript 库、模块和命名空间的类型信息。.d.ts文件中只写类型声明, 不写逻辑操作。

• 描述外部 JavaScript 库中 API 的类型。
• 描述你自己的模块或库对外提供的 API 的类型。
• 提供给其他 TypeScript 项目使用的类型声明文件。

细节: 导入时添加type关键字, 表示你导入的是一个类型。可以使得ts编译阶段进行更好的处理

import { type IPerson } from "./utils/type";
//或
import type { IPerson } from "./utils/type";

空导出模式export {}

使用 export {} 可以显式地指示该模块不导出任何内容，在模块中形成了作用域解决变量命名冲突, 从而避免这种警告或错误的发生。

早期使用的命名空间

ts自己的模块化方案--命名空间namespace。将一个模块内部再进行作用域的划分，防止一些命名冲突的问题

export namespace MyNamespace {
  // 导出项
  export interface MyInterface { ... }
  export function myFunction(): void { ... }
  // 嵌套命名空间
  export namespace MyInnerNamespace { ... }
}

delare声明

declare 关键字用于在.d.ts文件中声明全局变量、类或函数等。通过使用 declare 关键字，可以告诉编译器这些实体已经存在，并且不需要进行检查或转换。

• 声明全局变量

declare const coderName: string
declare const coderType: string

• 声明全局函数

declare const foo: (str: string) => string

• 声明全局类

declare class Person {
 constructor(public name: string, public age: number)
  // 这里的类声明也是不需要写逻辑操作
  // this.name = name, this.age = age
}

• 文件声明

例如在ts中导入.png/.img等结尾的图片无法识别, 需要进行文件声明

declare module "*.png"
declare module "*.img"