使用Babel开发Typescript

安装

npm install --save-dev typescript
npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/plugin-proposal-object-rest-spread
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-typescript

配置

配置 tsconfig.json 文件

{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Process & infer types from .js files.
    "allowJs": true,
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

配置 babel

在根目录下创建 .babelrc 文件，内容如下：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

创建 src/index.ts 文件

export class C {
    private x = 10
    getX = () => this.x;
    setX = (newVal: number) => { this.x = newVal; }
}

export let x = new C();
export let y = { ...{ some: "value" } }

配置 build 任务

1
2
3

"scripts": {
    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline"
}

使用 TypeScript 开发 Ant Design

安装

1
2
3

npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev @babel/preset-react
npm install --save antd

安装 babel-plugin-import，可以提供按需加载功能

1	npm install --save-dev babel-plugin-import

.babelrc 文件要做相应的配置：

在 presets 中增加 “@babel/preset-react”
plugins 中增加 [“import”, { “libraryName”: “antd”, “libraryDirectory”: “lib”}, “ant”]

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread",
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css"}]
    ]
}

开发 React ，tsconfig.json 要做相应的配置，将 jsx 编译选项设为 react：

{
    "compilerOptions": {
     ...
      "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
      ...
    }
    ...
  }

使用 webpack

安装

1 2	npm install --save-dev webpack webpack-cli babel-loader npm install --save-dev style-loader css-loader

创建 webpack.config.js

const path = require('path');

module.exports = {
    // Change to your "entry-point".
    entry: './src/index',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                // Include ts, tsx, js, and jsx files.
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            }
        ],
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    }
};

创建 src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

创建 src/App.tsx

import React from 'react';
import { Button } from 'antd';

interface AppState {
    clickCount: number;
}

class App extends React.Component<any, AppState> {

    constructor(props: any){
    super(props);

        this.state = {
        clickCount: 0
        };

    }

    onButtonClick = () => {
        let count = this.state.clickCount + 1;
        this.setState({
        clickCount: count
        });
    };

    render() {
        return (
            <div className="App">
                <Button type="primary" onClick={this.onButtonClick}>第{this.state.clickCount}次点击</Button>
            </div>
        );
    }
}

export default App;

创建 dist/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>Ant Design</title>
</head>
<body>
    <div id="root"></div>
    <script src="app.bundle.js"></script>
</body>
</html>

运行 webpack 命令
打开 dist/index.html 文件，查看效果

参考资料：
https://github.com/Microsoft/TypeScript-Babel-Starter
https://zhuanlan.zhihu.com/p/59023070