新手学习TS必须知道的知识点

87 阅读2分钟

TS约束写法

1. ts基本类型约束写法:字符串、数值、布尔、null、undefined、 any

// 字符串:
let str: string = '你好呀';
//   数值: 
let num: number = 123;
//  布尔: 
let bool: boolean = true;
// null: 
let nu: null = null
//  undefined: 
let ud: undefined = undefined;
//  any:  *** any:可以是任何类型
let an: any = true;

2. 数组约束写法

2.1 数组每一个成员必须是xx类型

let arr_1: number[] = [1, 2, 3, 4]
let arr_2: string[] = ['a', 'b', 'c']
let arr_3: Array<number> = [1, 2, 3]

2.2 数组中可能存在多个类型

这个不看位置
let arr4: (string | number)[] = [1, 'b']
严格按照位置排序的
let arr5: [number, string] = [1, 'b']

3.对象约束写法

实际上一般用interface来约束对象
let obj1: { a: number; b: number; c?: number; } = { a: 1, b: 2, c: 3 }

4.函数的约束写法

1.函数参数和返回值约束

function fn1(a: number, b: number): number {
    return a + b
}
fn1(1, 2)

2.函数可选参数

可选连可以在函数中使用也可以在对象里使用

function fn2(a: number, b?: number): number {
    if (b) {
        b = 123
    }
    return a
}
fn2(1, 2)

3.参数默认值

//b默认值是1
function fn3(a:number,b:number=1) {
    return a+b
}
fn3(1)

4.箭头函数

let fn4: (a: number, b: string) => string = (a:number,b:string)=>{
return a+b
}
fn4(1,'2')

5.viod 不返回结果的函数

function f(a: number, b: number): void {
    console.log(a + b);
}

泛型

定义

定义函数、接口或者类,使用时候再定义其类型,一般使用T来代指

interface Array<T>{
    // 就这个T就叫泛型,使用时候再确定其type
}

let arr6:Array<number>=[1,2,3]
let arr7:Array<string>=['w']

函数使用泛型

使用一个泛型

function fnt<T>(arg:T):T {
    return arg
}
fnt<number>(1)
fnt<string>('123')

使用多个泛型

这样传入的多个泛型

function fnt2<T,U>(a:T,b:U) {

}
fnt2<number,string>(1,'2')
fnt2<number[],string>([1,2,3],'2')

需求:参数必须要有length属性

interface IAr{
    length:number
}

function fnt3<T extends IAr>(arg:T) {
    return arg.length
}
fnt3<string>('hello')
fnt3<number[]>([1,2,3])
// 这样就都满足啦
fnt3<string[]>(['wi','ki'])

interface

定义

interface是自定义的约束结构
首字母I大写

interface Idata{
    msg:string,
    success:boolean,
    data:Object,
}

let data:Idata = {
    msg:'hello',
    success:true,
    data:{
        list:[
            {id:1,name:'wikey'}
        ]
    }
}

interface的继承

interface Idata{
    msg:string;
    success:boolean;
    data:Object;
}

interface Ires extends Idata{
    children:[]
}

let data1:Idata={
msg:'hello',
success:true,
data:{
    list:[
        {id:1,name:'wikey'}
    ]
}
}

在vue中的使用

axios的二次封装、api的解耦等

image.png