文章目录
概要
本文主要介绍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 * 100
const str = arg1
return [count]
}
fn(123, "wuu")
export {}
- 函数的返回值类型
◼ 我们也可以添加返回值的类型注解，这个注解出现在函数列表的后面：
// 箭头函数定义返回值类型 例：数字数组
const fn1 = (arg: number): number[] => {
const count = arg * 100
return [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类型为number
console.log(item, index);
})
export {}
- 函数参数为对象类型
// 定义对象类型
type PointType = {
x: number
y: 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中常用的数据类型
由于作者水平有限
如果对本文有任何疑问可以私信或者评论区发表你的看法
本文如果对你有帮助，麻烦点个赞和收藏方便回看，点点关注 谢谢
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
