TypeScript不学?你养我啊[2]

129 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第6天,点击查看活动详情

引用数据类型

object

如下都是object对象数据类型。

let a = {'name':'test'}
let fun = function(){}

但是,如果我们如下使用object来做类型约束。就显得没什么用,因为太宽泛了,万物皆对象

let a:object

{}来指定对象中的属性

如下这个对象中有name属性,并且类型需要时字符串类型。

let b :{name:string}

只有给name属性赋值、并且是字符串的值。才不会报错。

b = {
    name:'sun'
}

如果为空对象,则会报错。(并且属性添加多了肯定也会报错)

image.png

问题来了

如果还有一个age属性,有的情况有、有的情况没有怎么办?如下在冒号前加一个问号,表示这个属性是可选的。

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

那么问题又来了

如果我有多个不确定的值。我们可以这么写 [propName:string]:any 中括号里的 propName是属性名、随便写的,写什么都可以。:string属性名的类型是 stringany 表示任意类型的属性

// 字符串属性名,任意类型属性
let cs : {name:string,[propName:string]:any}
cs = {name:'sss', age:1, sex:'female'}

函数

如下这种类型约束,与 :object一样,太宽烦了。

let fun :Function

我们使用下面,类似箭头函数的写法

let fun1 : (aa:number,bb:number)=>number

在给fun1赋值的时候,参数类型、返回值类型还是需要再约束的。

语法: (形参:类型,形参:类型...)=> 返回值

fun1 = function(n1:number,n2:number):number{return n1+n2}

array 数组

为了性能来说,我们数组中大部分存储的是同类型的值。

表示方式1 []

如下,字符串类型的数组

let str_arr:string[]
str_arr = ['1','2','3']

如下,数值类型的数组

let num_str:number[]
num_str = [1,2,3]

表示方式2 Array

语法

Arrray<数据类型>

有点像Java

let arr:Array<number>

Ts新增类型

相较于JS而言,TS新增几种类型。

tuple 元组

元组,其实就是固定长度的数组。当你的数据中元素时固定的时候,最好使用元组。

python语言中也有元组,写法是tuple = (1, 2, 3, 4, 5, 6, 7 ),当然这是句废话。

如下,表示需要两个元素,类型都是string

let tuple:[string,string]
tuple = ['a','b']

而这个,表示需要两个元素,类型分别是string和number

let tuple1:[string,number]
tuple1 = ['c',1]

enum 枚举

这个对象中包含name和sex两个属性。但是啊,我们作为性别,我们项目中不会存字符串的 '男'或者'女'(这里也有对数据库存储的内存的一些考虑)。我们大部分是存 0 或 1,但是前端展示的时候又要使用字符串的 '男'或者'女'。

let i :{name:string,sex:string}
i = {
    name:'李四',
    sex:'女'
}
  • 使用enum关键字定义一个枚举值 Sex
  • 在对象i中,给sex约束类型为我们定义好的枚举值
  • 给对象i赋值事,sex的值就赋值0或1
enum Sex{
    male=0,
    female=1
}
let i :{name:string,sex:Sex}
i = {
    name:'李四',
    sex:0
}

在前端先展示的时候你可以通过 if else判断是male或female 然后赋值展示男或女。但是我这里还是想用枚举的话就像如下的写法

我们定义一个对象。把枚举的Sex.male作为键

  • [Sex.male] 这里在计算属性属性名,Sex.male对应的也就是0
const SexText = {
    [Sex.male] : '男',
    [Sex.female] : '女'
}
let show = SexText[0]

类型的别名

类型的别名,就相当于SQL语句给查到的字段as起别名一个道理。

  • 如下使用了type关键字
  • myType就是我起的类型名
  • 把string赋值给myType,那么myType现在就代表字符串类型
type myType = string;
let m:myType

image.png

当然,给string类型起别名,毫无意义。

用处来了

下面两个变量的类型都是 1|2|3|4|5 也就是值必须是这五个数字中的一个。这种或的写法,也可以在结合枚举使用。这时我们可以给1|2|3|4|5 起别名。

let k:1|2|3|4|5
let j:1|2|3|4|5
let range = 1|2|3|4|5
let k:range
k = 5
k = 6   //此时就会报错了