Question

我有以下文件结构：

---utilities
-----index.ts
-----tools.ts
allfunctions.ts

在文件tools.ts中，我使用export const定义了我导出的部分功能。例如：

export const helloWorld = () => console.log('Hello World');

现在，在文件utilities/index.ts中，我导入了文件，并按如下方式导出：

import * as toolsFunction from './tools';

export { toolsFunction }

现在，在我的allfunctions.ts中，我正在使用helloWorld函数，如下所示：

import { taskFunctions as Utility } from './utilities/';

taskFunctions.helloWorld();

在编译代码之前，这很好用。在编译期间，我收到以下错误：

TypeError: Cannot read property 'helloWorld' of undefined

我做错了什么？

Answer 1

使用导入导入typescript中的内容时，这是语法

import * as myModule from './superModule'
myModule.doStuff()

或

import {doStuff} from './superModule'
doStuff()

或

import {doStuff as superFunction} from './superModule'
superFunction()

所以在这里，它因为 taskFunctions 不存在而中断，并且您应该使用实用程序调用helloWorld函数。试试：

import { toolsFunctions as Utility } from './utilities/';

Utility.helloWorld();

有关详细信息，您还可以查看https://www.typescriptlang.org/docs/handbook/modules.html

Answer 2

这是因为您没有使用正确的语法调用helloWorld()函数。您已将其导出为toolsFunction，但您要将其taskFunctions导入allfunctions.ts。您还需要根据新别名Utility调用该函数。所以你的代码应该如下所示

<强> tools.ts

export const helloWorld = () => console.log('Hello World');

<强> index.ts

import * as toolsFunction from './tools';

export { toolsFunction }

<强> allfunctions.ts

import {toolsFunction as Utility} from './utilities/'

export {Utility};

在app.component.ts中使用

import { Component } from '@angular/core';
import {Utility} from './allfunctions'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

  constructor(){
    Utility.helloWorld();
  }
}

工作演示：https://stackblitz.com/edit/angular4-zzhcu5

导出函数并将其导入其他文件

2 个答案: