什么是 TypeScript TypeScript 是 JavaScript 类型的超集，它可以编译为纯 JavaScript。
TypeScript 可以在任何浏览器、任何计算机和操作系统上运行，并且是开源的。
TypeScript 由微软开发，截至到目前，最新的 TypeScript 版本为 3.3。
TypeScript = ES6 + Type TypeScript 用于解决什么问题 为什么会出现 TypeScript JavaScript 是一门弱类型的脚本语言，非常灵活，但同时也带来了诸多不便。
很多时候，我们的参数并非我们所期望的类型，这就需要我们做很多类型判断，比如：
function say(callback) { callback instansof Function && callback() // typeof callback == "function" && callback() } 1 2 3 4
TypeScript 的优势在于
有更多的规则和类型限制，代码具有更高的预测性和可控性，易于维护和调试 对模块、命名空间和面向对象的支持，更容易组织代码开发大型复杂的程序 TypeScript 的编译过程可以捕获运行之前的错误 TypeScript 的缺点是什么 如果在 HTML 页面里大量嵌入了 JavaScript 代码，这个时候很难使用 TypeScript 替代 项目中大量依赖了第三方 JavaScript 类库，并且这些类库没有 .d.ts 文件 不能使用分析 JavaScript 源代码的工具（例如 JSHint） 官方明确指出，TS 不会提供任何 run-time type information 有关的特性 TypeScript 的原理是什么 TypeScript 是 JavaScript 的超集，但是并不能之间在浏览器里直接运行，需要编译成 JavaScript 后才能运行。
而将 TypeScript 编译成 JavaScript 的事就是 TypeScript 编译工具做的，其涉及的主要知识就是编译原理。
TypeScript 的语法 安装与基础使用 如果我们要开始使用 TypeScript 最为重要的就是安装 TypeScript 编译器了。这里我介绍两种开发 TypeScript 的方式。
基本使用 npm install -g typescript 1 然后创建一个 index.ts 的文件，注意 typescript 需要的文件名后缀为 .ts，就是 typescript 的缩写。
在文件中写下一些 js 代码，我们就可以开始进入编译阶段。在与 index.ts 文件同一目录下运行：
tsc index.ts 1 tsc 就是 typescript compile 的缩写。 运行完命令命令后，我们会发现在目录中出现了一个 index.js 文件。这个文件就是我们真正在 html 中引用的文件，也是浏览器能直接运行的文件。
和 webpack 结合使用 我们知道，现在的前端进步飞快，不再和以前一样呈现简单的文字和图片。前端变得越来越复杂，所以前端工程化成为必然，否则支持不起复杂的需求。
基于以上原因，我们这里需要了解如何结合 webpack 使用 typescript。
初始化项目
npm init
目录结构：
proj/ ├─ dist/ └─ src/ └─ components/ └─ index.ts ├─ index.html ├─ package.json ├─ tsconfig.json ├─ webapck.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14
安装 webpack
npm install --save-dev webpack webpack-cli 1 安装 typescript loader
npm install --save-dev typescript awesome-typescript-loader source-map-loader 1 source-map-loader：主要是出错调试时使用，比如你源码里面某一行代码错了，但是项目运行时使用的是编译后的文件，编译后的代码肯定和源文件的行数不一样，错误发生时提示代码行数是编译文件的，这个时候该怎么办呢？这就需要 source-map-loader， 它可以找到编译后文件错误代码在源文件中的位置。
准备配件文件
typeScript configuration file
{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5" }, "include": [ "./src/**/*" ] } 1 2 3 4 5 6 7 8 9 10 11 12 webpack configuration file
{ module.exports = { entry: "./src/index.ts", output: { filename: "bundle.js", path: __dirname + "/dist" }, mode: "development", resolve: { extensions: [".ts", ".js", ".json"] }, module: { rules: [ { test: /.ts?/, loader: "awesome-typescript-loader" }, { enforce: "pre", test: /\.js/, loader: "source-map-loader" } ] } }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
编译项目
{ "name": "typescript", "version": "1.0.0", "description": "A typescript demo", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "awesome-typescript-loader": "^5.2.1", "source-map-loader": "^0.2.4", "typescript": "^3.3.3333", "webpack": "^4.29.6", "webpack-cli": "^3.2.3" } }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 运行以下命令就行了：
npm run build 1 以上主要参考 typescript 官网，中间做了一些简化。
进阶技巧 在我看来，typescript 最为核心的地方就是类型。
尽管它支持模块和命名空间、接口和类，能够转为化 ES5 或 ES3 去兼容各种浏览器，但是相比 ES6 和 Babel 它的竞争力来自于它强大的类型体系和编译时的类型检测。
所以学习 typescript，那就必须掌握它的类型体系。
基本类型 Bolean：let isDone: boolean = false;
Number：let decimal: number = 6;
String：let color: string = "blue";
Array：
let list: number[] = [1, 2, 3]; 或 let list: Array = [1, 2, 3]; 1 2 3 Tuple：元组，就是一种混合类型
let x: [string, number];
x = ["hello", 10]; // OK
x = [10, "hello"]; // Error 1 2 3 4 5 Enum：枚举，在 js 中一般使用常量去做枚举做的事
enum Color {Red, Green, Blue} let c: Color = Color.Green; 1 2 Any：任何类型，相当不限制类型和 js 一样
Void：函数返回类型
function warnUser(): void { console.log("This is my warning message"); } 1 2 3 Null and Undefined：和 js 中的一样
Never：这种类型很新奇，用于函数，大致就是说这个函数体不会到达终点，要么在中途就结束了；要么一直卡在中途。了解更多，点击链接，搜 Never。
Object：和 js 中的一样，object 是一种表示非基本类型的类型，即任何不是 number, string, boolean, symbol（ES6）, null, 或 undefined。
Type assertions：这个很有意思，说是断言，其实和 Java 中的类型转换有点像。两种语法如下：
// the “angle-bracket” syntax: let someValue: any = "this is a string";
let strLength: number = (someValue).length;
// the as-syntax: let someValue: any = "this is a string";
let strLength: number = (someValue as string).length; 1 2 3 4 5 6 7 8 9
高级类型 Intersection Types：交集类型将多种类型组合成一种。这允许你将现有类型添加到一起以获得具有所需功能的单一类型。 Union Types：并集类型，和交集类型很像，但是用法不同，一般用于函数参数类型声明，表示该参数可以接受多种类型。 Nullable types：可空类型，专门针对 null 和 undefined。 Type Aliases：类型别名，简单说就是给类型重新取一个自己喜欢的名字。 String Literal Types Numeric Literal Types Index types Mapped types Conditional Types
