都2021年了，TypeScript已经成为大厂React应用的标配，也成为前端程序员的必备技能之一。
Vue也完全支持了TypeScript，基本所有用流行框架搭建的应用都可以使用TypeScript。
本文将从TypeScript是什么、TypeScript的作用与优势、如何学习TypeScript三个角度帮助大家入门TypeScript。（以下简称ts）
TypeScript是什么
TypeScript extends JavaScript by adding types.
- ts通过增加类型，来扩展js
- 换句话说，ts是js类型的超集
- ts最终也是编译成js来运行
- ts由微软于2012年10月发布，此后越来越流行
我的理解：ts不是一门新的语言，而是基于js的一种新语法糖。
TypeScript的作用与优势
By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.
Any browser, any OS, anywhere JavaScript runs. Entirely Open Source.
- 通过理解js，在运行代码前，ts节省了你用来捕获错误、修复类型错误的时间
- 任何浏览器、任何操作系统、任何可以运行js的地方，都可以运行ts
- 完全开源
我的理解：
1. ts最主要的作用就是静态类型检查，规避js弱类型的弊端，在开发阶段就避免因类型原因导致的bug
2. 对于其他语言（如java）转到前端的开发人员友好，ts的语法糖参考了许多面向对象语言的语法
3. 清晰的类型定义与代码结构，使后期维护更为便利
4. TypeScript已经相对成熟了，网上的资料也很齐全，大部分的库、框架以及IDE都对TypeScript做了很好支持
如何学习TypeScript
学习一门新技术，最好的方法，一定是结合官网，边阅读边实践。
Ts官网分英文官网和中文官网，建议阅读英文官网，原因：
- 中文官网更新不及时，英文官网已经更新Ts 4.1版本了，中文的才3.1
- 中文官网充满了广告 (＃￣～￣＃)
- 英文官网版权到2021年，中文官网才到2018年，已经过期了，似乎已经很久没维护了。。
本文的目的是帮助新手快速入门ts，对其有概念后，再通过自己在项目中运用来进行深入。
安装与编译
安装（任选一种）
npm install -g typescript- 在支持ts的IDE（如vscode）上安装ts插件
编译
ts文件以.ts为后缀，可通过tsc指令将ts文件编译成js文件：
tsc greeter.ts
再来介绍几个最常用的基本概念：基本类型、接口、泛型、类
基本类型
众所周知，js有6种数据类型：数字（number）、字符串（string）、布尔值（boolean）、undefined、null、对象（Object）。
但是，js是弱类型语言，定义变量时是某种类型，其后也可以对其类型进行随意更改，并且例如if()等语法会对变量进行隐式转换，这些操作极易引发预期之外的错误，在其他面向对象语言中也是绝对不被允许的。
ts对变量类型进行了强定义与扩展，在定义或引用之初就特定类型：
// 1. 布尔值
let isDone: boolean = false;
// 2. 数字
let decLiteral: number = 6;
// 3. 字符串
let name: string = "bob";
// 4. 数组：成员相同类型
let list: number[] = [1, 2, 3];
// 5. 元祖：成员不同类型
let x: [string, number];
// 6. 枚举：适用于映射关系、关联常量
enum Color { Red = 1, Green = 2, Blue = 4 }
let c: Color = Color.Green;
// 7. Any：适用未知类型变量，定义之后可以改变类型，尽量少用
let notSure: any = 4;
// 8. Void：适用函数无返回值
function warnUser(): void {
console.log("This is my warning message");
}
// 9. Null 和 Undefined
let u: undefined = undefined;
let n: null = null;
// 10. Never
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
// 11. Object
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
类型断言
当开发人员比ts更清楚某个值的类型，且该场景下必须为该类型，可使用类型断言：
// 二者等价
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
接口
将复杂结构的数据类型抽离出来，定义成一个单独的数据，这就是接口，关键字interface。
将接口单独抽离，可使代码结构更加清晰，且便于复用。
// ?代表可选参数，其余为必选
interface SquareConfig {
color: string;
width?: number;
}
一般可以在项目src或者每个模块下新建types目录，用于存放该模块下所有接口：
src
|- types
| |- index.d.ts
| |- data.d.ts
|- components
泛型
- 泛型是新手比较难理解和使用的概念。
- 它的作用是，使组件能支持未来的数据类型，即当前不能确定是何类型，未来确定类型后，能灵活使用该类型。
- 适用大型系统中的复杂不确定场景。
- 在C#和Java中，都可以使用泛型来创建可重用的组件。
function identity<T>(arg: T): T {
return arg;
}
上例中，arg为不确定类型的参数，若函数中或返回值需要使用该参数类型，则可用泛型T来代替并直接使用。
类
后端同学或使用过其他面向对象语言的同学会对这个概念比较熟悉，因为类在这些语言中是已存在的基本概念，即基于类的继承并且对象是由类构建出来的。
实际上，ES6已经将类的概念纳入到了js基本语法中，大家可以放心使用。
类的写法
// 该类包括greeting属性、构造函数、greet方法
// this代表该构造函数本身
// greeter为该类的实例对象
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
继承
// 通过extends关键字，子类Dog从基类Animal中继承了属性与方法
class Animal {
move(distanceInMeters: number = 0) {
console.log(`Animal moved ${distanceInMeters}m.`);
}
}
class Dog extends Animal {
bark() {
console.log('Woof! Woof!');
}
}
const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();
公共，私有与受保护的修饰符
// public-自由访问
// private-只能在声明类中访问
// protected-只能在声明类和子类中访问
// 若不加修饰符 默认为public
class Animal {
public name: string;
private age: number;
protected gender: string;
public constructor(theName: string) { this.name = theName; }
public move(distanceInMeters: number) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
readonly修饰符
// 只读属性，无法修改
// 必须在声明时或构造函数里被初始化
class Octopus {
readonly name: string;
readonly numberOfLegs: number = 8;
constructor (theName: string) {
this.name = theName;
}
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.
结语
以上为TypeScript中最常用的概念，本文以最简单的例子进行论述，目的是让读者快速入门。
看完后对ts有了基本认识，已经可以在项目中使用起来了。
之后的进阶与深入，请结合官网，在实践中获得真理！
