Typescript：如何从 javascript 文件中导入类？

Posted 2023-03-13

【中文标题】Typescript：如何从 javascript 文件中导入类？

【英文标题】：Typescript: how to import a class from a javascript file?

【发布时间】：2017-03-20 16:39:17

【问题描述】：

我想：

导入一个定义类的js文件：./myClass/index.js 在某处声明MyClass的公共方法（在index.ts或指定的声明文件中，我真的不知道怎么做） 有一个公开类的打字稿文件：index.ts

类似

// index.ts
import MyClass from './myClass' // or require, or anything that would work
export MyClass

和

// myClass/index.js
export default class MyClass 
  ...

这显然不起作用，因为./myClass/index 的导入找不到模块。

问题是，我尝试基于this example创建一个./myClass/index.d.ts文件，但无论如何，我仍然有一个错误：找不到模块'./myClass/index.js' 运行时出错:(

我觉得我在这里错过了一些打字稿基础知识，但我正在努力寻找一些清晰的资源。

有什么想法吗？

【参考方案1】：

javascript 中没有 export default class。你可以做的是像这样编写你的JS文件。 myClass/index.js

"use strict";
class MyClass 
  hello(name) 
    console.log(`Hello $name`);
  


exports.default = MyClass;

为它创建一个类型定义。 myClass/index.d.ts

export default class MyClass 
  hello(name: string): void;

然后你可以像这样将它导入到你的 TypeScript 中。

/// <reference path="./myClass/index.d.ts" />
import MyClass from "./myClass";

const my = new MyClass();
my.hello("Stack Overflow");

【讨论】：

不敢相信就是这么简单的 0_o。非常感谢！

@goenning 为什么说没有导出默认类？ developer.mozilla.org/en-US/docs/web/javascript/reference/… 。我认为这种说法可能会让人们感到困惑

【参考方案2】：

在您的 javascript 文件的末尾， 写这个

exports.MyClass = MyClass;

在 ts 文件中

import * as  IzendaSynergy  from './izenda/izenda_ui.js';

或

import  IzendaSynergy  from './izenda/izenda_ui.js';

在 tsconfig.json 文件中

  "allowJs": true

【讨论】：

allowJs 对我来说是关键。谢谢！

我我不使用exports.MyClass = MyClass，而是使用“allowJs”导出默认类MyClass：true