TypeScript 类型声明文件定义及简单使用

TypeScript 的类型声明文件（类型声明文件的命名通常为 [模块名].d.ts，其中 d 表示 declaration（声明））用于定义 JavaScript 库或模块的类型信息，使得 TypeScript 可以在编译时进行类型检查。以下是类型声明文件的一些关键点： 

1. 声明文件的作用

• 类型检查：为现有的 JavaScript 代码添加类型信息。
• 智能提示：在 IDE 中提供更好的代码补全和文档提示。
• 模块化支持：允许 TypeScript 项目正确引用和使用外部库。

2.TypeScript中的文件类型

• .ts 文件：既包含类型信息又包含可执行代码，可被编译为 .js 文件。
• .d.ts 文件：只包含类型信息的类型声明文件，不会生成 .js 文件，仅用于提供类型信息。

3.类型声明文件的来源

• 类型声明文件可以由TypeScript编译器自动生成。
• TypeScript社区通过DefinitelyTyped项目提供大量第三方库的类型声明文件。
• 可以通过 @types 包从npm安装这些类型声明文件。

4.编写类型声明文件

   1）基本类型声明：
   使用 declare 关键字来声明变量、函数、类等的类型。
   例如：declare const myVariable: string; 或 declare function myFunction(arg1: number, arg2: string): boolean。

    以下是一个简单的类型声明文件示例：

// types.d.ts
export interface Character {
    catchphrase?: string;
    name: string;
}

    2）命名空间声明：
    使用 namespace 关键字来声明命名空间，适用于库中使用命名空间的情况 。

5. typescript基本语法

     接口 (Interface)：定义对象的结构：

interface User {
  name: string;
  age: number;
}

     类型别名 (Type Alias)：创建新的类型名称：

     

type User = {
  name: string;
  age: number;
};

     枚举 (Enum)：定义一组命名的常量：

enum Color { Red, Green, Blue }

     命名空间 (Namespace)：组织相关的类型和变量：

namespace Shapes {
  export interface Circle {
    radius: number;
  }
}

6. 声明合并

接口合并：多个同名接口可以合并成一个：

interface User {
  name: string;
}

interface User {
  age: number;
}

// 合并后的 User 接口
// interface User {
//   name: string;
//   age: number;
// }

命名空间合并：多个同名命名空间可以合并:

namespace Shapes {
  export interface Circle {
    radius: number;
  }
}

namespace Shapes {
  export interface Square {
    sideLength: number;
  }
}

// 合并后的 Shapes 命名空间
// namespace Shapes {
//   export interface Circle {
//     radius: number;
//   }
//   export interface Square {
//     sideLength: number;
//   }
// }

7. 声明文件中的模块

全局模块：不使用 import 或 export 关键字：

declare function foo(): void;

外部模块：使用 import 和 export 关键字：

export interface User {
  name: string;
  age: number;
}

8. 声明文件的使用

1)安装声明文件：通过 npm 安装：

npm install @types/library-name --save-dev

2)手动创建声明文件：在项目中创建 .d.ts 文件：

// my-library.d.ts
declare module 'my-library' {
  export function doSomething(): void;
}

3)如何自动生成类型声明文件：

a）编译器选项：
在TypeScript项目中，可以通过编译器选项 --declaration 或 -d 来生成类型声明文件。
当你运行TypeScript编译器 tsc 时，添加此选项会为你的 .ts 文件生成相应的 .d.ts 声明文件。
b）命令行使用：
假设你有一个 index.ts 文件，你可以使用以下命令来编译它并生成声明文件：

tsc --declaration index.ts
说明：使用命令tsc之前先要安装typescript，具体安装命令如下：
1）项目中安装
pnpm add --save-dev typescript
2）全局安装
pnpm add -g typescript

9. 常见问题

• 如何为没有类型声明的库添加类型：创建自己的 .d.ts 文件并在项目中引用。
• 如何处理全局变量：使用 declare global。

declare global {
  interface Window {
    myGlobalFunction: () => void;
  }
}

通过以上内容，你可以更好地理解和使用 TypeScript 的类型声明文件，从而提高代码的可维护性和开发效率。