都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官网分英文官网和中文官网，建议阅读英文官网，原因：

中文官网更新不及时，英文官网已经更新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 = (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(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有了基本认识，已经可以在项目中使用起来了。
之后的进阶与深入，请结合官网，在实践中获得真理！

快速入门TypeScript