TypeScript+VUE3之TS中的复杂的数据类型声明

1,311

TS中的对象类型声明

let a:object;   //这就表示声明一个变量,类型为object,也就是说a只能用来报存一个对象

//object表示一个对象

a={};

a=function(){};

//这样用不实用,因为在js中对象太多了,一切皆为对象。

//我们更多的想限制对象中有哪些属性

let b:{name:string};//这样写表示声明一个变量b 类型为对象,对象中只能有一个属性为名为name且属性值的类型为string

b={};//提示报错

b={name:'小明'};//这样写  才正确

用来指定对象中可以包含哪些属性

语法:

    {属性名:属性值,属性名1:属性值1}

注意当我们通过这种方式指定对象的时候,你写的这个对象必须要这个要求指定对象的格式必须一模一样

    情景一:我们指定的对象它必须包含一个name,但是还有age和sex这个俩个变量是可能有可能有没有的,这种情况我们该怎样做呢?

这种情况下我我们在属性名后面加个?,它就表示这个属性可选,既可以有也可以无;

例如

let b:{name:string,age?:number,sex?:string};

b={name:'帆哥'};

b={name:'小帆',age:12};

情景二:当我们只知道我们必须有的属性,而其他的不必须我们不知道,我们该怎么处理呢?

我们可以通过下面这个方式实现

let b:{name:string,[propName:string]:unknown};

//这就表示我们指定b中存储的类型是对象,并且这个对象必须含有一个name的属性,类型为string,这个对象还可以有其他可选属性,只要属性名满足是字符串,属性值是unknown即可

[propName:string]:

    propName:这个任意命名,就表示属性的名字,这个属性名字的类型是string。js中属性名一般都是用string定义
    
    [propName:string]:unknown;合起来就代表属性名为string类型,为可选的并且这个属性的值为unknown类型

TS中数组类型声明

TS我们可以通过
let e:string[];//声明一个数组
string[];//表示字符串数组
e=['a','b','xdclass',1];//但是你存一个TS解析器就是提示报错
再创建一个number型的数组
let d:number[];
boolean型的数组
let e:boolean[];
​
另外一种数组的声明方式
​
let e:Array<number>;

​
数组类型声明的语法:
    第一种:
        let 变量名:类型名[];
    第二种:
        let 变量名:Array<类型名>;
        
        
假如你还想创建一个能存储任意类型的数组。怎么办呢?
可以这样做
let e:Array<any>;
let e:any[];

TS中的扩展类型tuple

1、tuple:叫做元组

2、什么是元组呢?

元组就是定长的数组。(就代表数组中的数量是固定的就叫做元组,元组的存储效率比较好点,因为元组是固定,不会出现扩容的现象,所有效率会好点)

使用场景:

就是数组的数量是固定的,这时候用元组是比较好的选择。

3、元组怎么写呢?

let h:[string,string];//这就表示我定义一个元组,在这个元组中有两个,第一个值是string类型。第二个值也是string
//定义的时候多一个少一个也不行,必须按照声明的结构定义数组,不然TS解析器就会提示报错
​
h=['xdclass','net'];
元组书写语法:[类型,类型,类型];//这个不会特别长,元素多的话还是用数组
​
ok这就是TS中的元组