愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

TypeScript(零):起步

一、安装

npm i -g typescript


二、使用

安装完TypeScript后,我们可以通过tsc指令来编译.ts文件,如:

$ tsc index.ts

编译完成后,会自动生成一个同名.js文件,我们再运行这个同名文件便可得到执行结果了


三、结合React/Webpack使用

1、首先确保已经全局安装了webpack:

$ npm i -g webpack

2、添加React/ReactDOM及声明文件:

$ npm i -S react react-dom @types/react @types/react-dom

3、添加开发时依赖:

$ npm -D typescript awesome-typescript-loader source-map-loader 

其中,awesome-typescript-loader可以让Webpack使用TS的tsconfig.json文件来编译TS代码,而source-map-loader则是使用TS输出的sourcemap文件来告诉Webpack何时生成自己的sourcemaps
4、添加TS配置文件
在项目目录下创建tsconfig.json文件,其包含了输入文件列表和编译选项,可以用来告诉TS如何编译我们的TS源码,如:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

5、Webpack的配置
在webpack里,我们需要添加的配置,则如下所示:

// ...
resolve: {
    // 配置.ts和.tsx为可缺省的引用文件扩展名
    extensions: ['.ts', '.tsx', '.js', '.json'],
    module: {
        rules: [
            // 将.ts和.tsx文件交由awesome-typescript-loader处理
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            },
            // 配置输出的js文件都交由source-map-loader重新处理
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: 'source-map-loader'
            }
        ]
    },
    // 可以将react库和react-dom库转成从全局变量中加载的模式
    // 避免所有的文件都打包成一个文件(因为库的代码是不变的,
    // 无需每次都重新打包)
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    }
}
// ...