轻松玩转TypeScript的declare、.d.ts和namespace

2023-04-01 22:59:44

打造优雅代码的利器：TypeScript 的 declare、.d.ts 和 namespace

作为一名技术达人，TypeScript 肯定不是一个陌生的名字。作为 JavaScript 的超集，TypeScript 提供了类型检查和代码重构等强大功能，让你的代码更上一层楼。但要真正发挥 TypeScript 的全部潜力，掌握 declare、.d.ts 和 namespace 这三大法宝至关重要。

declare：跨环境兼容性的救星

declare 就像一个魔法棒，它允许你在 TypeScript 代码中声明外部变量、函数和类，即使它们尚未定义。这就像在代码中创建了一个占位符，让 TypeScript 能够正确地检查类型。

想象一下，你要使用一个没有提供 TypeScript 类型定义文件的三方库。此时，declare 就派上用场了，它能让你声明库中的变量、函数和类。这样，TypeScript 就能识别这些外部符号并为你提供类型提示。

// 声明一个名为 $ 的全局变量
declare var $: JQuery;

// 声明一个名为 ajax 的函数
declare function ajax(url: string, settings?: JQueryAjaxSettings): JQueryXHR;

// 声明一个名为 Person 的类
declare class Person {
  name: string;
  age: number;
}

.d.ts：赋予外部库类型生命

.d.ts 文件是 TypeScript 的类型定义文件，包含了外部库的类型信息，让 TypeScript 能够正确地识别和检查代码。

如果你想使用一个没有提供 .d.ts 文件的外部库，你可以亲自动手创建。只需要在文件中声明库中的变量、函数和类，然后保存为 .d.ts 文件即可。

// 在 my-lib.d.ts 文件中
declare module "my-lib" {
  export function greet(name: string): string;
}

.namespace：代码组织的大师

namespace 是 TypeScript 中用于组织代码的工具。它可以将相关的变量、函数和类分组在一起，让代码更易于阅读和维护。

// 创建一个名为 MyNamespace 的命名空间
namespace MyNamespace {
  export var name = "John Doe";

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

// 在其他地方使用命名空间
console.log(MyNamespace.name); // John Doe
MyNamespace.greet(); // Hello, John Doe