Typescript数据类型声明方式及注意事项

javascript数据类型有:
string、number、boolean、array、object、null、undefined、symbol、bigInt

Typescript数据类型有:
string、number、boolean、array、object、null、undefined、symbol、any、Tuple(元组)、enum(枚举)、void、never

Typescript 相较于 javascript,编写时加上了数据类型声明,代码编写时更严谨,可以在编写时发现一些编写错误,例如数据赋值时数据类型错误等

Typescript 特有数据类型

Typescript 相对于 javascript 多以下数据类型:
any、Tuple(元组)、enum(枚举)、void、never

any - - - 如果不确定数据类型,可以先写成 any 类型
Tuple(元组) - - - 类似数组,但是元组定义了数据类型后,实现的数据需要按定义的数据顺序写
enum(枚举) - - - 常用于列出多个可选值
void - - - 常用于声明函数没有返回值
never - - - 表示永不存在的值的类型

Typescript 声明变量格式:
let 变量名:数据类型 = 值

javascript 声明变量格式:
let 变量名 = 值

Typescript 相较于 javascript,多了“:数据类型” 的限制,也可以不写,不写的话,会将数据类型自动推断成 “any” 类型

Typescript数据类型声明格式

示例:


// string
let username:string = '史迪仔'

// number
let num:number = 1

// boolean
let flag1:boolean = true
let flag2:boolean = false

// array
let arr1:Array<number> = [1, 2, 3]
let arr2:Array<string> = ['1', '2', '3']
let arr3:Array<any> = ['1', 2, '3', false]
let arr4:number[] = [4, 5, 6]
let arr5:string[] = ['4', '5', '6']
let arr6:any[] = [true, '5', 6]

// object
let obj:Object = {
    
    name: 'xiaoixiao'}

// null
let b:null = null

// undefined
let a:undefined = undefined

// symbol
let sym:symbol = Symbol(1)

// any
let x:any = 'lalala'

// Tuple(元组)
let tuple:[string, number] = ['have a nice day', 888]

// enum(枚举)
enum Colors {
    
    
  green,
  red,
  blue
}
enum Colors2 {
    
    
  green = 'a',
  red = 6,
  blue
}

// void
let c:void = null
let d:void = undefined

// never
let e:never

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    
    
  throw new Error(message);
}

typescript 数据类型赋值注意事项

1、any 类型最大,可以包含其他所有类型的,其他类型的数据都可以赋值给 any 类型

2、void 通常同于声明函数没有返回值
例如:

function fn(): void {
    
    
  console.log(1);
}

void 用来声明变量时,只能给其赋值 null和undefined

3、默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。

4、元组就是设置了类型顺序的数组,需要按声明的类型数据顺序填充数据

否则会报错,如下所示:
在这里插入图片描述
5、enum枚举 可以值,也可以不写,不写的话会默认从0依次往后赋值,0、1、2、3…
如果赋值为 number 数值类型,可以反向根据值读取到键名;
如果值是 字符串类型,则不能通过值读取到键名

如图所示:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_39111074/article/details/131983099