為什么這個 Typescript 導出未定義？

Question

我正在嘗試使用 Typescript 和 React 制作 NPM package。 (多倫多證券交易所)

我正在關注這篇博文，但試圖制作多個組件而不僅僅是一個。

當我嘗試像這樣導入我的模塊時

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>;
  }
}

索引.ts

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

索引.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

export default class HelloWorld中的HelloWorld.tsx是默認導出。

export * from './HelloWorld'不會通過默認導出。

你有兩個選擇：

1. 從HelloWorld.tsx命名的導出

export class HelloWorld extends Component { 
...

2. map 默認導出到命名導出

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