简体   繁体   English

转换为Typescript后,模块没有默认导出

[英]Module has not default export after converting to Typescript

I have converted the JavaScript code to Typescript and getting the error 我已经将JavaScript代码转换为Typescript并收到错误

Module has no default export 模块没有默认导出

I have tried importing using the curly braces and exporting using module.exports but none of them worked. 我尝试使用花括号导入和使用module.exports导出,但它们均无效。

contactController.ts contactController.ts

const contacts: String[] = [];

// Handle index actions
exports.index = (req: any, res: any) => {
    res.json({
        data: contacts,
        message: "Contacts retrieved successfully",
        status: "success"
    });
};

// Handle create contact actions
exports.new = (req: any, res: any) => {

     // save the contact and check for errors
    contacts.push("Pyramids");

    res.json({
            data: contact,
            message: "New contact created!"
        });
};

api-route.ts API-route.ts

import contactController from "./contactController";

In the api-routes.ts, when I am trying to import the contactController module it is throwing the error 在api-routes.ts中,当我尝试导入contactController模块时,它将引发错误

Module has no default export 模块没有默认导出

How can I import without the error? 如何导入而不会出现错误? I have tried using "import {contactController} from "./contactController" but that did not work as well. 我尝试使用“ ./contactController”中的“ import {contactController}”,但效果不佳。

You need to change the way you export to: 您需要将导出方式更改为:

const contacts: String[] = [];

// Handle index actions
const index = (req: any, res: any) => {
    res.json({
        data: contacts,
        message: "Contacts retrieved successfully",
        status: "success"
    });
};

// Handle create contact actions
const newContact = (req: any, res: any) => {

     // save the contact and check for errors
    contacts.push("Pyramids");

    res.json({
            data: contact,
            message: "New contact created!"
        });
};

export default {index, newContact};

Then you should be able to import then like so 然后,您应该可以像这样导入

import routes from './contactController';

Documentation (see the "Export" and "Import" sections): Typescript Modules Documentation . 文档(请参阅“导出”和“导入”部分): Typescript模块文档

To complete Vasil's answer: 要完成Vasil的答案:

When you import a module this way: 当您以这种方式导入模块时:

// <some_file>.ts
import <whatever_name_I_want> from "<path_to_my_awesome_module>";

<my_awesome_module>.ts needs to have a default export . <my_awesome_module>.ts需要具有默认导出 For example, this can be done this way: 例如,可以通过以下方式完成此操作:

// <my_awesome_module>.ts
export default foo = () => { // notice the 'default' keyword
  // ...
};

export bar = () => {
  // ...
};

With the code above, <whatever_name_I_want> will be the foo method (a module can only have 1 default export). 使用上面的代码, <whatever_name_I_want>将是foo方法(一个模块只能有1个默认导出)。 In order to import the bar method as well, you will have to import it seperately: 为了同时导入bar方法,您将必须分别导入它:

// <some_file>.ts
import <whatever_name_I_want>, { bar } from "<path_to_my_awesome_module>";

But according to what you're trying to do, there is probably no need to use a default export. 但是根据您要执行的操作,可能不需要使用默认导出。 You could simply export all your methods with the export keyword, like this: 您可以使用export关键字简单地导出所有方法,如下所示:

// contactController.ts
export index = (req: any, res: any) => { // no need for a default export
  // ...
};

export create = (req: any, res: any) => {
  // ...
};

and import them both either in brackets: 并将它们都导入到方括号中:

// api-routes.ts
import { index, create } from "./contactController";

// Usage
index(...);
create(...);

or in a global variable: 或在全局变量中:

// api-routes.ts
import * as contactController from "./contactController";

// Usage
contactController.index(...);
contactController.create(...);

PS: I renamed your new method in create because "new" is already a JavaScript keyword. PS:我在create重命名了您的new方法,因为“ new”已经是一个JavaScript关键字。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM