Question

我正在我的项目和早期项目中尝试打字稿，如果我有一个React组件，那么我将把我的项目结构设置为：

componentDir/
    Component.js
    index.js

我的index.js所包含的内容为：

import Component from './Component';

export default Component;

我会在以下任何地方使用此组件（或带有index文件的任何模块）：

import Component from './componentDir';

如何使用TypeScript实现类似的功能？

Answer 1

您可以使用webpack来做到这一点。

如果设置成功，则可以执行以下操作：

项目：

|- /components/
   footerComponent.ts
|- index.ts
|- tsconfig.json
|- webpack.config.js

声明组件：

import React from 'react';

export class FooterComponent  extends React.Component {
   constructor(props){
      super(props);
   }
}

导入：

import FooterComponent './components/footerComponent'

tsconfig：

{
   "compilerOptions": {
   "outDir": "./dist/",
   "sourceMap": true,
   "strictNullChecks": true,
   "module": "es6",
   "jsx": "react",
   "target": "es5",
   "allowJs": true
},
"awesomeTypescriptLoaderOptions": {
  "useBabel": true,
  "useCache": true
},
"include": [
  "../src/**/*",
  "./global.d.ts"
 ]
}

祝你有美好的一天。

如何使用index.ts使模块可发现？

1 个答案: