ts类型进阶~前言 这篇文章分享一下ts类型的一些小细节，一起往下看看吧~ 正文 数组 声明number类型的数组 声明

前言

这篇文章分享一下ts类型的一些小细节，一起往下看看吧~

正文

数组

怎么实现对数组声明类型呢？

• 声明number类型的数组

let arr: number[] = [1, 2, 3];

• 声明string或number类型的数组

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

还可以这样实现(泛型)：

let arr:Array<number | string> = [];

• 声明所有类型都可以的数组

let arr: any[] = [1, 'haha', true, null];

下面的代码在js是可以实现的

let arr = [];
arr.push(123);

但是在ts会报错：因为never类型是不能被赋值的

怎么设置数组只读不写呢？

const arr: readonly number[] = [1, 2];
arr[0] = 10;

如果我用push呢？

const arr: readonly number[] = [1, 2];
// arr[0] = 10;
arr.push(19);

还是不行哒~

那delete呢？

const arr: readonly number[] = [1, 2];
// arr[0] = 10;
// arr.push(19);
delete arr[0];

也还是不行哒~

那对于使用泛型的数组能用readonly吗？

let arr2: readonly Array<number> = [1, 2];

不行哒~

那怎么实现呢？

注意：泛型的只读R要大写~

let arr2: ReadonlyArray<number> = [1, 2];

怎么实现一个number类型数组传入string类型呢？

通过断言来实现(as语法）

const arr = [1, 2] as string[]; // 断言

这个时候会有个红线提示

那就定义类型unknown

const arr1 = [1, 2] as unknown[]; // 断言
arr1.push('1');

怎么定义不能修改呢？这里的const相当于readonly

const arr1 = [1, 2] as const; // 断言
arr1.push('1');

二维数组咋声明类型呢？

let arr: number[][] = [[1, 2], [3, 4]];

元组(特殊的数组)

可以包含多种类型

const arr: [number, string, boolean] = [1, '2', true];

注意[number, string, boolean]的顺序是固定的，元组与数组的区别就是数组类型声明写在方括号外面，元组写在里面，也就是

let a: number[] = [1];
let b: [number] = [1];

声明元组必须写类型

let a = [1, '2'];

识别出来是联合类型的数组，要声明为元组必须声明类型

let a: [number, string] = [1, '2'];

看下面一个例子

let a: (number | string)[] = [];
let b: [number , string] = [1];

元组会有提示，怎么解决呢？

加个？，也就是可选的意思(不确定)，注意？要放在后面，也就是不能前面不确定，后面确定，也就是必选元素不能放在可选元素后面，因为前面有说过类型声明的顺序是固定的嘛，你前面可选，如果你没写，顺序就错啦~

let a: (number | string)[] = [];
let b: [number , string?] = [1];

type关键字

...number[]剩余的为number类型

type Mytuple = [
    number, 
    string?, 
    boolean?,
    ...number[]];

let arr: Mytuple = [1, '2', true, 1, 2, 3, 4, 5, 6];

数组有只读，那元组只读怎么实现呢？

注意：[number, number]要一一对应，更严格

let a: readonly [number, number] = [1, 2];
a.push(2);

函数的类型推断

function foo(point: [number, number]) {
    if(point.length === 3) {

    }
}

因为定义了两个number类型，不存在长度为3的情况

这样就ok啦~

function foo(point: [number, number?]) {
    if(point.length === 1) {

    }
}

symbol

unique symbol类型的数据必须使用const声明

const x: unique symbol = Symbol();

相当于

const x = Symbol();

函数类型

根据返回值的类型，无返回值，为void类型

function foo() {
    let a = 1;
    return a;
}

函数形参类型声明：

function foo(fn: Function) {

}

function bar() {

}

foo(bar);

函数形参

函数形参的可选参数、默认参数怎么实现？

注意：默认参数和可选不可同时使用！！！

function foo(x: number = 1, y？: number) {

}

foo(1, 2);

元组形式

function foo(x: number = 1, y?: number): [number, number?] {
    return [x, y];
}

foo(1, 2);

函数形参为对象

function foo({a, b, c}: {a: number, b: number, c:number}) {

}

foo({a:1, b: 2, c: 3});

函数参数不定

function foo(...args: number[]) {

}

foo(1, 2, 3);

元组写法

function foo(...args: [number, number, number]) {

}

foo(1, 2, 3);

函数参数只读：

function foo(arg: readonly number[]) {
    arg.push(1);
}

foo([1])

函数重载

当需要根据参数类型的不同执行不同的逻辑操作

举个反转函数的例子

// 函数重载  --- 当需要根据参数类型的不同执行不同的逻辑操作
function reverse(str: string): string
function reverse(str: number[]): number[]
function reverse(str: string | number[]): string | number[] {
    if(typeof str === 'string') {
        return str.split('').reverse().join('');
    } else {
        return str.slice().reverse();
    }
    
}

reverse('acvc');
reverse([1, 2, 3]);

对象

对象类型声明

const obj: {a: number, b: number} = {a: 1, b: 2};

设置可选

const obj: {a: number, b?: number} = {a: 1};

还可以通过下面的声明对象类型：

const obj1: object = {a: 1};
const obj2: Object = {a: 1};

但是修改和添加会报错：