ts里面怎么引入js

在TypeScript中引入JavaScript的方法

在TypeScript项目中引入JavaScript文件有几种常见方法：通过配置tsconfig.json、使用import语法、声明文件（.d.ts）。其中，通过配置tsconfig.json文件是最常见的一种方式。

一、配置 `tsconfig.json`

配置 allowJs 属性：在 tsconfig.json 文件中，将 allowJs 属性设为 true，以允许 TypeScript 项目中包含 JavaScript 文件。
```
{
  "compilerOptions": {
    "allowJs": true,
    "outDir": "./dist"
  },
  "include": ["src//*"]
}
```

配置 checkJs 属性：如果希望 TypeScript 对 JavaScript 文件进行类型检查，可以将 checkJs 属性设为 true。

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

二、使用 `import` 语法

当 tsconfig.json 配置完成后，可以使用标准的 import 语法来引入 JavaScript 文件：

import { someFunction } from './someJavaScriptFile.js';
someFunction();

三、声明文件（.d.ts）

如果你想在 TypeScript 中使用 JavaScript 文件中的模块，并且希望 TypeScript 能够识别这些模块的类型，可以创建声明文件（.d.ts）。

创建声明文件：在项目中创建一个 .d.ts 文件，用于声明 JavaScript 模块的类型。

// someJavaScriptFile.d.ts
declare module 'someJavaScriptFile' {
    export function someFunction(): void;
}

引入 JavaScript 文件：在 TypeScript 文件中引入 JavaScript 文件。
```
import { someFunction } from 'someJavaScriptFile';
someFunction();
```

四、实例讲解

1. 配置 `tsconfig.json`

首先，创建一个 TypeScript 项目，并初始化 tsconfig.json 文件：

tsc --init

编辑 tsconfig.json 文件，使其包含以下配置：

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

2. 创建 TypeScript 和 JavaScript 文件

在项目的 src 目录下创建一个 TypeScript 文件 main.ts 和一个 JavaScript 文件 utility.js。

utility.js 文件内容如下：

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

main.ts 文件内容如下：

// main.ts
import { greet } from './utility.js';
const message = greet('World');
console.log(message);

3. 编译和运行

在终端中运行以下命令，编译 TypeScript 文件：

tsc

编译完成后，在 dist 目录下会生成相应的 JavaScript 文件。运行生成的 main.js 文件：

node dist/main.js

终端会输出：

Hello, World!

五、使用声明文件

如果 utility.js 文件比较复杂，或者你希望 TypeScript 能够识别更多的类型信息，可以创建一个声明文件 utility.d.ts。

utility.d.ts 文件内容如下：

// utility.d.ts
declare module './utility' {
    export function greet(name: string): string;
}

然后在 main.ts 文件中引入 utility.js，TypeScript 将能够识别 greet 函数的类型信息。

// main.ts
import { greet } from './utility.js';
const message: string = greet('TypeScript');
console.log(message);

六、项目团队管理系统推荐

在开发过程中，使用项目团队管理系统可以大大提高开发效率。推荐使用以下两个系统：

研发项目管理系统PingCode：PingCode 是一个专业的研发项目管理系统，提供了全面的项目管理功能，适合各类研发团队使用。
通用项目协作软件Worktile：Worktile 是一个通用项目协作软件，支持团队协作和任务管理，适用于不同类型的团队和项目。

结论

在 TypeScript 项目中引入 JavaScript 文件可以通过配置 tsconfig.json 文件、使用 import 语法、以及创建声明文件等方式实现。通过合理的配置和使用，可以充分利用 TypeScript 的类型检查和 JavaScript 的灵活性，提高项目的开发效率和代码质量。

希望这篇文章能帮助你更好地在 TypeScript 项目中引入和使用 JavaScript 文件。如果你有任何疑问或建议，欢迎在评论区留言。