当前位置：首页 > news >正文

极简TypeScript教程--数据类型

news 文章来源：https://blog.csdn.net/ting4937/article/details/129079734 2024/11/9 10:12:31

TypeScript最大的特点就是有类型检测，格式为

let/const 标识符: 数据类型 = 赋值;

例子:

let msg: string = 'Hello World'

这样msg这个变量就有了字符串类型,如果再给他赋值为数字类型，就会在编译期报错。

变量的类型推导

在开发中，有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型，我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型

let msg = 'Hello' // 没有显示申明变量类型，由第一次赋值确定类型

上面代码没有显示申明变量类型，但是ts可以推导出msg为字符串类型，再赋值为数字类型就会报错

number类型

ts中整数和浮点数都是number类型，还可以用二进制，16进制等表示方式

let num: number = 100 // 整数
num = 6.6 // 浮点数
console.log(num)
// 其他进制表示
num = 100 // 十进制
num = 0b110 // 二进制
num = 0xf23 // 十六进制
console.log(num)

boolean类型

boolean类型就两个值，true和false

let flag: boolean = true
flag = false

string类型

string类型是字符串类型，可以使用单引号或者双引号表示,同时也支持ES6的模板字符串来拼接变量和字符串

let message: string = 'Hello World' // 字符串可以使用单引号或者双引号表示
const personName = "cloud"
const personAge = 18
const info = `my name is ${personName}, age is ${personAge}` // 支持模板字符串来拼接变量

Array类型

数组的定义非常简单，有两种方式

const names: string[] = ['a', 'b', 'c'] // 普通方式
const names2: Array<string> = ['a', 'b', 'c'] // 泛型方式

以上代码表示数组里面的类型是字符串，如果插入其他类型的元素会报错

函数的参数类型

函数是JavaScript非常重要的组成部分，TypeScript允许我们指定函数的参数和返回值的类型。

参数的类型注解

声明函数时，可以在每个参数后添加类型注解，以声明函数接受的参数类型：

// greet函数只接受字符串类型的参数
function greet(name: string) {console.log('Hello ' + name)
}

函数的返回值类型

我们也可以添加返回值的类型注解，这个注解出现在函数列表的后面：

// 该函数返回值为number类型
function sum(num1: number, num2: number): number {return num1 + num2
}

和变量的类型注解一样，我们通常情况下不需要返回类型注解，因为TypeScript会根据 return 返回值推断函数的返回类型,某些第三方库处于方便理解，会明确指定返回类型，看个人喜好

匿名函数的参数

匿名函数与函数声明会有一些不同,当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时,该函数的参数会自动指定类型；

// names数组是string类型的，在该数组forEach循环时，
// 可以推断出item也是string类型的
const names = ['cloud', 'tifa', 'alice']
names.forEach(item => {console.log(item.toUpperCase())
})

我们并没有指定item的类型，但是item是一个string类型，这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型，这个过程称之为上下文类型（contextual typing），因为函数执行的上下文可以帮助确定参数和返回值的类型

对象类型

如果我们希望限定一个函数接受的参数是一个对象，这个时候要如何限定呢？我们可以使用对象类型；

// 传入的对象有两个属性,x和y，并且类型是number
function printCoordinate(point: { x: number, y: number }) {console.log(point.x, point.y)
}printCoordinate({x: 10, y: 30})

在对象我们可以添加属性，并且告知TypeScript该属性需要是什么类型,每个属性的类型部分是可选的，如果不指定，那么就是any类型

可选类型

对象类型也可以指定哪些属性是可选的，可以在属性的后面添加一个?：

// 传入的对象有两个属性,x和y，并且类型是number,z不是必传
function printCoordinate(point: { x: number, y: number, z?: number }) {console.log(point.x, point.y)
}

any类型

在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用any类型,我们给一个any类型的变量赋值任何的值，比如数字、字符串的值；

let a: any = 'cloud'
a = 123
a = true
const aArray: any[] = ['a', 1, false]

unknown类型

unknown是TypeScript中比较特殊的一种类型，它用于描述类型不确定的变量。和any类型有点类似，unknown可以赋任何类型的值，与any不同的是，any任何操作都是合法的，但是unknown类型的值上做任何事情都是不合法的。

let val: unknown
// 使用val.length属性报错，因为编译器不知道val的类型，不合法
console.log(val.length) 
// 操作unknown类型前需要类型判断，确定是字符串类型才能使用length属性
if(typeof val === 'string') {console.log(val.length)
}

void类型

void通常用来指定一个函数是没有返回值的，那么它的返回值就是void类型，这个函数我们没有写任何类型，那么它默认返回值的类型就是void的，我们也可以显示的来指定返回值是void：

function sum(num1: number, num2: number): void {console.log(num1 + num2)
}

tuple类型

tuple(元组类型)跟数组有点类型，都可以通过下标的方式访问元素，与数组不同的地方是,数组中通常建议存放相同类型的元素，不同类型的元素是不推荐放在数组中。

// 使用元组保存个人信息，第一个是姓名，第二个是年龄，第三个是体重
const info: [string, number, number] = ['cloud', 18, 60]
// 使用下标访问
console.log(info[0])