厦门网站制作全程服务,南沙区交通和建设局网站,韶关做网站的,网站的开发方式文章目录 概要TS的数据类型1.基础类型-- 简单的类型-- Array类型-- Object类型- 可选类型 -- Function类型- 函数的参数类型- 函数的返回值类型- 匿名函数的参数- 函数参数为对象类型- 函数的调用签名- 函数的构造签名(了解)- 剩余参数- 函数的重载(了解)- 函数的this(了解) 2.… 文章目录 概要TS的数据类型1.基础类型-- 简单的类型-- Array类型-- Object类型- 可选类型 -- Function类型- 函数的参数类型- 函数的返回值类型- 匿名函数的参数- 函数参数为对象类型- 函数的调用签名- 函数的构造签名(了解)- 剩余参数- 函数的重载(了解)- 函数的this(了解) 2.TS类型-- any类型-- unknown类型-- void类型-- never类型了解-- tuple类型- 使用场景 -- 枚举类型 小结 概要
本文主要介绍Typescript中常用的数据类型
TS的数据类型
1.基础类型
– 简单的类型
number类型
let num: number 123string类型
let str: string 123boolean类型
let bol: boolean false– Array类型
// 数组进行类型注解的俩种方式
// 1. 类型[] 例string[]
// 2. ArrayT 例Arraystring let arr: string[] [string]
// arr.push(123) 报错
// 因为arr内容被限制为字符串数组let arr1: Arraynumber [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类型为stringindex类型为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 wuucalc(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 stateTypeT [T, () void];// 将函数的返回值类型定义为元组类型
const fn T(state: T): stateTypeT {const value state;const newValue () {};return [value, newValue];
};// 定义泛型T为number类型
const [value, newValue] fnnumber(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中常用的数据类型 由于作者水平有限 如果对本文有任何疑问可以私信或者评论区发表你的看法 本文如果对你有帮助麻烦点个赞和收藏方便回看点点关注 谢谢
