ts 如何调用js

TS调用JS的方式有多种，如通过直接引用、使用declare关键字、依赖TypeScript定义文件等方法。以下将详细介绍如何调用JS中的代码。

TypeScript（TS）和JavaScript（JS）共享相同的运行时环境，因此TS可以直接调用JS代码。具体方法包括直接引用JS文件、使用declare关键字、依赖TypeScript定义文件（.d.ts）。使用declare关键字是最常见的方式之一，通过它可以在TS中声明JS模块的类型，从而保证代码的类型安全。

一、直接引用JS文件

在TS项目中，可以直接引用JS文件。假设我们有一个名为utils.js的文件，包含以下内容：

// utils.js
function greet(name) {
    return `Hello, ${name}!`;
}

我们可以在TS文件中直接引用并使用这个JS文件：

// main.ts
import './utils.js';
const message = greet('World');
console.log(message);  // Output: Hello, World!

这种方法简单直接，但是缺乏类型检查。

二、使用declare关键字

为了在TS中调用JS函数并保持类型安全，可以使用declare关键字来声明JS模块的类型。以下是一个示例：

首先，我们有一个math.js文件：

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

然后，我们在TS文件中声明这些函数的类型：

// math.d.ts
declare module "math" {
    export function add(a: number, b: number): number;
    export function subtract(a: number, b: number): number;
}

接着，我们可以在TS文件中安全地调用这些JS函数：

// main.ts
import { add, subtract } from 'math';
const sum = add(10, 5);
const difference = subtract(10, 5);
console.log(`Sum: ${sum}`);           // Output: Sum: 15
console.log(`Difference: ${difference}`); // Output: Difference: 5

三、依赖TypeScript定义文件（.d.ts）

为了更好地与第三方库集成，可以使用TypeScript定义文件（.d.ts）。许多流行的JS库已经提供了相应的TypeScript定义文件，使得TS可以直接调用这些库的函数。

例如，使用lodash库：

首先，安装lodash及其TypeScript定义文件：

npm install lodash @types/lodash

然后，在TS文件中调用lodash函数：

// main.ts
import * as _ from 'lodash';
const array = [1, 2, 3, 4, 5];
const reversedArray = _.reverse(array.slice());
console.log(reversedArray);  // Output: [5, 4, 3, 2, 1]

四、总结

通过以上方法，TS能够有效调用JS代码，并保持类型安全。直接引用JS文件简单直接，但缺乏类型检查；使用declare关键字可以在TS中声明JS模块的类型，从而保证代码的类型安全；依赖TypeScript定义文件可以更好地与第三方库集成。这三种方法各有优劣，开发者可以根据具体需求选择合适的方式。

ts 如何调用js

一、直接引用JS文件

二、使用declare关键字

三、依赖TypeScript定义文件（.d.ts）

四、总结

相关问答FAQs：