TypeScript .d.ts 语法 – export 和 declare

在本文中，我们将介绍 TypeScript 中的 .d.ts 文件的语法，特别是 export 和 declare 关键字的用法。.d.ts 文件是 TypeScript 的声明文件，用来描述 JavaScript 库、模块或框架的类型信息。

阅读更多：TypeScript 教程

export 关键字

在 TypeScript 中，export 关键字用于导出变量、函数、类、类型别名等，使其可以在其他文件中使用。下面是一些 export 关键字的用法示例：

导出变量

export const name: string = "TypeScript";
export const version: string = "4.3";

导出函数

export function greet(name: string): void {
  console.log("Hello, " + name + "!");
}

导出类

export class Person {
  constructor(public name: string) {}

  greet(): void {
    console.log("Hello, " + this.name + "!");
  }
}

导出类型别名

export type Point = {
  x: number;
  y: number;
};

declare 关键字

在 TypeScript 中，declare 关键字用于声明全局变量、函数、类等外部引用的类型。一般情况下，我们使用第三方 JavaScript 库时，需要使用 declare 关键字来描述其类型信息，以避免 TypeScript 报错。

下面是一些 declare 关键字的用法示例：

声明全局变量

declare const $: JQueryStatic;

声明全局函数

declare function log(message: string): void;

声明全局类

declare class MyLibrary {
  constructor(name: string);

  greet(): void;
}

声明外部模块

如果我们使用的 JavaScript 库是以模块的形式提供的，可以使用 declare 关键字来声明其模块类型。

declare module "library" {
  export function greet(name: string): void;
}

示例

假设我们要使用一个 JavaScript 库，该库导出了一个变量和一个函数，我们来看看如何在 TypeScript 中使用：

首先，我们需要创建一个名为 “library.d.ts” 的声明文件，用于描述该库的类型信息。

declare const name: string;
declare function greet(name: string): void;

然后，我们创建一个名为 “app.ts” 的 TypeScript 文件，用于使用该库。

import { name, greet } from "./library";

console.log(name); // 输出: TypeScript
greet("TypeScript"); // 输出: Hello, TypeScript!

最后，我们需要在 TypeScript 编译器配置文件中声明该声明文件的位置。

{
  "compilerOptions": {
    "typeRoots": ["./typings"]
  }
}

总结

本文介绍了 TypeScript 中的 .d.ts 文件的语法，重点讲解了 export 和 declare 关键字的用法。通过使用 export 关键字，我们可以导出变量、函数、类和类型别名，使其可以在其他文件中使用。而使用 declare 关键字，我们可以声明全局变量、函数、类和外部模块的类型信息。通过合理使用这些语法，我们可以更好地使用第三方 JavaScript 库，并且提高代码的可读性和维护性。希望本文能够帮助你更好地理解 TypeScript 的 .d.ts 语法。