TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。

一、前置条件

1. 安装：npm install -g typescript
2. 编译成js的方式： tsc filename.ts
3. 在vscode中运行js文件的方式：node filename.js

二、开始

1、基础类型与变量声明

注意一些新的类型：元组 Tuple、enum、any
以及一些略过的类型：void、never、null、undefined、类型断言

let isReal: boolean = false;

// null和undefined有一些特殊
let s: string = null;
let n: number = undefined;

// 将变量声明为数组类型的时候，也必须同时声明数组项的类型
let numArr: Array<number> = [1, 2, 3]; // 声明一个项为数字的数组
let numArr2: number[] = []; // 声明一个项为数字的数组
let list: Array<any> = []; // 声明一个项为未知类型或不同类型的数组

1.1 元组 Tuple：表示一个已知元素数量和类型的数组。下面这个x数组只应有2项，且每项的类型符合定义

let x: [string, number] = ['', 20];

1.2 枚举enum：既能根据key得到value，又能根据value得到key

enum stateNo { Working = 20, Finished = 30, Cancel = 92 };
let stateCancel: stateNo = stateNo.Cancel;
let stateName: string = stateNo[20];

1.3 any：当变量类型不确定时，如果一开始没有赋值，允许后续修改成不同的类型；但如果一开始赋过值，那么类型不允许修改。如果需要允许，则声明时使用any类型

let notSure; // 未赋值，后续可修改
notSure = "maybe a string instead";
notSure = false;
notSure = 20; 

let notSure: any = true; // 赋过值，但使用了any类型，后续也可修改
notSure = "maybe a string instead";
notSure = false;
notSure = 20; 

下图：未使用any，一开始赋过值，之后不应再修改类型

2、类型校验

2.1 函数入参校验

// 类型注解：为函数或变量添加约束的方式；则编译时会检查传入的参数的类型
function test1(person: string) {
    return "Hello, " + person;
}

如果传入的参数非字符串类型，或参数缺失，则会提示：

2.2 函数返回值校验

// 如果指定了函数返回值的类型，除了指定为void和any之外，其他类型都应该有返回值。
function getNumber(a: number, b: boolean): number {
    return;  // 直接return 或 return null也并不会报错
}

// 你也可以用void指明这个函数是没有返回值的
function test(a: number): void { 

}

3、接口

3.1 定义接口

// 声明一个Product类型

interface Product {
    name: string;
    sn: string;
    arr: [Number, string];
}

// 编译时会校验传进来的p是否符合：必须包含而且仅包含这3个字段。

function test2(p: Product) {
   
}
test2({ name: 'sd', sn: "User", arr: [20, ''] });

// 如果入参中的字段缺失，或者多传了字段，都会提示：

如果函数中使用了product类型中不存在的字段，也会提示：

3.2 可选字段

如果部分字段是可选的，可以使用?:来指定其类型

interface config {
    color: string;
    width?: number; // 则width可以不传
}

3.3 不可修改的字段

使用 readonly 来定义接口中的某个字段，使这个字段不可修改，类似于使用const声明变量的效果

interface config {
    readonly color: string;
    width?: number; // 则width可以不传
}

let c1: config = { color: 'red' }; // 此后color属性不能再修改了

3.4 字符串索引签名

多数时候，对象有多少属性并不是固定的。当你都不知道传进来的对象除了你想要的那几个属性之外，还有没有其他属性的时候，添加一个字符串索引签名 [propName: string]: any

interface SquareConfig {
    color: string;
    width?: number;
    [propName: string]: any;
}

let a: SquareConfig = {
    color: 'red',
    innerWidth: 98912, // 此时就可以带一些额外的属性了
    outerHeight: 982
}

4、类

注意 public 和 private 关键字

class Upload {
    uploadSrc
    constructor(public src) {
        this.uploadSrc = 'https://' + src;
        this.init(); // init方法声明为了private，只能在内部调用
        this.getFullsrc();
    }

    private init() {
        console.log('private init');
    }

    public getFullsrc() {
        console.log('public');
        return this.uploadSrc;
    }
}

// 由于init方法声明为了private，只能在内部调用，在实例中调用会提示：

image.png

// 实际上编译后的js文件中，用private和public修饰的原型方法并没有区别，仍能在实例上调用init方法，只是使用ts在编写时会有提示。编译后的js文件：

// 在构造函数的参数上使用public等同于创建了同名的属性：