TypeScript

数据类型

JS 内置的数据类型

string、number、boolean、undefined、null、object、bigint、symbol

默认可以把 null 和 undefined 赋值给其他类型

Array

普通定义

let arr: number[] = [1, 2, 3];
// or
let arr2: Array<number> = ['1'];

联合类型

let arr: (string | number)[] = ['1', 2];

指定对象成员

interface ArrType{
    name: string,
    age: number
};

let arr: ArrType[] = [{ name: 'remons', age: 10 }]

函数

声明

function sum(x: number, y:number) :number {
    return x + y
}

表达式

const sum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
}

可选参

function sum(x: number, y: number): number {
    if (y) {
        return x + y
    } else {
        return x;
    }
}

可选参后不能有必传参

默认值

function sum(x: number, y: number = 1): number {
    return x + y
}

剩余参数

function sum(x: number, y: number = 1, ...other: any[]): Array<any> {
    const params = [x, y, ...other];
    return params;
}

重载

// 设想这样一个场景，有一个函数，有两个参数，我想实现以下几种功能
// 1. 当(a, b); a = number, b = number 时, return a + b : number;
// 2. 当(a, b); a = string, b = string 时, return a + '' + b;
// 即：a = number, b = number; a = string, b = string;
// 这种情况下该如何进行约束呢?

function Add(a: number, b: number): number
function Add(a: string, b: string): string
function Add(a: any, b: any): any {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b
    }else {
        return a + '' + b
    }
}   

Tuple(元组)

元组最重要的特性是可以限制数组元素的个数和类型，它特别适合用来实现多值返回。用于保存定长定数据类型的数据

解构赋值

const tulpes: [number, string] = [1, 'remons'];
const [age, names] = tulpes;
console.log(age, names) // 1, 'remons'

可选参

const tulpes: [number, string?] = [1];

剩余参数

const tulpes: [number, ...string[]] = [1, 'remons', 'remons2'];

重载

// 设想这样一个场景，有一个函数，有两个参数，我想实现以下几种功能
// 1. 当(a, b); a = number, b = number 时, return a + b : number;
// 2. 当(a, b); a = string, b = string 时, return a + '' + b;
// 即：a = number, b = number; a = string, b = string;
// 这种情况下该如何进行约束呢?

function Add(a: number, b: number): number
function Add(a: string, b: string): string
function Add(a: any, b: any): any {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b
    }else {
        return a + '' + b
    }
}   

never

永不存在的值的类型

void

无任何类型，例如没有返回值的函数的返回值类型

unknown

未知类型

any

任意类型的变量，不作任何约束

类型断言

const arrNumber: number[] = [1, 2, 3, 4];
const greaterThan2: number = arrNumber.find(num => num > 2); 
// Type 'number | undefined' is not assignable to type 'number'.Type 'undefined' is not assignable to type 'number'.
const greaterThan1: number = arrNumber.find(num => num > 1) as number; // OK

非空断言 !

let str: string | undefined | null;
str!.toString()

确定赋值断言 !

let num: number; // so: let num!: number;
changeStr();
console.log(num * 2) // Variable 'num' is used before being assigned.
function changeStr() {
    num = 1;
}

字面量

// 单个
let str: 'string' = 'string';
let num: 1 = 1;
let bool: true = true;
// 多个
type literal  = 'top' | 'bootom'

联合类型

取值可以为多种类型中的一种

let types: string | number

交叉类型

先举个例子：

let types: string & number
// 很鸡肋，因为没有类型满足 types

真正有用的例如将多个接口类型合并为一个类型

interface types1 {
    age: number,
    name: string
}

interface types2 {
    sex: string
}

type types = types1 & types2;

const obj: types = {
    age: 10,
    name: 'remons',
    sex: 'man'
}

类型别名

用来给一个类型起个新名字。类型别名常用于联合类型

接口

interface types {
    age: number,
    name: string
}

赋值时，变量形状须和接口形状保持一致

类型别名和接口的区别

语法

// type
type ManType = {
  age: number,
  name: string
}

type SetMan = (age: number, name: string) => void

// interface
interface ManType {
  age: number,
  name: string
}

interface SetMan {
  (age: number, name: string): void
}

类型别名作用于其他类型

type Name = string;
type Age = number;
type ArrType = [number, string];

接口可定义多次

interface ManType {
  name: string
}

interface ManType {
  age: number
}

扩展方式

// type
type ManType1 = {
    name: string
}

type ManType = ManType1 & {
    age: number
}

// interface
interface ManType1 {
    name: string
}

interface ManType extends ManType1 {
    age: number
}

// type 和 interface 可互相扩展，但都是用各自的语法

可选和只读属性

interface types {
    readonly age: number,
    name?: string
}

const obj: types = {
    age: 10
}

obj.age = 100 // Cannot assign to 'age' because it is a read-only property

任意属性

interface types {
    name: string;
    age?: number;
    [propName: string]: any;
}

// if 
// interface types {
//    name: string;
//    age?: number;
//    [propName: string]: string;
// }
// 一旦定义任意属性，确定属性和可选属性的类型都必须是它的类型的子集

const obj: types = {
  	name: 'remons',
  	sex: 'man'
}

鸭式辨型法

具有鸭子特征的认为它就是鸭子，也就是通过制定规则来判定对象是否实现这个接口

interface Label {
    label: string
}

function logLabel(obj: Label) {
    console.log(obj.label)
}

const obj = {
    label: 'remons',
    value: 1
}
logLabel(obj) // 'remons'
// 会根据类型推论为 { label: string, value: number }, 参照鸭式辨型法，都具有 label

logLabel({ label: 'remons', value: 1 }); // err
// 相当于直接使用 Label 接口类型定义