TypeScript 什么是环境以及何时使用它们

TypeScript是JavaScript的超集，为JavaScript生态系统引入了静态类型。它使开发人员可以早期捕获错误并编写更健壮的代码。TypeScript提供的强大功能之一是能够为变量、函数、类等定义和强制类型。然而，有些情况下，TypeScript缺乏对外部JavaScript库或模块的类型信息。为了弥补这个差距并实现正确的类型检查，TypeScript提供了一个名为”环境”的功能。

在本教程中，我们将探讨环境的含义、如何使用环境以及何时使用环境的好处。

什么是环境

TypeScript中的环境提供了一种描述变量、函数、对象或模块的形状的方式，这些东西存在于TypeScript生态系统之外。它们允许开发人员为使用JavaScript编写的代码或没有类型定义的外部库定义类型信息。环境作为声明提供类型注释，并使TypeScript编译器能够理解和验证对外部代码的使用。

环境的两个主要用途

为现有JavaScript代码库提供类型信息：TypeScript允许开发人员逐渐将类型检查引入JavaScript项目。通过使用环境，可以逐步向代码库的部分代码添加类型信息，而无需将所有内容重写为TypeScript。
为外部库提供类型声明：TypeScript可以利用环境声明外部JavaScript库提供的对象、函数或类的结构和类型，而这些库没有官方的TypeScript定义。这使开发人员可以在项目中享受TypeScript的类型检查和自动完成的好处。

使用环境

环境是使用环境声明定义的，环境声明是没有实现的声明。环境关键字告诉TypeScript编译器该声明存在于其他地方，通常是一个JavaScript文件或外部库中。

语法

要创建一个环境声明，使用 declare 关键字后跟要声明的实体。这是环境声明的一般语法-

declare <entity>

下面是HTML的翻译：

<entity> 可以是一个变量、函数、类、接口或模块。让我们通过一些例子来说明环境是如何工作的。

示例1

让我们看一个实际的例子。

让我们创建一个名为 my-library 的模块，其中包含一个名为 capitalize 的实用函数，它接受一个字符串并返回其大写版本。

my-library.js

function capitalize(st) {
   return st.charAt(0).toUpperCase() + st.slice(1);
}
module.exports = {
   capitalize: capitalize,
};

现在，我们将创建一个类型定义文件来限制使用导出的 capitalize 函数时进行编译时类型检查。

首先，创建一个名为 my-library.d.ts 的新文件，内容如下：

declare module 'my-library' {
   export function capitalize(str: string): string;
}

在上面的示例中，我们声明了一个名为”my-library”的模块，并导出一个名为 capitalize 的函数，它接受一个字符串参数并返回一个字符串。

现在您可以在您的TypeScript代码中使用 capitalize 函数来进行类型安全的操作。我们创建一个 app.ts 文件，然后使用我们的 capitalize 函数。

app.ts

/// <reference types="node" />
const { capitalize } = require("./my-library");
const result = capitalize("hello");
console.log(result); // Output: Hello

通过添加/// < reference types="node" />指令，您告知TypeScript使用安装的Node.js类型定义来 require 函数。现在，TypeScript应该能够识别require函数。

通过提供准确的类型定义，TypeScript编译器可以验证 capitalize 函数的使用，防止任何潜在的类型错误。

输出

Hello

示例2

例如，假设您正在TypeScript项目中使用一个名为”moment.js”的JavaScript库进行日期操作。通过为”moment.js”定义环境声明，您可以确保TypeScript编译器理解该库的API并提供类型检查支持 –

moment.d.ts –

declare module "moment" {
   function moment(): moment.Moment;
   function add(number: number, unit: string): moment.Moment;
   // Add other function declarations if needed
}
declare namespace moment {
   interface Moment {
      format(format: string): string;
      // Add other method declarations if needed
   }
}

test1.ts

import moment from "moment";

const now = moment();
const tomorrow = moment().add(1, "day");

console.log(now.format("YYYY-MM-DD")); // Output: Current date in YYYY-MM-DD format
console.log(tomorrow.format("YYYY-MM-DD")); // Output: Tomorrow's date in YYYY-MM-DD format

输出

2023-05-26
2023-05-27

在这里，我使用了ts-node，这是一个用于即时编译的npm包。你可以使用npm安装它 –

npm i -g ts-node

环境的好处

类型安全 - 通过使用环境，TypeScript在与外部JavaScript库一起使用时可以提供类型安全。类型声明确保对外部代码的使用与预期的类型一致，减少运行时错误的机会。
工具支持 - 通过使用环境，开发人员可以获得增强的工具支持，如自动完成、智能建议和代码编辑器中准确的错误报告。这大大提高了开发人员的体验和工作效率。
渐进式类型 - 环境使开发人员可以逐步向现有的JavaScript项目引入静态类型。通过为代码库的特定部分提供类型注解，可以逐步采用TypeScript，减少了进行全面重写的工作量和风险。

结论

在TypeScript中，环境提供了一种描述外部JavaScript代码形状和行为的强大机制。它们使开发人员能够弥合TypeScript与现有JavaScript库、遗留代码库或缺乏显式TypeScript支持的浏览器API之间的差距。通过创建环境声明，开发人员可以充分利用TypeScript的静态类型、编辑器支持和重构工具的优势。

在本文中，我们探讨了TypeScript中的环境概念，并看到了如何有效使用它们。我们了解到环境声明是使用 declare 关键字创建的，该关键字告诉TypeScript编译器该声明描述了一个外部实体。