ts 怎么引用js

TS如何引用JS：使用declare关键字、配置tsconfig、使用第三方声明文件

在TypeScript（TS）中引用JavaScript（JS）可以通过多种方式实现，其中最常见的方法包括：使用declare关键字、配置tsconfig、使用第三方声明文件。下面将详细展开其中一种方法，即使用declare关键字。

使用declare关键字可以在TS中声明一个JS模块或变量，从而避免类型检查错误。例如，如果我们有一个名为utils.js的文件，包含一个名为add的函数，我们可以在TS文件中使用declare关键字来声明这个函数：

// utils.js

function add(a, b) {
  return a + b;
}
module.exports = { add };
// index.ts
declare function add(a: number, b: number): number;
import { add } from './utils.js';
const result = add(2, 3);
console.log(result); // 5

这只是其中一种方法，以下将详细介绍其他方法及其具体实现步骤。

一、使用declare关键字

1. 声明全局变量

在TS文件中，可以使用declare关键字来声明全局变量。这种方法适用于简单的JS模块。

// utils.js

function subtract(a, b) {
  return a - b;
}
window.subtract = subtract;
// index.ts
declare function subtract(a: number, b: number): number;
const result = subtract(5, 2);
console.log(result); // 3

2. 声明模块

如果JS模块使用了模块化系统（如CommonJS或ES6 Modules），可以在TS中使用declare module来声明模块。

// math.js

function multiply(a, b) {
  return a * b;
}
module.exports = { multiply };
// index.ts
declare module './math' {
  export function multiply(a: number, b: number): number;
}
import { multiply } from './math';
const result = multiply(3, 4);
console.log(result); // 12

二、配置tsconfig

1. 使用allowJs选项

在tsconfig.json中，启用allowJs选项可以允许TS编译器处理JS文件。

{

  "compilerOptions": {
    "allowJs": true,
    "outDir": "./dist"
  },
  "include": ["./src//*"]
}

启用allowJs后，可以直接在TS文件中引用JS文件。

// utils.js

function divide(a, b) {
  return a / b;
}
module.exports = { divide };
// index.ts
import { divide } from './utils.js';
const result = divide(10, 2);
console.log(result); // 5

2. 使用checkJs选项

启用checkJs选项可以对JS文件进行类型检查，这对于大型项目中的错误检测非常有用。

{

  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "outDir": "./dist"
  },
  "include": ["./src//*"]
}

三、使用第三方声明文件

1. 安装类型声明文件

对于流行的JS库，通常可以找到对应的类型声明文件，通常以@types开头。例如，对于lodash库，可以使用以下命令安装类型声明文件：

npm install --save-dev @types/lodash

2. 使用类型声明文件

安装类型声明文件后，可以直接在TS文件中使用该库，而无需显式声明类型。

import * as _ from 'lodash';

const array = [1, 2, 3, 4];
const reversedArray = _.reverse(array.slice());
console.log(reversedArray); // [4, 3, 2, 1]

四、实际应用中的注意事项

1. 确保类型安全

在引用JS代码时，确保类型声明的准确性非常重要，以避免潜在的类型错误。在项目中，如果有不确定的类型，可以使用any类型，但应尽量避免。

// utils.js

function concatStrings(a, b) {
  return a + b;
}
module.exports = { concatStrings };
// index.ts
declare module './utils' {
  export function concatStrings(a: string, b: string): string;
}
import { concatStrings } from './utils';
const result = concatStrings('Hello', ' World');
console.log(result); // Hello World

2. 使用严格模式

启用TS的严格模式可以提高代码的可靠性和可维护性。可以在tsconfig.json中启用严格模式：

{

  "compilerOptions": {
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["./src//*"]
}

严格模式下，TS编译器会进行更严格的类型检查，有助于发现潜在的问题。

3. 利用项目管理系统

在大型项目中，管理和协作变得尤为重要。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高团队协作效率。PingCode提供了强大的研发管理功能，适合技术团队使用；而Worktile则适用于各种团队的项目协作需求。

4. 结合单元测试

在引用JS模块时，编写单元测试可以确保模块的正确性。可以使用Jest或Mocha等测试框架来编写和运行测试。

// utils.js

function square(a) {
  return a * a;
}
module.exports = { square };
// index.ts
declare module './utils' {
  export function square(a: number): number;
}
import { square } from './utils';
const result = square(5);
console.log(result); // 25
// index.test.ts
import { square } from './utils';
test('square function', () => {
  expect(square(5)).toBe(25);
});

五、总结

在TS中引用JS有多种方法，包括使用declare关键字、配置tsconfig、使用第三方声明文件等。每种方法都有其适用场景和优缺点。在实际应用中，确保类型安全、启用严格模式、利用项目管理系统以及结合单元测试可以提高代码的可靠性和可维护性。通过合理选择和组合这些方法，可以有效地在TS项目中引用和使用JS代码，从而充分利用两者的优势，提高开发效率和代码质量。

相关问答FAQs：

1. 如何在 TypeScript 中引用 JavaScript 文件？

• 问题：我想在 TypeScript 中使用一个 JavaScript 文件，应该如何引用它？

• 回答：在 TypeScript 中引用 JavaScript 文件非常简单。首先，确保你已经将 JavaScript 文件添加到你的项目中。然后，在 TypeScript 文件中使用以下语法来引用它：

import * as myModule from './path/to/myModule.js';

这将把 JavaScript 文件中的内容导入到一个 TypeScript 模块中，你可以通过 myModule 来访问其中的函数、变量等。

2. TypeScript 中如何使用外部 JavaScript 库？

• 问题：我想在 TypeScript 中使用一个外部的 JavaScript 库，应该如何引用它？

• 回答：使用外部 JavaScript 库的步骤与引用 JavaScript 文件类似。首先，确保你已经将 JavaScript 库添加到你的项目中，并按照其文档提供的方式引入它。然后，在 TypeScript 文件中使用以下语法来引用它：

import * as myLibrary from 'myLibrary';

这将把 JavaScript 库中的内容导入到一个 TypeScript 模块中，你可以通过 myLibrary 来访问其中的函数、变量等。

3. 如何在 TypeScript 中使用已经存在的 JavaScript 代码？

• 问题：我已经有一个现有的 JavaScript 代码，想要在 TypeScript 中使用它，应该如何操作？

• 回答：如果你已经有一个现有的 JavaScript 代码，并且想在 TypeScript 中使用它，可以将该代码文件重命名为 .ts 后缀，然后在 TypeScript 文件中直接引用它。这样，TypeScript 编译器会将该文件视为 TypeScript 代码，并且你可以在其中使用 TypeScript 的特性。如果你不想修改文件后缀，也可以在 TypeScript 文件中使用以下语法来引用 JavaScript 文件：

declare const myModule: any;
import './path/to/myModule.js';

这将告诉 TypeScript 编译器该 JavaScript 文件已经存在，并且你可以通过 myModule 来访问其中的内容。