什么是 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()
}

TypeScript 的优势在于

有更多的规则和类型限制，代码具有更高的预测性和可控性，易于维护和调试
对模块、命名空间和面向对象的支持，更容易组织代码开发大型复杂的程序
TypeScript 的编译过程可以捕获运行之前的错误

TypeScript 的缺点是什么

如果在 HTML 页面里大量嵌入了 JavaScript 代码，这个时候很难使用 TypeScript 替代
项目中大量依赖了第三方 JavaScript 类库，并且这些类库没有 .d.ts 文件
不能使用分析 JavaScript 源代码的工具（例如 JSHint）
官方明确指出，TS 不会提供任何 run-time type information 有关的特性

TypeScript 的原理是什么

TypeScript 是 JavaScript 的超集，但是并不能之间在浏览器里直接运行，需要编译成 JavaScript 后才能运行。

而将 TypeScript 编译成 JavaScript 的事就是 TypeScript 编译工具做的，其涉及的主要知识就是编译原理。如果大家对此很感兴趣，可以参考：

https://jkchao.github.io/typescript-book-chinese/compiler/overview.html

TypeScript 的语法

安装与基础使用

如果我们要开始使用 TypeScript 最为重要的就是安装 TypeScript 编译器了。这里我介绍两种开发 TypeScript 的方式。

基本使用

npm install -g typescript

然后创建一个 index.ts 的文件，注意 typescript 需要的文件名后缀为 .ts，就是 typescript 的缩写。

在文件中写下一些 js 代码，我们就可以开始进入编译阶段。在与 index.ts 文件同一目录下运行：

tsc index.ts

tsc 就是 typescript compile 的缩写。

运行完命令命令后，我们会发现在目录中出现了一个 index.js 文件。这个文件就是我们真正在 html 中引用的文件，也是浏览器能直接运行的文件。

和 webpack 结合使用

我们知道，现在的前端进步飞快，不再和以前一样呈现简单的文字和图片。前端变得越来越复杂，所以前端工程化成为必然，否则支持不起复杂的需求。

而前端工程化中当前最火的工具莫过于 webpack，一款“打包”工具。事实上，它的功能比你想象的强大。

基于以上原因，我们这里需要了解如何结合 webpack 使用 typescript。

初始化项目

npm init目录结构：proj/
├─ dist/
└─ src/└─ components/└─ index.ts
├─ index.html
├─ package.json
├─ tsconfig.json
├─ webapck.config.js

安装 webpack

npm install --save-dev webpack webpack-cli

安装 typescript loader
```
npm install --save-dev typescript awesome-typescript-loader source-map-loader
```
source-map-loader：主要是出错调试时使用，比如你源码里面某一行代码错了，但是项目运行时使用的是编译后的文件，编译后的代码肯定和源文件的行数不一样，错误发生时提示代码行数是编译文件的，这个时候该怎么办呢？这就需要 source-map-loader，它可以找到编译后文件错误代码在源文件中的位置。

准备配件文件

typeScript configuration file

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

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"}]}
}

编译项目

{"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"}
}

运行以下命令就行了：

npm run build

以上主要参考 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<number> = [1, 2, 3];

Tuple：元组，就是一种混合类型

let x: [string, number];x = ["hello", 10]; // OKx = [10, "hello"]; // Error

Enum：枚举，在 js 中一般使用常量去做枚举做的事
```
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
```
Any：任何类型，相当不限制类型和 js 一样

Void：函数返回类型

function warnUser(): void {console.log("This is my warning message");
}

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 = (<string>someValue).length;// the as-syntax:
let someValue: any = "this is a string";let strLength: number = (someValue as string).length;

高级类型

Typescript 的高级类型，使用时不会一下子就想到，得有一定经验后才会熟练使用，它们能让你的代码变得优雅、简洁。

Intersection Types：交集类型将多种类型组合成一种。这允许你将现有类型添加到一起以获得具有所需功能的单一类型。
Union Types：并集类型，和交集类型很像，但是用法不同，一般用于函数参数类型声明，表示该参数可以接受多种类型。
Nullable types：可空类型，专门针对 null 和 undefined。
Type Aliases：类型别名，简单说就是给类型重新取一个自己喜欢的名字。
String Literal Types
Numeric Literal Types
Index types
Mapped types
Conditional Types

了解更多高级类型

本人觉得这些高级类型没有必要可以去记，如果开发的时间长了，就会遇到各种问题。之后时不时看看官方的文档和例子，就会有很大的心得。

那时自然而然会记住这些高级类型，因为它们能帮助你更快更优雅的解决问题。

需要注意的问题

在 typescript 中有一些需要注意的地方，大家直接去官方上看就行，写的通俗易懂。

https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html

深入浅出 TypeScript相关推荐

用typescript完成倒计时_「干货」将数十万行CoffeeScript代码迁移到TypeScript
作者 | David Goldstein 译者 | 王强策划 | 小智转发链接:https://mp.weixin.qq.com/s/TK7kWXX4hR3e-jtpVMuBnw 序言 2017 ...
日更一文，今天来点干货！
今天给大家介绍一个前端公众号:前端充电宝,干货很多,值得关注!公众号只分享原创文章,基本日更一文(周末.节假日休息),被小伙伴戏称高产似那啥~ 关于作者作者 CUGGZ,掘金LV6,2021年度人气 ...
技术期刊 · 吾令凤鸟飞腾兮 | 使用 esbuild 加速 webpack；网易云的熟人社交玩法；状态管理利器 XState；TypeScript 是如何工作的；深入浅出 V8 引擎
蒲公英 · JELLY技术期刊 Vol.44 生命不息,学习无止,这是很多人一以贯之的追求,虽然在很多领域中,知识是无法穷尽的,但每一点细小的改变都能让自己可以更进一步,就好像离骚中所述," ...
webpack 深入浅出分析之打包 JS、ES6 和 Typescript
一.webpack 打包 JS 文件通过 npm install webpack 命令可以下载 webpack,通过 npm install webpack-cli -g 命令下载 webpack- ...
深入浅出学习 TypeScript 语言
课程简介 2012年10月,微软发布了首个公开版本的 TypeScript,2013年6月19日,在经历了一个预览版之后微软发布了正式版 TypeScript 0.9.TypeScript 是 Jav ...
深入浅出 Babel 下篇：既生 Plugin 何生 Macros
接着上篇文章: <深入浅出 Babel 上篇:架构和原理 + 实战 ????> 欢迎转载,让更多人看到我的文章,转载请注明出处这篇文章干货不少于上篇文章,这篇我们深入讨论一下宏这个玩意 ...
JavaScript TypeScript学习总结
目录一. JavaScript 1.JavaScript简介 2.基本语法 2.1 大小写敏感 2.2 标识符 2.3 注释 2.4 语句 2.4 关键字.保留字 2.5 变量 2.6. 操作符 2 ...
Python --深入浅出Apriori关联分析算法（二） Apriori关联规则实战
上一篇我们讲了关联分析的几个概念,支持度,置信度,提升度.以及如何利用Apriori算法高效地根据物品的支持度找出所有物品的频繁项集. Python --深入浅出Apriori关联分析算法(一) 这次 ...
超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...

深入浅出 TypeScript