javascript - 从 typescript 使用内部 javascript 文件

Question

我的项目中有一个 js 文件，我需要从 ts 文件中使用它。

js文件路径为“javascript/jsToConsume.js”。

ts文件路径为“typescript/client.ts”

我在“typings/internal/jsToConsume.d.ts”路径下添加了声明文件，其内容如下:

declare namespace jsToConsume{
    export function func1(): void;
}

在我的 client.ts 中，我尝试使用它:

///<reference path="../typings/internal/jsToConsume.d.ts" />

import * as jsToConsume from '../javascript/jsToConsume'

但是 '../javascript/jsToConsume' 被标记为红线，我得到以下错误:

TS2307: Cannot find module '../javascript/jsToConsume'

顺便说一句，代码运行完美，只是一个 TSC 错误。

javascript/jsToConsume.js:

function func1(){
    return "Hello World";
}
exports.func1 = func1;

任何帮助将不胜感激!

Answer 1

如果您在 tsconfig.json 中将 --allowJs 标志作为 true 传递，它会告诉 TypeScript 编译器将 JavaScript 文件编译为出色地。因此，将此标志设置为 true 后，TypeScript 将了解您在 JavaScript 文件中定义的模块，并且您无需对声明文件进行任何额外的欺骗。

因此，示例 tsconfig.json 文件可能如下所示:

{
  "compilerOptions": {
    "allowJs": true
    "module": "commonjs",
    "noImplicitAny": true,
    "target": "es6"
  },
  "exclude": [
    "node_modules"
  ]
}

( https://www.typescriptlang.org/docs/handbook/compiler-options.html )

当然，配置文件将完全取决于您的项目，但您只需添加 "allowJS": true 作为您的 "compilerOptions" 之一。

注意:从 TypeScript 1.8 开始可用

相关的发行说明在这里:

https://www.typescriptlang.org/docs/release-notes/typescript-1.8.html#including-js-files-with---allowjs

-- 编辑 --

为了回应关于要求类型以及您的内部 JS 导入的评论，我提出了以下建议。然而，如果要为你的 JavaScript 模块添加类型这么麻烦，我只建议将文件转换为 TypeScript 并以最低限度输入所有导出(事实上，回顾这次编辑，这似乎真的没有必要，除非无论出于何种原因，绝对不可能将您的 JS 转换为 TS)。但无论如何...

您仍然可以在 tsconfig.json 中传递 "allowJs": true，但您可以为所需的 JavaScript 模块创建接口(interface)，然后在您的文件中键入导入TS 文件。下面举个例子，把JS文件和TS文件更充实一点，展示一下可能性:

文件夹结构

src
| - javascript
| | - jsToConsume.js
| - typescript
| | - client.ts
typings
| - typings.d.ts
tsconfig.json

jsToConsume.js

export const yourHair = (adjective) => {
    return `Your hair is ${adjective}`;
}

export let jam = 'sweet';

export class AnotherClass {
    constructor() {
        this.foo = 'bar';
    }
}

export default class Hungry {
    constructor() {
        this.hungry = true;
    }

    speak() {
        return 'More cake please';
    }
}

typings.d.ts

declare interface jsToConsumeModule {
    yourHair: (adjective: string) => string;
    jam: string;
    AnotherClass: AnotherClassConstructor;
}
declare interface Hungry {
    hungry: boolean;
    speak: () => string;
}
declare interface HungryConstructor {
    new (): Hungry;
}
declare interface AnotherClass {
    foo: string;
}
declare interface AnotherClassConstructor {
    new (): AnotherClass;
}

client.ts

import { yourHair as _yourHair_ } from './../javascript/jsToConsume';
const yourHair: (adjective: string) => string = _yourHair_;

import * as _jsToConsume_ from './../javascript/jsToConsume';
const jsToConsume: jsToConsumeModule = _jsToConsume_;

import _Hungry_ from './../javascript/jsToConsume';
const Hungry: HungryConstructor = _Hungry_;

因此，当从模块中导入单个成员和默认值时，只需为每个成员指定所需的类型即可。然后，您可以在使用 import * as ... 时为模块的公共(public)导出提供接口(interface)。

注意但是你必须有一个很好的理由为什么你不想只将你的 JS 文件更改为 TS。想一想你想要文件的类型，并且你可以控制它们，因为它们在你的项目内部，所以这听起来像是 TS 存在的确切用例。您无法控制外部模块，因此您构建声明文件以创建用于与库交互的接口(interface)。如果您决定向 JavaScript 添加类型，那么您可以通过将其制作为 TypeScript 来实现。