当前位置：首页 > news >正文

Typescript 第十一章与JavaScript互操作（外参变量声明，外参类型声明，外参模块声明）

news 2025/8/17 12:01:29

第十一章与JavaScript互操作

本章讨论在实际开发中如何编写Typescript。有可能你真正把代码从无类型语言向Typescript迁移。也有可能要使用第三方库。

使用类型声明
逐步从JavaScript迁移到Typescript
使用第三方JavaScript和Typescript

11.1 类型声明

类型声明文件的扩展名为.d.ts。类型声明配合JSDoc注解（11.2.3节）是无类型的JavaScript代码附加Typescript类型的一种方式。（ // 编译时将.d.ts类型声明一同打包"declaration": true,tsconfig.json）

类型声明的句法与常规的Typescript代码类似，不过也有几点区别：

类型声明只能包含类型，不能有值。这意味着，类型声明不能实现函数，类，对象或变量，参数也不难有默认值。
类型声明虽然不能定义值，但是可以声明JavaScript代码中定义了某个值，此时，使用特殊的declare关键字。
类型声明只声明使用方可见的类型。如果某个代码不导出，或者是函数体内的局部变量，则不为其声明类型。

// a.ts
export let a = "hhaha"
export let b = false
let c = [1,2]// 没有导出

tsc -d a.ts的到a.d.ts

export declare let a:string;
epoxrt declare let b:boolean;

import {Subscriber} from './Subscriber'
import {Subscription} from './Subscription'
import {PartialObserver,Subscribable,TeardownLogic} from './types'export class Observable<T> implements Subscribable<T>{public _isScalar:boolean = falseconstructor(subscribe?:(this:Observable<T>,Subscriber:Subscriber<T>)=>TeardownLogic){if(subscribe){this._subscribe = subscribe}}static create<T>(subscribe?:(subscriber:Subscriber<T>)=>TeardownLogic){return new Observable<T>(subscribe)}
}

当我们使用tsc -d 文件名编译上面的代码，得到类型声明.d.ts如下

import {Subscriber} from './Subscriber'
import {Subscription} from './Subscription'
import {PartialObserver,Subscribable,TeardownLogic} from './types'export declare class Observable<T> implements Subscribable<T>{//1.public _isScalar:booleanconstructor(subscribe?:(this:Observable<T>,Subscriber:Subscriber<T>)=>TeardownLogic);static create<T>(subscribe?:(subscriber:Subscriber<T>)=>TeardownLogic):Observable<T>// 2.
}

注意，class前面有个declare关键字。在类型声明中虽然不可以真正定义类，但是却可以声明.d.ts文件对应的JavaScript文件中定义了指定的类。declare可以理解为一种断言：我肯定，我写的JavaScrip代码中导出了这个类型的类
由于类型声明中不能有具体实现，所以这里只保留了声明，没有实现的签名

注意：.d.ts文件中是.ts文件去掉实现后剩下的内容，也就是说，.d.ts只有.ts文件里的类型

这个类型声明对其他文件而言没有用，因为其他文件可以直接访问.ts，而该文件自身就是Typescript源文件。如果你在自己的Typescript应用中使用，类型声明就有用了。

如果某个npm包的开发人员想打包信息，发布到npm中供Typescript使用，有两种选择：第一,打包源文件（Typescript使用）和编译得到的JavaScript文件（JavaScript使用）；第二种，提供编译后得到的JavaScript文件和供Typescript用户使用的类型声明。后一种方式所占的文件体积较小，而且十分明确。另外后一种还能减少编译应用所用的时间。

类型声明文件有以下作用：

其他人在他们的Typescript应用使用你提供的编译好的Typescript代码时，TSC会寻找与生成的JavaScript文件对应的.d.ts文件，让Typescript知道项目中涉及哪些类型。
支持Typescript的代码编辑器会读取.d.ts文件，在输入代码的过程中显示有用的提示
由于无需重新编译Typescript代码，能极大地减少编译时间。

类型声明的作用是告诉Typescript，“JavaScript文件中定义了这个，我来告诉你他的信息“类型声明描述的是外参环境，与包含值的常规声明要区分开，而常规的变量声明使用let或const关键字声明变量：

借助类型声明可以做到下面几件事：

告诉Typescript，JavaScript文件中定义了某个全局变量。假如你在浏览环境中通过脚本定义了Promise或process.env,或许应该使用外参变量声明让Typescript提前知道这一点。
定义在项目中任何地方都可以使用的全局类型，无须导入就能使用（这叫外参类型声明）
描述通过npm安装的第三方模块（外参模块声明）

类型声明，不管作何用途，始终放在脚本模式下的.ts或.d.ts文件中。按约定，如果有对应的.js文件，类型声明文件使用.d.ts扩展名；否则，使用.ts扩展名。

类型声明文件的名称没有具体要求，例如，存储在顶层目录中的types.ts，除非内容多到不可控，一个类型声明文件中可以有任意多个类型声明。

最后要注意一点：在类型声明文件中，顶层值要使用declare关键字（declare let，declare function，declare class等），而顶层类型和接口则不需要。

下面说明每种类型声明。

11.1.1 外参变量声明

外参变量声明让Typescript知道全局变量的存在，无须显式导入即可在项目中的任何.ts和.d.ts中使用。

假设你在浏览器中运行nodejs程序，某个时刻，该程序会检查process.env.NODE_ENV的值（为“development”或”production“）。运行这个程序。你会看到错误

可以自己定义process.env.NODE_ENV

process = {env:{NODE_ENV:'production'}
}
// 不报错但是有提示

declare let process:{env:{NODE_EMV:"development"|"production"}
}
process = {env:{NODE_ENV:'production'}
}

我们向Typescript声明，有个全局对象名为process，而且该对象有个属性，名为env，对属性名下有一个属性，名为NODE_ENV。告诉Typescript这些信息之后，报错提示就会消失，现在可以安全地定义全局对象process。

TSC设置：lib

Typescript自带一些类型声明，用于描述JavaScript标准库，包括JavaScript内置的类型，例如Array和Promise；例如window和document及onmessage（职程）

11.1.2 外参类型声明

// types.ts
type A = string
全局可用

11.1.3 外参模块声明

// types.ts
declare module "test-module" {export type name = stringlet test:nameexport default test
}

未完待续！！！！！