携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

TypeScript

介绍TypeScript

TypeScript是一个开源的、渐进式包含类型的JavaScript超集。它的主要功能是为JavaScript变量提供类型支持，从而更容易的重构代码和寻找bug。最后，Typescript会被编译成简单的JavaScript代码。

全局安装TypeScript

npm install -g typescript

示例，创建一个以.ts为扩展名的文件，比如hello.ts

let a = "hello world";
a = 20

使用tsc命令来编译它

tsc hello.ts

在终端输出信息中，可以看到下面的警告

hello.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'.

这表示number类型不能赋值给字符串类型，但是检查文件目录，hello.ts被编译后会自动生成一个hello.js文件。

var a = "hello world";
a = 123;

尽管TypeScript在编译时进行了类型和错误检测，但是并不会阻止编译器生成JavaScript代码，开发者可以根据这些警告提示信息修改自己的代码，写出较少错误和bug的JavaScript代码。

类型推断

TypeScript有一个类型推断机制，也就是说TypeScript会根据为变量赋的值自动给该变量设置一个类型。

let age = 20; //number
let flag = true; //blean
let name = "JiaJi"; //string

当变量只是定义没有赋值时，它的类型会被自动设置为any，意思是可以接受任何值，但推荐为其设置一个类型。

示例:

let age: number;
let name: string;

接口

在TypeScript中有两种接口的概念。

第一种接口的概念是把接口看作一个实际的东西，它是对一个对象必须包含的属性和方法的描述。

interface Person{
    name: string;
    age: number
}
function logName(person: Person){ //传递的参数必须是Person
    console.log(person.name);
}
const john = {name: "john", age: 21};
const mary = {name: "mary", age: 21, phone: "12442432430"};
logName(john);
logName(mary);

上面的代码不会出现任何编译错误，变量mary包含了Person接口定义的属性，那么它就是一个Person。

第二种TypeScript接口的概念和面向对象编程相关。接口就是一份合约，在这份合约里，可以定义实现这份合约的类或接口的行为。

interface Comparable{
    compareTo(b): number;
}
class MyObject implements Comparable{
    age: number;
    compareTo(b): number{
        if(this.age === b.age){
            return 0;
        }
        return this.age > b.age ? 1  : -1;
    }
}

泛型

泛型也是typescript强大的特性。修改一下Comparable接口，以定义compareTo方法接收的参数是什么类型。

interface Comparable<T>{
    compareTo(b:T):number;
}

用尖括号向Comparable接口动态地传入T类型，可以指定compareTo函数的参数类型。

class MyObject implements Comparable<MyObject>{
    age: number;
    compareTo(b: MyObject): number{
        if(this.age === b.age){
            return 0;
        }
        return this.age > b.age ? 1  : -1;
    }
}

参考

《学习JavaScript数据结构与算法（第3版）》