1. TypeScript + React 项目搭建
1.1 初始化工程目录
$ mkdir tsx-jsx && cd tsx-jsx && npm init --f
1.2 安装依赖
1.2.1 全局依赖
$ npm i -g webpack-cli
1.2.2 dependencies
$ npm i -S react react-dom @types/react @types/react-dom
1.2.3 devDependencies
$ npm i -D typescript awesome-typescript-loader babel-loader babel-core babel-preset-react babel-preset-es2015 babel-preset-stage-0
2. 文件结构
2.1 目录
tsx-jsx
├─ .babelrc
├─ index.html
├─ package.json
├─ src
│ ├─ components
│ │ ├─ jsx-comp
│ │ │ ├─ index.d.ts
│ │ │ └─ index.jsx
│ │ ├─ tsx-comp
│ │ │ └─ index.tsx
│ └─ index.tsx
├─ tsconfig.json
└─ webpack.config.js
2.2 配置文件
2.2.1 ./.babelrc
{
"presets": [
"es2015",
"react",
"stage-0"
]
}
2.2.2 ./tsconfig.json
{
"compilerOptions": {
"module": "es6",
"target": "es5",
"jsx": "react",
"moduleResolution": "node"
},
"include": [
"./src/**/*"
]
}
2.2.3 ./webpack.config.js
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "index.js",
path: __dirname + "/dist"
},
resolve: {
extensions: [".ts", ".tsx", ".js", "jsx"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{ test: /\.jsx?$/, loader: 'babel-loader' }
]
},
};
2.3 代码文件
2.3.1 ./src/index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { JsxComp } from './components/jsx-comp/index.jsx';
import TsxComp from './components/tsx-comp/index';
ReactDOM.render(
<div>
<JsxComp />
<TsxComp />
</div>,
document.getElementById("page")
);
注：
（1）在引用.tsx文件的时候，不需要后缀名。而引用.jsx文件的时候，要加上后缀名。
（2）在.tsx中导入React需要使用import * as React from ...，不能使用import React from ...，
为compilerOptions增加allowSyntheticDefaultImports选项为true可以解决这个问题，
但是vs code还是会标红（重启vs code可解决）。
{
"compilerOptions": {
...,
"allowSyntheticDefaultImports": true
},
...
}
（3）.jsx能识别.jsx和.tsx的默认导出，
.tsx能识别.tsx的默认导出，但是不能识别.jsx的默认导出。
ERROR in [at-loader] ./src/index.tsx:4:8
TS1192: Module '"./tsx-jsx/src/components/jsx-comp/index"' has no default export.
2.3.2 ./src/components/tsx-comp/index.tsx
import * as React from 'react';
const TsxComp: React.StatelessComponent<{}> = () => <div>TsxComp</div>;
export default TsxComp;
2.3.3 ./src/components/jsx-comp/...
（1）./src/components/jsx-comp/index.jsx
import React from 'react';
const JsxComp = () => <div>JsxComp</div>;
export {
JsxComp,
};
（2）./src/components/jsx-comp/index.d.ts
import * as React from 'react';
declare const JsxComp: React.StatelessComponent<{}>;
注：
为了能让TypeScript识别导入JavaScript模块中变量的类型，还要为模块添加.d.ts文件。
2.3.4 ./index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="page"></div>
<script src="./dist/index.js"></script>
</body>
</html>
3. 编译打包运行
3.1 编译打包
$ webpack
3.2 运行
$ open ./index.html
参考
React & Webpack
export = and import = require()
import fails with 'no default export'
Compiler Options
网友评论