javascript - 为什么这个 Typescript 导出未定义？

Question

我正在尝试使用 Typescript 和 React 制作 NPM 包。 (多伦多证券交易所)

我正在关注this blog post ，但尝试制作多个组件而不是一个组件。

当我尝试像这样导入我的模块时

import { HelloWorld } from 'tsx_lib'

它显示为未定义

console.log(HelloWorld) //undefined

我的文件夹结构如下所示

src /
   GoodbyeWorld.tsx
   HelloWorld.tsx
   index.ts
index.d.ts

这是文件

再见世界.tsx

import * as React from 'react';
import { GoodbyeWorldProps } from '../index';

export default class GoodbyeWorld extends React.Component<any, any> {
  render() {
    return <div style={{ color: this.props.color }}>Goodbye world!</div>;
  }
}

HelloWorld.tsx

import * as React from 'react';
import { HelloWorldProps } from '../index';

export default class HelloWorld extends React.Component<any, any> {
  render() {
    return <div style={{ color: this.props.color }}>Hello world!</div>;
  }
}

index.ts

export * from './HelloWorld';
export * from './GoodbyeWorld';

index.d.ts

import * as React from 'react';

export interface HelloWorldProps extends React.Props<HelloWorld> {
  color: string;
}

export interface GoodbyeWorldProps extends React.Props<HelloWorld> {
  color: string;
}

declare module 'hello-world' {

}

declare module 'goodbye-world' {

}

export class HelloWorld extends React.Component<HelloWorldProps, any> {}
export class GoodbyeWorld extends React.Component<HelloWorldProps, any> {}

我做错了什么？

Answer 1

HelloWorld.tsx 中的 export default class HelloWorld 是默认导出。

export * from './HelloWorld' 将不会通过默认导出。

您有两个选择:

1. 从 HelloWorld.tsx 导出命名

export class HelloWorld extends Component { 
...

将默认导出映射到命名导出

export { default as HelloWorld } from './HelloWorld'