TS 中的模块声明

TS中的模块声明.png

我们知道，当我们写了一个 JS 模块，在 TS 中是不能直接使用的，我们必须为此模块编写声明文件，也就是编写 xxx.d.ts 文件，同时，我们把这些只声明不实现的代码叫 环境声明（We call declarations that don’t define an implementation “ambient”）

环境模块（Ambient Modules）

我们知道 NodeJs 有很多的内置模块，这些模块都是用 JS 写的，如果我们要在 TS 环境使用这些模块就的编写声明文件，我们看看内置的 URL 模块的部分声明文件：

declare module "url" {
  export interface Url {
    protocol?: string;
    hostname?: string;
    pathname?: string;
  }
  export function parse(
    urlStr: string,
    parseQueryString?,
    slashesDenoteHost?
  ): Url;
}

假如这个声明文件叫 node.d.ts，我们可以这样使用它：

/// <reference path="node.d.ts"/>
// import * as URL from "url"; 可以替换为 import url = require("url");
import * as URL from "url";
let myUrl = URL.parse("http://www.typescriptlang.org");

这是我们正常写的模块声明文件，里面包含着各种细节的实现，如果你嫌弃实现细节太麻烦了，你也可以缩略掉内部细节，虽然并不建议这么做。

来看看，如何缩略掉内部细节？

简化环境模块（Shorthand ambient modules）

假如一个模块声明文件为 declarations.d.ts：

declare module "hot-new-module";

这种不包含内部实现细节的，TS 会把它处理成 any 类型，这意味着你在导入时可以随意导入使用，而不会报错，例如：

import x, { y } from "hot-new-module";
x(y);

这种用法除了对图片视频等静态资源使用外，不建议对任何代码文件使用，声明模块的时候一定要包含模块的内部细节。

通配符模块声明

我们知道在 TS 中没法使用非代码资源，例如图片、视频等，但是我们在项目中肯定会使用到这类非代码资源，那怎么办呢？

比如我们需要 logo.png、userInfo.png 等等，从本质上来讲每个图片或视频都是一个模块，所以我们可以这样：

declare moudle "logo.png";
declare moudle "userInfo.png";
...

这样一个一个去声明不太好，毕竟项目中这类资源还不少来，要是能够批量就好了，我们能想到的 TS 当然替我们想到了。

在 TS 批量声明模块——通配符。

declare moudle "*.png";

上面表示所有的 xxx.png 文件都被声明了。

参考

working-with-other-javascript-libraries

当前时间 Wednesday, May 12, 2021 23:28:18