typescript中为js文件提供类型声明

案例：为JS文件提供类型声明

场景描述

假设我们有一个JavaScript文件 utils.js，其中包含一些实用工具函数和变量。为了在TypeScript中使用这些函数和变量并获得类型提示，我们可以使用 declare 关键词为它们提供类型声明。

1. 创建 JavaScript 文件：utils.js

// utils.js
const greeting = "Hello, World!";

function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

module.exports = {
    greeting,
    add,
    multiply,
};

2. 创建 TypeScript 声明文件：utils.d.ts

为了为 utils.js 文件提供类型声明，我们在同一目录下创建一个名为 utils.d.ts 的文件，内容如下：

// utils.d.ts

declare module "./utils" {
    export const greeting: string;
    export function add(a: number, b: number): number;
    export function multiply(a: number, b: number): number;
}

3. 在 TypeScript 文件中使用

现在，我们可以在一个 TypeScript 文件中导入 utils.js，并获得类型提示。

// main.ts
import { greeting, add, multiply } from "./utils";

console.log(greeting); // 输出: Hello, World!

const sum = add(5, 10);
console.log(`Sum: ${sum}`); // 输出: Sum: 15

const product = multiply(5, 10);
console.log(`Product: ${product}`); // 输出: Product: 50

4. 运行 TypeScript 代码

确保 TypeScript 编译器可以找到 utils.js 和 utils.d.ts，然后编译并运行 main.ts 文件。

tsc main.ts
node main.js

总结

通过使用 declare 关键词，我们能够为 JavaScript 文件中的变量和函数提供类型声明，从而在 TypeScript 中使用时获得类型提示和编译时检查。这种做法可以有效提升代码的可维护性和可读性。