TypeScript教程(八)– 与JavaScript集成

本文我们将学习TypeScript项目与JavaScript的集成,介绍如何使用JSDoc对JavaScript代码进行类型检测,如何使用类型声明文件,以及使用DefinitelyTyped库声明文件等。


TypeScript项目包含JavaScript代码

有时候我们需要与JavaScript一些协同工作。

看例子。

添加JavaScript文件tax.js,并添加代码。

export function calculateTax(income){

    return income * .3;

}

再在TypeScript的文件 index.ts 中调用它。

import { calculateTax } from “./tax”

let tax = calculateTax(1000);

console.log(tax)

我们发现是有错误的,提示没有该模块,我们需要修改tsconfig.json。

“allowJs”: true,

同时还要将模块格式调回 CommonJS。


JavaScript代码的类型检查

前面的例子,我们调用JavaScript的calculateTax,如果不提供参数,编译器也没有提示错误。默认情况下不检查JavaScript的。

修改tsconfig.json

“checkJs”: true,

开启该选项,会对JavaScript有个基本的检查,当然没有TypeScript的检查这么全面,但也可以了。

我们得到 calculateTax函数的警告,说它的参数 income 是隐藏的 any类型,any类型检查是我们之前开启的。

目前我们有两个选择。

一是向TypeScript编译器说明类型信息,这样在调用时会要求该JavaScript函数传递有效的参数,具体下一节介绍。

二是告诉TypeScript编译器保持安静。我们在tax.js的项部,添加注释。

// @ts-nocheck

这样,calculateTax就不报错了。

但我们在调用calculateTax时不传参数,输出结果是NaN,并没有报错。这是因为 calculate 的 参数 income是any类型,不传参数的话类型就为undefined,所以是这个结果。


使用JSDoc描述类型

我们来描述JavaScript的类型,进入tax.js文件,键入 

/**

vscode提示这个是JSDoc注释,键入回车,生成JSDoc框架,我们填充完整,设置参数为number(param后面),返回number(returns 后面)。并设置函数说明(第1行)及参数说明(参数行)。

再到index.ts,鼠标悬停到calcurateTax处,能看到我们刚设置的JSDoc的类型信息。

现在我们如果直接用空参数调用calcurateTax时,就有出错提示,要求提供number类型的参数。


创建声明文件

有时我们不想在JavaScript文件上写注释,可以用声明文件。

我们来看看如何做。

创建文件tax.d.ts,注意名字必须与JavaScript文件同名即tax,扩展名中的d是declaration的缩写。tax.d.ts有点类似C语言中的头文件,用declare关键字声明,每一行声明用分号( ; )结尾,并在前面加上export。

export declare function calculateTax(income: number): number;

声明之后,TypeScript编译器就知道声明的JavaScript函数的类型,当然该函数的实际实现在另外地方,这里就是tax.js。

使用声明文件这种方式,我们需要为模块里的所有东西进行声明,不声明的话外部是不可见的。

我们在tax.js文件添加sayHello函数,同时也必须在声明文件tax.d.ts中声明,否则外部就无法使用。


使用DefinitelyTyped声明文件

我们的TypeScript项目经常要使用到第三方的JavaScript库。比如流行的lodash库。

安装。

npm i lodash

在index.ts中,引入 lodash。

import * as _ from “lodash”

编译器给出错误警示,因为lodash是一个纯的JavaScript库,没有JSDoc的注释,也没有声明文件。

可以使用一个非常流行的Github库,叫DefinitelyTyped。

https://github.com/DefinitelyTyped/DefinitelyTyped

该库定义了流行的JavaScript库的声明文件,我们安装下。

npm i –save-dev @types/lodash

该库用@types/开头,后面是具体的JavaScript库,这里是lodash库。另外我也添加选项 –save-dev 表示只在开发过程中依赖该库,因为只在编译时使用,正式部署时用不到。–save-dev 也可简写为一个大写的 -D。

npm i -D @types/lodash

安装完成后,警告就消失了。使用时也非常友好地给出了类型提示。

随着TypeScript越来越流行,现在很多JavaScript库都自带了声明文件,这种库也就不用再安装DefinitelyTyped的相应声明了。

看一个例子。

安装 chalk。

npm i chalk

再看项目文件,在node_modules文件夹的chalk库能看到它自带了声明文件。


小结

本文介绍了TypeScript项目与JavaScript集成的相关知识。

下一篇介绍如何在React中使用TypeScript。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注