TypeScript 中如何在 .js 文件中引入 .ts 文件？-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是一种由 Microsoft 开发的静态类型语言，它可以编译成 JavaScript 代码。在开发过程中，我们可能会遇到需要在 .js 文件中引入 .ts 文件的情况。本文将介绍如何在 TypeScript 中实现这一功能。

为什么需要在 .js 文件中引入 .ts 文件？

通常情况下，我们在开发过程中都会使用 TypeScript 来编写代码。但是，有些情况下我们需要在已有的 JavaScript 代码中引入 TypeScript 文件，这时就需要使用到 TypeScript 的编译器。

在 .js 文件中引入 .ts 文件的步骤

要在 .js 文件中引入 .ts 文件，需要经过以下步骤：

在 TypeScript 项目中创建一个 .d.ts 文件，用于定义 TypeScript 文件中的类型和接口。

// types.d.ts
declare module 'example' {
  export interface Example {
    name: string;
    age: number;
  }
}

在 TypeScript 项目中创建一个 .ts 文件，用于导出需要在 .js 文件中使用的类型和接口。

// example.ts
export interface Example {
  name: string;
  age: number;
}

将 TypeScript 项目编译成 JavaScript 代码。

tsc

在 .js 文件中引入 .ts 文件。

// example.js
const { Example } = require('./example');
console.log(new Example('John', 30));

示例代码

以下是一个简单的示例代码，演示了如何在 .js 文件中引入 .ts 文件。

types.d.ts

declare module 'example' {
  export interface Example {
    name: string;
    age: number;
  }
}

example.ts

export interface Example {
  name: string;
  age: number;
}

example.js

const { Example } = require('./example');
console.log(new Example('John', 30));

编译 TypeScript 项目

tsc

运行示例代码

node example.js

输出结果：

Example { name: 'John', age: 30 }

总结

在 TypeScript 中引入 .ts 文件可以通过编写一个 .d.ts 文件来定义类型和接口，然后将 TypeScript 项目编译成 JavaScript 代码。在 .js 文件中引入 .ts 文件时，需要使用 require() 方法来引入 TypeScript 文件中导出的类型和接口。这种方法可以帮助我们在现有的 JavaScript 项目中逐步引入 TypeScript，提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/655430ead2f5e1655dde1ac1

TypeScript 中如何在 .js 文件中引入 .ts 文件？