foreword（前言）
学习方式，最理想的状态或许是有足够的时间能让你渐进式从基础到深入地掌握某个知识或技能，这会让你掌握系统全面的结构体系，并且能发现很多细节问题。
所以，从环境搭建开始，希望能记录下Typescript每一个层级、每一个阶段下的知识领域，进而系统全方位地掌握这个工具或者也可以说是一门“语言”。
编写环境
编辑器：Vscode
代码环境：安装nodejs
初步使用Typescript
1.随便创建一个目录，通过npm init初始化项目；
2.安装Typescript——npm i -D typescript，可以安装到全局，这样可以方便在任何地方都使用Typescript编译（npm package.json文件中配置运行脚本则需本地安装）；
3.安装完之后，便可以在终端输入tsc命令，如我们输入tsc --init便会帮我们在当前目录下新建一个Typescript配置文件；
4.在当前目录，我们新建一个src文件夹，并在里面新建一个index.ts文件，输入以下代码：
let hello: string = "hello, typescript";
上面代码的string是类型注解。
这时我们便可以通过tsc命令将该文件编译成js代码，我们输入tsc ./src/index.ts，将会在src目录下生成一个index.js文件：
var hello = "hello, typescript";
也可以在官方的PlayGround: http://www.typescriptlang.org/play/index.html中输入ts代码，我们将能预览到编译后的js代码。
基于webpack搭建项目结构
1.下载webpack包: npm i -D webpack webpack-cli；
2.下载webpack-dev-server: npm i -D webpack-dev-server，这个npm包用于已服务的方式运行项目，并进行热更新；
3.项目一般会有开发环境和生产环境，相对应的，我们可以将webpack配置分成三份——开发配置、生产配置、公共配置，不同的环境，将公共配置和对应的配置合并在一起，以下是我们webpack配置文件的目录结构：
--build
----webpack.base.config.js
----webpack.dev.config.js
----webpack.pro.config.js
----webpack.config.js
4.在编写这些配置文件之前，我们先安装几个webpack plugin: npm i -D clean-webpack-plugin html-webpack-plugin ts-loader webpack-merge
- clean-webpack-plugin会在将打包文件打包到对应目录（一般为dist）之前，将dist目录里的文件清空；
- html-webpack-plugin会将打包后的脚本通过script的方式注入到模版html文件中；
- ts-loader用于编译ts代码；
- webpack-merge用于合并webpack配置；
5.新增一个模版html文件:
src/tpl/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>typescript study</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
6.编写配置文件：
webpack.base.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.ts',
output: {
filename: 'app.js'
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/tpl/index.html'
})
]
}
webpack.dev.config.js:
module.exports = {
devtool: 'cheap-module-eval-source-map'
}
webpack.pro.config.js:
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
webpack.config.js:
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
module.exports = (env, argv) => {
let config = argv.mode === 'development' ? devConfig : proConfig
return merge(baseConfig, config)
}
这里有一个比较有意思的东西，就是webpack.dev.config.js中配置的devtool配置项，该配置项跟sourcemap有关，我们这里配置的是cheap-module-eval-source-map，这也是官方推荐的一个配置项，我们可以将这个配置项拆成几份来解读：
- cheap表示系统会忽略代码的列信息，因为我们在进行代码调试的时候往往只关注行信息；
- module表示系统将会定位我们的源代码，即我们在项目中编写的ts源码，而不是编译后的js代码；
- eval表示sourcemap将会以data url的形式打包到文件中；
- 官方还有其他的组合形式，具体可以点击这里查阅：https://webpack.js.org/configuration/devtool/#root（这里提醒一下，官方文档最好看英文版，因为是最新的，国内的文档往往更新比较慢）
7.在package.json中配置npm运行脚本：
"scripts": {
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js"
},
8.到这里，我们就可以通过npm run start来运行项目，通过npm run build打包项目；
last（最后）
非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动力。对于上面所述，有什么新的观点或发现有什么错误，希望您能指出。
最后，附上个人常逛的社交平台：
知乎：https://www.zhihu.com/people/bi-an-yao-91/activities
csdn：https://blog.csdn.net/YaoDeBiAn
github: https://github.com/yaodebian个人目前能力有限，并没有自主构建一个社区的能力，如有任何问题或想法与我沟通，请通过上述某个平台联系我，谢谢！！！
