TypeScript

• 背景
• 安装TS
• 总结

背景

TS是动态运行时语言，JS的精髓就是var（你体会一下）。

TS与其说是一门语言，不如说它是一个工具，能将代码编译成JS的工具，编译阶段会做类型和约束检查，能避免一些潜在bug。

至于是动态运行时检查好，还是静态编译时检查好？按套路来说肯定是静态编译时检查好，能避免潜在bug嘛。

但这最好根据业务背景来决定是否使用TS，bug少不一定是好项目。在快速上线，追求变现的阶段，与其开发一个0 bug的项目，不如开发一个能早一周上线的项目。

安装TS

npm i -g typescript

安装好后就可以使用TS编译器 tsc 了，你可以任意创建一个 .ts 后缀的文件，然后用TS编译器 tsc 将其编译成 .js 文件：

tsc ./xxx/xxx.ts

编译的参数可通过 tsconfig.json 配置，在目录中执行：

tsc --init    // 能在目录下生成一个 tsconfig.json

项目中结合 webpack 使用的话，还要安装 ts-loader

module.exports = {
    ...
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/i,
                use: [{
                    loader: 'ts-loader'
                }],
                exclude: /node_modules/
            }
        ]
    },
    ...
}

总结

示意代码仓库

Typescript 工具的核心就是 tsc 编译器，可以将 .ts 文件编译成 .js 文件
    |- tsc 的编译参数可通过 tsconfig.json 配置
        |- 集成进 webpack 时，需要 ts-loader，本质上就是读取项目根目录的 tsconfig.json 文件，调用 tsc 编译器执行编译