Ant Design Pro V5精讲（基础篇九）：TypeScript入门

解决什么技术痛点？

官方定义：TypeScript是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码，类型约束能力是它的核心。

JavaScript是一门灵活的编程语言，但它的缺陷是没有类型约束，隐藏类型转换，var的作用域问题等，在编程中我们有一个共识：错误出现的越早越好（写代码出错比代码编译出错好，代码编译出错比代码运行期间出错好，开发阶段出错比测试期间发现错好）。由于JavaScript无法在代码编译阶段发现类型错误，造成了我们前端开发人员类型思维的缺失，为了解决这个技术特点，TypeScript出现了，从它的命名就可以知道，它是一个类型系统.，如果是JavaScript是一个动态类型检查机制，那么TypeScript就是一个静态类型检查机制，它在编译阶段就会进行类型的检查。

类型约束

JavaScript的类型分为：原始数据类型（Primitive data types）和对象类型（Object types）。

原始类型有：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。

原始类型约束：

//布尔值
let isDeleted: boolean = fasle;
//数值
let iCount: number = 10;
//字符串
let message: string = 'hello';
//空值
let tmp: undefined = undefined；
或者
let tmp: null = null;
//任意类型
let message: any = 'hello';
在typescript中如果一个类型没有声明类型，它会识别为任意值类型。
// 联合类型
let tmp: string|number; 允许它是string或者number类型，但不能是其它类型。 

对象的类型约束（即interface接口）： typescript通过定义接口来定义对象类型，接口是对行为的抽象，由类来实现，typescript中的interface还有对象的形状进行一个描述，即变量的形状必须和接口的形状保持一致。

//定义一个接口，属性带有类型的约束声明
interface Client{
   name:string;
   phone?:number; // ？表示可选属性
   addree:any;
   readony isDeleted: boolean;   //只读，只能在创建时赋值
   [anyTest:stirng]?:any; // 任意属性
}
//创建对象
let oneClient:Person={
   name:'test';
   // phone由于可选属性，所以可以不存在
   addree: '北京市';
   isDeleted: false;
}

数组类型的约束

//定义数组
let arrayTmp: number[]=[1,2,3];
//数组泛型
let arrayTmp:Array<number>=[1,2,3];
//任意类型
let list:any[]=[1,'hello',false];

函数类型的约束

//函数
function sum(x: number, y: number): number {
    return x + y;
}
//函数表达式
let mySum = function (x: number, y: number): number {
    return x + y;
};
//可选参数，后面不能再有必选参数，所以可选参数要放最后面
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

枚举定义：

声明文件中：
 
//常量枚举
const enum Directions {
    Up,
    Down,
    Left,
    Right
}
引用：
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
 
//声明枚举
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
引用：
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

泛型定义：

//定义泛型函数
function createArray(length: number, value: any): Array<any> {
    let result = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}
//定义泛型接口
interface CreateArrayFunc {
    <T>(length: number, value: T): Array<T>;
}
//定义泛型类
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

元组定义：

//元组（Tuple）合并了不同类型的对象
let tom: [string, number] = ['Tom', 25];

类与接口

//接口定义
 
interface Alarm {
    alert(): void;
}
 
interface Light {
    lightOn(): void;
    lightOff(): void;
}
 
 
//类可以继承多个接口
class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}