您的位置:首页 > 百科大全 |

在TypeScript项目中包含JS代码

如果我们在typescript项目中添加一个js文件,就会遇到错误。在这个 JS 文件中,我们不能使用任何typescript特性,所以我们不能注释函数的参数。如果我们将JS文件导入到TS文件中,则会出现编译错误,因为默认情况下JS代码不包含在编译过程中。要解决这个问题,我们必须转到tsconfig代码,在Javascript支持部分,我们必须打开“allowJs”:true

/* JavaScript Support */    "allowJs": true, 

类型检查 JS 代码
默认情况下使用JS代码,我们不会进行任何类型检查。例如,我们可以在不提供参数的情况下调用一个函数,直到运行时我们才会知道问题。所以我们必须编译并运行我们的程序才能看到类似 NaN 的结果。
我们可以回到tsconfig.json并打开“checkJs”:true
现在我们进行一些基本的类型检查。它不完整但聊胜于无
js 文件:

export  function getNumber(num){    return num*10}

文件:

import { getNumber } from "./myFanc";const myNumber = getNumber(2);console.log(myNumber);

在 powershell(或命令提示符)中:

Image description

启用此设置后,我们将在Js文件中遇到错误。
为了解决这个问题,我们有3个解决方案:

修复 JavaScript 文件错误

1. 忽略类型检查我们可以通过在 JavaScript 文件上应用一次// @ts-nocheck
来选择逐个文件地关闭编译器错误。

2. 使用 JSDoc
描述类型我们的Js代码描述类型信息的一种方法是使用 JSDoc,它是一种特殊类型的注释。
通过使用JSDoc,我们可以向打字稿编译器提供类型信息,并且我们可以解释我们的代码。例如:

/** * Multiply the number by ten  * @param {number} num - value after calculation * @returns {number} - return value */export  function getNumber(num){    return num*10}

3. 创建声明文件
另一种提供类型信息的方法是对类型定义文件使用Decoration。我们创建一个名为‘same name as Js file’.d.ts的新文件。在这个文件中,我们声明了目标模块的所有功能。类型定义文件类似于 C 中的头文件。

myfunc.d.ts

export declare function getNumber(num: number): number;

使用绝对类型声明文件
我们不需要为第三方JavaScript库创建类型定义文件。我们可以使用Definitely Typed GitHub存储库 (@types/) 中的类型定义文件。