Typescript中常用的数据类型

概要

本文主要介绍Typescript中常用的数据类型

TS的数据类型

1.基础类型

– 简单的类型

• number类型

let num: number = 123

• string类型

let str: string= '123'

• boolean类型

let bol: boolean= false

– Array类型

// 数组进行类型注解的俩种方式
// 1. 类型[] 例：string[]
// 2. Array<T> 例：Array<string> let arr: string[] = ['string']
// arr.push(123) 报错
// 因为arr内容被限制为字符串数组let arr1: Array<number> = [123] export {}

– Object类型

- 可选类型

• 在可选的属性后面加一个？

// 俩种申明对象注解的方式
// 使用type或者interface（后面有详解）type objInfo = {name: string,age: number,height?: number
}const obj: objInfo = {name: 'wuu',age: 20
}export {}

– Function类型

- 函数的参数类型

• TS对传入的函数类型的参数不进行检测

◼ TypeScript允许我们指定函数的参数和返回值的类型。

◼ 参数的类型注解

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

const fn = (arg: number, arg1: string): number[] => {const count = arg * 100const str = arg1return [count]
}fn(123, "wuu")export {}

- 函数的返回值类型

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

// 箭头函数定义返回值类型 例：数字数组
const fn1 = (arg: number): number[] => {const count = arg * 100return [count]
}// res1类型为number[]
const res1 = fn1(123)// 普通函数定义返回值类型  例：字符串
function fn2(): string {return 'wuu'
}// res2类型为string
const res2 = fn2()export {}

◼ 和变量的类型注解一样，我们通常情况下不需要返回类型注解，因为TypeScript会根据 return 返回值推断函数的返回类型：

 某些第三方库处于方便理解，会明确指定返回类型，看个人喜好；

- 匿名函数的参数

◼ 匿名函数与函数声明会有一些不同：

 当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时；

 该函数的参数会自动指定类型；

// 匿名函数，不需要指定参数类型
// 因为匿名函数基本上是作为参数传递到函数中
// 会根据上下文自动推断参数类型// 例子
const arr: string[] = ['wuu', 'xi', 'wei']arr.forEach((item, index) => {// 自动就知道item类型为string，index类型为numberconsole.log(item, index);
})export {}

- 函数参数为对象类型

// 定义对象类型
type PointType = {x: numbery: number// z为可选类型z?: number
}// 限制参数对象必须是PointType类型
const fn = (point: PointType) => {console.log(point.x);console.log(point.y);
}// fn(123) 报错，没有x和y属性
fn({x: 10, y: 20})export {}

- 函数的调用签名

◼ 在 JavaScript 中，函数除了可以被调用，自己也是可以有属性值的。

 然而前面讲到的函数类型表达式并不能支持声明属性；

 如果我们想描述一个带有属性的函数，我们可以在一个对象类型中写一个调用签名（call signature）；

• 把函数当成对象来使用，需要函数里有属性
• 函数里有一些自带的属性，如name（为当前的函数名）

interface ICalcFn {age: string() : number
}function calc(calcFn:ICalcFn){console.log(calcFn());console.log(calcFn.age);}function fn() {return 123
}
fn.age = 'wuu'calc(fn)export {}

- 函数的构造签名(了解)

ts的day2 159

- 剩余参数

function fn(...args:number[]){//[ 1, 2, 3 ]console.log(args);}fn(1,2,3)export {}

- 函数的重载(了解)

ts的day2 161

- 函数的this(了解)

ts的day2 163和前面一节的内容

2.TS类型

– any类型

◼ 在某些情况下，我们确实无法确定一个变量的类型 ， 并且可能它会发生一些变化, 这个时候我们可以使用 any类型 （类似于Dart 语言中的dynamic类型）。

◼ any类型有点像一种讨巧的TypeScript手段：

 我们可以对any类型的变量进行任何的操作，包括获取不存在的属性、方法；

 我们给一个any类型的变量赋值任何的值，比如数字、字符串的值；

– unknown类型

◼ unknown是TypeScript中比较特殊的一种类型，它用于描述类型不确定的变量。

 和any类型有点类似，但是unknown类型的值上做任何事情都是不合法的；

// 进行任何操作都是非法的，必须进行类型缩小
let info: unknown = "123"// 可以赋值,但是不能进行其他操作
info = 123// console.log(info.length);  报错
// 因为不能进行任何除了赋值外的任和操作
// 需要进行类型缩小if(typeof info === 'string'){// 类型缩小后就可以操作console.log(info.length)
}

– void类型

• 一个函数没有返回值，那么它的返回值就是void类型

// void用来指定函数没有返回值时，返回值类型就是void// 使用场景计算给函数指定类型type fnType = () => void// 没有返回值，并且函数类型是fnType
const fn: fnType = () => {}

– never类型（了解）

◼ never 表示永远不会发生值的类型，比如一个函数：

 如果一个函数中是一个死循环或者抛出一个异常，那么这个函数会返回东西吗？

 不会，那么写void类型或者其他类型作为返回值类型都不合适，我们就可以使用never类型；

– tuple类型

◼ 那么tuple和数组有什么区别呢？

 首先，数组中通常建议存放相同类型的元素，不同类型的元素是不推荐放在数组中。（可以放在对象或者元组中）

 其次，元组中每个元素都有自己特性的类型，根据索引值获取到的值可以确定对应的类型；

- 使用场景

◼ 那么tuple在什么地方使用的是最多的呢？

 tuple通常可以作为返回的值，在使用的时候会非常的方便；

 此时可以知道返回值数组里面的对应类型都知道

// 定义元组类型
type stateType<T> = [T, () => void];// 将函数的返回值类型定义为元组类型
const fn = <T>(state: T): stateType<T> => {const value = state;const newValue = () => {};return [value, newValue];
};// 定义泛型T为number类型
const [value, newValue] = fn<number>(123)// 此时value和newValue都有明确类型
// 在使用时很安全

– 枚举类型

◼ 枚举类型是为数不多的TypeScript特性有的特性之一：

​  枚举其实就是将一组可能出现的值，一个个列举出来，定义在 一个类型中，这个类型就是枚举类型；

​  枚举允许开发者定义一组命名常量，常量可以是数字、字符串 类型；

◼ 枚举类型默认是有值的，比如上面的枚举，默认值是从0开始 的：

◼ 我们也可以给他们赋值其他的类型的值：

// 默认值从0开始递增
// 此时left为0、up为1
enum Direction {Left,Up,Down,Right
}// 给枚举定义值
enum Direction2 {Left = 'Left',Up = 'Up',Down = 'Down',Right = 'Right'
}const d: Direction = Direction.Up
console.log(d); // 1

小结

本文主要介绍Typescript中常用的数据类型
由于作者水平有限
如果对本文有任何疑问可以私信或者评论区发表你的看法
本文如果对你有帮助，麻烦点个赞和收藏方便回看，点点关注 谢谢