都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做了很好支持

ts对类型的检查

如何学习TypeScript

学习一门新技术，最好的方法，一定是结合官网，边阅读边实践。
Ts官网分英文官网和中午官网，建议阅读英文官网，原因：

1. 中午官网更新不及时，英文官网已经更新Ts 4.1版本了，中文的才3.1
2. 中午官网充满了广告 (＃￣～￣＃)
3. 英文官网版权到2021年，中午官网才到2018年，已经过期了，似乎已经很久没维护了。。

本文的目的是帮助新手快速入门ts，对其有概念后，再通过自己在项目中运用来进行深入。

安装与编译

安装（任选一种）

1. npm install -g typescript
2. 在支持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有了基本认识，已经可以在项目中使用起来了。
之后的进阶与深入，请结合官网，在实践中获得真理！