前言
最近准备开始学习阅读vue3的源码，而vue3和vue2使用的类型系统不同，vue2使用的是Flow类型系统，而vue3使用的是TypeScript。所以，若要看懂vue3的源码的话，还是需要学习下TypeScript的。由于我之前是没有使用过ts (本文使用ts作为TypeScript的简称) 的，所以把学习的整个过程记录一下，这将会是一个系列。
第一篇 -- 邂逅TypeScript，搭建简易ts开发环境 - 掘金
第二篇 -- 初始TypeScript, 认识类型和类型操作
阅读本文，你将学到：
1. 什么是ts？与js有什么区别？
2. node环境下编译ts
3. webpack搭建ts的开发环境
4. ts中的变量的定义
1. 什么是ts?
官方解释：TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
翻译一下：ts是一种能构建成javascript的强大的类型程序语言，能给你在任何规模带来良好的工具体验。
也就是说，ts最终还是要编译成js，才能运行在浏览器环境的。
这样就很好理解了，就像我们平时写ES6的代码,最终都会被编译成ES5的代码运行在浏览器中。
官方有几段对TypeScript的特点的描述，我觉得非常的到位：
1.1 始于javascript,归于javascript
-
使用现有的
javascript代码，包括流行的javascript库，并从javascript中调用TypeScript代码； -
TypeScript可以编译出纯净、简洁的javascript代码，并且可以运行在浏览器上、nodejs环境中；
1.2 TypeScript是一个强大的工具，用于构建大型项目
-
类型允许开发
javascript程序时使用高效的开发工具比如静态检查； -
类型让你定义组件之间的接口和洞察现有
javascript库的行为；
1.3 拥有先进的javascript
-
TypeScript和ECMAScript的发展保持一致，也拥有最新的和不断发展的ECMAScript新特性，以帮助建立健壮的组件； -
这些新特性最终都会被编译成简洁的
javascript；
2. ts的编译环境
本文中搭建的
ts编译环境和开发环境均在windows系统上搭建；
node v14.16.0
npm v6.14.11
ts既然可以编译成js，那么编译成js后就可以分别在node环境和浏览器环境运行。
2.1 node环境下的编译
安装依赖：
// 下载这三个npm包，全局安装
// ts-node：ts的执行引擎，作用就是编译ts文件并运行在node环境里
// tslib: ts的一个包含所有的辅助函数的运行时的库
// @types/node：类型定义的一个库
npm install ts-node tslib @types/node -g
写一个ts文件测试：
// 文件 test.ts
function foo(str: string) {
console.log(str.length);
}
foo('abc');
在终端执行ts-node test.ts, 会输出3。
2.2 webpack + tsc 搭建编译环境
2.2.1 初始化项目
mkdir webpack-ts-demo
cd webpack-ts-demo
// -y 参数意思是省去了一直回车的步骤
npm init -y
2.2.2 安装webpack相关
// 如果你使用 webpack v4+ 版本，并且想要在命令行中调用 `webpack`，你还需要安装`webpack-cli`
npm install webpack webpack-cli -D
// webpack服务 实现代码实时编译、html页面实时刷新效果
npm install webpack-dev-server -D
// 页面模板 把打包后的js文件，自动加入到html中
npm install html-webpack-plugin -D
2.2.3 安装TypeScript相关
// `TypeScript`编译器，把ts文件编译成js文件
npm install typescript -D
// `TypeScript`解析器，解析ts文件，需要在webpack.config.js中配置
npm install ts-loader -D
2.2.4 手动配置一些文件
2.2.4.1 配置webpack.config.js
- 新建
webpack.config.js文件，并做如下配置，配置相对比较简单：
// webpack-ts-demo/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 开发模式，告知 webpack 使用相应模式的内置优化
mode: 'development',
// 入口文件，需手动在根目录下创建`/src/main.ts`文件
entry: './src/main.ts',
// 打包输出配置
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
resolve: {
// 这里是配置文件的后缀，在import引入文件的时候，如果不写文件后缀，则会按照这个配置的后缀去查找，`...`是默认配置,其实就是在默认配置基础上增加`.ts`扩展
extensions: [".ts", "..."]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 使用本地模板（手动在根目录创建一个`index.html`文件，在vscode编辑器中，点新建文件，输入`!`，然后按`tab`键，会自动生成一段html代码，保存就可以了）
}),
],
module: {
// 配置ts-loader, 解析ts文件
rules: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
}
}
2.2.4.2 配置package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack serve", // 新增，启动项目
"build": "webpack" // 新增，打包项目
},
2.2.4.3 配置tsconfig.json文件
tsconfig.json是TypeScript的配置文件，如果没有这个文件，启动项目会报错；这个文件不用手动创建，我们可以使用命令创建：
// 创建 `tsconfig.json`文件
// 安装了`typescript`就可以在终端使用`tsc`命令
tsc --init
tsconfig.json文件有很多的配置，在之后的文章会做详细介绍。
到这里，基本所有的配置已全部完成， 这时候，我们在根目录下创建src文件夹，并创建main.ts文件，
// src/main.ts
function sum(a:number, b:number) {
return a + b
}
console.log(sum(10, 20));
然后运行npm run serve,启动成功的话，终端显示这样：
在浏览器中打开 http://localhost:8080/ ，F12打开浏览器控制台，这时候可以在控制台看到输出30。
如果能输出30的话，说明编译环境已基本配置完成，当然，这仅仅是最基本的开发环境，在实际的项目中，配置往往要比这复杂的多。
3. ts中变量的定义
ts中变量的定义基本和javascript中的一致，多了类型注解，
语法为：var/const/let 标识符：数据类型 = 赋值；
这里先简单介绍下ts的变量的定义，在之后会有一系列的文章来对TypeScript进行一个系统的学习，大家可以关注我，随后会逐步更新。
4. 总结
这篇文章是我们对TypeScript的邂逅，简单了解了TypeScript的概念、特点，以及简单搭建了在nodejs环境和浏览器环境的开发环境，还了解TypeScript的变量的定义。
其实只要有javascript基础的同学，都可以把TypeScript学起来，因为TypeScript+VUE 或 TypeScript + React已成为趋势，学TypeScript也对我们阅读开源项目比如vue3有很大的帮助。
