TS 常用类型

news2024/11/24 12:05:49

我们经常说TypeScript是JavaScript的一个超级

 

TypeScript 常用类型

  • TypeScript 是 JS 的超集,TS 提供了 JS 的所有功能,并且额外的增加了:类型系统
    • 所有的 JS 代码都是 TS 代码
    • JS 有类型(比如,number/string 等),但是 JS 不会检查变量的类型是否发生变化,而 TS 会检查
  • TypeScript 类型系统的主要优势:可以显示标记出代码中的意外行为,从而降低了发生错误的可能性
  1. 类型注解
  1. 常用基础类型

类型注解

语法:

声明了类型后TypeScript就会进行类型检测,声明的类型可以称之为类型注解

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

示例代码:

let age: number = 18

  • 说明:代码中的 : number 就是类型注解
  • 作用:为变量添加类型约束。比如,上述代码中,约定变量 age 的类型为 number 类型
  • 解释:约定了什么类型,就只能给变量赋值该类型的值,否则,就会报错
  • 错误演示:
// 错误代码:
// 错误原因:将 string 类型的值赋值给了 number 类型的变量,类型不一致
let age: number = '18'

常用基础类型

可以将 TS 中的常用基础类型细分为两类:1 JS 已有类型 2 TS 新增类型

  1. JS 已有类型
    • 原始类型:number/string/boolean/null/undefined/symbol
    • 对象类型:object(包括,数组、对象、函数等对象)
  1. TS 新增类型
    • 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any 等
  • 注意:
    1. 原始类型在 TS 和 JS 中写法一致
    2. 对象类型在 TS 中更加细化,每个具体的对象(比如,数组、对象、函数)都有自己的类型语法

原始/基本类型

  • 原始类型:number/string/boolean/null/undefined/symbol
  • 特点:简单,这些类型,完全按照 JS 中类型的名称来书写
//数字
let age: number = 18

// 字符串
let myName: string = '老师'
const name: string = 'zs'
const age: number = 20
const info = `my name is ${name}, age is ${age}`
console.log(info); // my name is zs, age is 20

//布尔
let isLoading: boolean = false
let flag: boolean = true
flag = false
flag = 20 > 30 // flase


//在 JavaScript 中,undefined 和 null 是两个基本数据类型。
// 在TypeScript中,它们各自的类型也是undefined和null,也就意味着它们既是实际的值,也是自己的类型
// null
let n: null = null

// undefined
let u: undefined = undefined

// symbol
const title1 = Symbol("title")
const title2 = Symbol("title")
let info = {
    [title1]: '123',
    [title2]: '456'
}

注意:

TypeScript也是支持二进制、八进制、十六进制的表示:

let num1: number = 100 // 十进制(默认)
let num2: number = 0b111 // 二进制
let num3: number = 0o456 // 八进制
let num4: number = 0xf23 // 十六进制

数组类型

  • 数组类型的两种写法:
    • 推荐使用 number[] 写法
// 写法一:原始写法
let numbers: number[] = [1, 3, 5]

// 写法二:泛型写法
let strings: Array<string> = ['a', 'b', 'c']

//写法三 通过any方式定义数组中存放任意的值
let arr: any[] = [1,'2',true]

// 数组和对象结合:要满足数组里面是对象的格式
let json: {username: string, age: number}[]=[{username: 'zs', age: 14}]

注意事项:在真实的开发中,数组一般存放相同的类型,不要存放不同的类型

元组类型

元组类型(tuple)属于数组类型中一种,元组类型规定了数组的长度、数组中数据类型的顺序

一旦规定了元组类型,那么数组里面的数据类型必须按照规定的顺序排列,并且长度也必须按照元组中的长度取存放

  • 场景:在地图中,使用经纬度坐标来标记位置信息
  • 可以使用数组来记录坐标,那么,该数组中只有两个元素,并且这两个元素都是数值类型 number[]
let position: number[] = [116.2317, 39.5427]
  • 使用 number[] 的缺点:不严谨,因为该类型的数组中可以出现任意多个数字
  • 更好的方式:元组 Tuple
  • 元组类型是另一种类型的数组,它确切地知道包含多少个元素,以及特定索引对应的类型
let position: [number, number] = [39.5427, 116.2317]
  • 解释:
    1. 元组类型可以确切地标记出有多少个元素,以及每个元素的类型
    2. 该示例中,元素有两个元素,每个元素的类型都是 number

那么tuple(元祖)和数组区别:

  • 数组中通常建议存放相同类型的元素,不同类型的元素是不推荐放在数组中
  • 元组中每个元素都有自己特性的类型,根据索引值获取到的值可以确定对应的类型

应用场景:

tuple(元祖)通常可以作为返回的值,在使用的时候会非常的方便;

function useState<T>(state: T) :[T, (newState: T) => void] {
  let currentState = state
  const changeState = (newState: T) => {
    currentState = newState
  }

  return [currentState, changeState]
}
const [counter, setCounter] = useState(10)

枚举类型

  • 枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值
  • 枚举:定义一组命名常量。它描述一个值,该值可以是这些命名常量中的一个
  • enum类型是对JavaScript的标准数据类型的补充,比如:支付状态:0:失败,1:成功,2:超时
// 创建枚举
enum Direction { Up, Down, Left, Right }

// 使用枚举类型
function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时,需要应该传入:枚举 Direction 成员的任意一个
// 类似于 JS 中的对象,直接通过 点(.)语法 访问枚举的成员
changeDirection(Direction.Up)
  • 解释:
    1. 使用 enum 关键字定义枚举
    2. 约定枚举名称以大写字母开头
    3. 枚举中的多个值之间通过 ,(逗号)分隔
    4. 定义好枚举后,直接使用枚举名称作为类型注解

数字枚举
  • 问题:我们把枚举成员作为了函数的实参,它的值是什么呢?
  • 解释:通过将鼠标移入 Direction.Up,可以看到枚举成员 Up 的值为 0
  • 注意:枚举成员是有值的,默认为:从 0 开始自增的数值
  • 我们把,枚举成员的值为数字的枚举,称为:数字枚举
  • 当然,也可以给枚举中的成员初始化值
// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }

enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }

字符串枚举
  • 字符串枚举:枚举成员的值是字符串
  • 注意:字符串枚举没有自增长行为,因此,字符串枚举的每个成员必须有初始值
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

使用枚举解决固定的数据:

enum fullyear {
    spring = 0,
    summer = 1,
    autom = 2,
    winter = 3
}

console.log(fullyear.spring);
console.log(fullyear['0']);

一旦用枚举定义了数据,那么这个数据是不能被修改的,也不能增加额外的属性。

enum fullyear2 {
    spring = '0',
    summer = '1',
    autom = '2',
    winter = '3'
}

console.log(fullyear2.autom);
console.log(fullyear2['2']); // 报错,不存在2

如果enum中的值是字符串,那么只能通过左侧的属性进行访问,不能通过右侧的值去访问。

什么数据需要用到枚举?

  • 固定的数据可以用枚举去写。
  • 一年四季
  • 一年12个月
  • 性别
  • 一周七天

枚举实现原理
  • 枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一
  • 因为:其他类型仅仅被当做类型,而枚举不仅用作类型,还提供值(枚举成员都是有值的)
  • 也就是说,其他的类型会在编译为 JS 代码时自动移除。但是,枚举类型会被编译为 JS 代码
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

// 会被编译为以下 JS 代码:
var Direction;

(function (Direction) {
  Direction['Up'] = 'UP'
  Direction['Down'] = 'DOWN'
  Direction['Left'] = 'LEFT'
  Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})
  • 说明:枚举与前面讲到的字面量类型+联合类型组合的功能类似,都用来表示一组明确的可选值列表
  • 一般情况下,推荐使用字面量类型+联合类型组合的方式,因为相比枚举,这种方式更加直观、简洁、高效

any 类型

在某些情况下,我们确实无法确定一个变量的类型,并且可能它会发生一些变化,这个时候我们可以使用any类型

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

  • 我们可以对any类型的变量进行任何的操作,包括获取不存在的属性、方法
  • 我们给一个any类型的变量赋值任何的值,比如数字、字符串的值

let a: any = '123'
a = 14
a = true
a = null
a = undefined
const arr: any[] = ['1', 2, 1.8, true]

如果对于某些情况的处理过于繁琐不希望添加规定的类型注解,或者在引入一些第三方库时,缺失了类型注解,这个时候我们可以使用any:

  • 包括在Vue源码中,也会使用到any来进行某些类型的适配
  • unknown是TypeScript中比较特殊的一种类型,它用于描述类型不确定的变量
  • unknown类型只能赋值给any和unknown
  • any类型可以赋值给任意类型

  • 原则:不推荐使用 any! 这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
  • 因为当值的类型为 any 时,可以对该值进行任意操作,并且不会有代码提示
let obj: any = { x: 0 }

obj.bar = 100
obj()
const n: number = obj
  • 解释:以上操作都不会有任何类型错误提示,即使可能存在错误
  • 尽可能的避免使用 any 类型,除非临时使用 any 来“避免”书写很长、很复杂的类型
  • 其他隐式具有 any 类型的情况
    1. 声明变量不提供类型也不提供默认值
    2. 函数参数不加类型
  • 注意:因为不推荐使用 any,所以,这两种情况下都应该提供类型

在项目开发中,尽量少用any类型

unknown 类型

未知类型

要想使用该类型进行相关操作时必须要进行类型校验

示例 1:

let foo: unknown = 'aaa'
foo = 123
// 类型校验--类型缩小
if(typeof foo = 'string'){
  ....   
}

示例2:

// unknown 类型
let a: unknown = 'hello';
a = 123
console.log(a); // 123
// any 是不进行检测了,但是unknown使用的时候,TS默认会进行检测
// 使用类型断言,告诉a就是一个数组,不需要进行检测了
(a as []).map(()=>{})

unknown 类型和  any 类型的区别在于:

  • unknown 做任何事情都是不合法的,必须要通过类型校验才可以进行其他操作
  • any 做任何事情都是合法的,无需校验

联合类型

  • TypeScript的类型系统允许我们使用多种运算符,从现有类型中构建新类型
  • 联合类型是由两个或者多个其他类型组成的类型,类型之间进行或的操作
  • 表示可以是这些类型中的任何一个值
  • 联合类型中的每一个类型被称之为联合成员

需求:数组中既有 number 类型,又有 string 类型,这个数组的类型应该如何写?

let arr: (number | string)[] = [1, 'a', 3, 'b']
  • 解释:|(竖线)在 TS 中叫做联合类型,即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
  • 注意:这是 TS 中联合类型的语法,只有一根竖线,不要与 JS 中的或(|| 或)混淆了

注意:

  • 使用联合类型的时候一定要非常的小心

例如:传入给一个联合类型的值是非常简单的:

  • 只要保证是联合类型中的某一个类型的值即可,但是我们拿到这个值之后,我们应该如何使用它呢?因为它可能是任何一种类型。比如我们拿到的值可能是string或者number,我们就不能对其调用string上的一些方法;

那么我们怎么处理这样的问题呢?

  • 我们需要使用缩小(narrow)联合
  • TypeScript可以根据我们缩小的代码结构,推断出更加具体的类型
function printId(id: number | string) {
  if(typeof id === 'string'){
    // 确定为string类型
    console.log('id为:', id.toUpperCase());
  } else {
    // 确定为number类型
    console.log(id);
    
  }
}

交叉类型

  • 类型之间进行与的操作
  • 交叉类似表示需要满足多个类型的条件
  • 交叉类型使用 & 符号
type MyType = number & string

表达的含义是number和string要同时满足

但是有同时满足是一个number又是一个string的值吗?其实是没有的,所以MyType其实是一个never类型

交叉类型的应用:

在开发中,我们进行交叉时,通常是对对象类型进行交叉的

interface Colorful {
  color: string
}

interface IRun {
  running: () => void
}

type NewType = Colorful & IRun

const obj: NewType = {
  color: 'red',
  running: function() {}
}

类型别名

  • 类型别名(自定义类型):为任意类型起别名
  • 使用场景:当同一类型(复杂)被多次使用时,可以通过类型别名,简化该类型的使用
type CustomArray = (number | string)[]

let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]
  • 解释:
    1. 使用 type 关键字来创建自定义类型
    2. 类型别名(比如,此处的 CustomArray)可以是任意合法的变量名称
    3. 推荐使用大写字母开头
    4. 创建类型别名后,直接使用该类型别名作为变量的类型注解即可

undefined和null

// 0:女士   1:男士  2:其他
let gender: number | undefined | null;

gender = 1;
gender = undefined;
gender = null;

如果你需要将数据清空,这个时候直接赋值undefined或者是null会数据类型不匹配的错误,你可以给变量定义多个数据类型。

undefined和null区别?

  • undefined:指未定义
  • null:值为空
null == undefined // true
null === undefined // false

typeof null === 'object';
typeof undefined === 'undefined';

never类型

了解

never类型值永远不存在值的类型。比如一个函数:

  • 如果一个函数中是一个死循环或者抛出一个异常,那么这个函数会返回东西吗?
  • 不会,那么写void类型或者其他类型作为返回值类型都不合适,我们就可以使用never类型

例如:never类型指哪些总是抛出错误或异常的函数的返回值类型或者值的类型。

let fn: never;

fn = (() => {
    throw new Error('错误');
})();

应用场景:

  • 开发中很少实际去定义never类型,某些情况下会自动进行类型推导出never
  • 开发框架(工具)的时候可能会用到never类型
  • 封装一些类型工具的时候,可以使用never类型

函数类型

  • 函数的类型实际上指的是:函数参数返回值的类型
  • TS中要求,实参的个数必须跟形参的个数相同
  • 为函数指定类型的两种方式:
    1. 单独指定参数、返回值的类型
    2. 同时指定参数、返回值的类型

  1. 单独指定参数、返回值的类型:
// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 复杂类型约束
function show2(user: {name: string, age: number}) {
}
show2({name: '张三', age: 20});

function show3(students: {id: number, name: string}[]) {
}
show3([{id: 1, name: 'lisi'}, {id: 2, name: 'wangwu'}]);

// 箭头函数
const add = (num1: number, num2: number): number => {
  return num1 + num2
}

  1. 同时指定参数、返回值的类型:
type AddFn = (num1: number, num2: number) => number

const add: AddFn = (num1, num2) => {
  return num1 + num2
}
  • 解释:当函数作为表达式时,可以通过类似箭头函数形式的语法来为函数添加类型
  • 注意:这种形式只适用于函数表达式

void 类型
  • 如果函数没有返回值,那么,函数返回值类型为:void
function greet(name: string): void {
  console.log('Hello', name)
}
  • 注意:
    • 我们可以将null和undefined赋值给void类型,也就是函数可以返回null或者undefined
    • 如果一个函数没有返回值,此时,在 TS 的类型中,应该使用 void 类型

// 如果什么都不写,此时,add 函数的返回值类型为: void
const add = () => {}

// 这种写法是明确指定函数返回值类型为 void,与上面不指定返回值类型相同
const add = (): void => {}

const add = (): void => {
    return;
}

let add = function(): void {
  return undefined;
}

// 如果指定 返回值类型为 undefined,此时,函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
  // 此处,返回的 undefined 是 JS 中的一个值
  return undefined
}

// 如果指定 返回值类型为 null,此时,函数体中必须显示的 return null 才可以
let add = function(): null {
  return null
}


// 1.
type ExecFnType = (...args: any[]) => void
// 2.
function  delayExechFn(fn: ExecFnType) {
    setTimeout(() => {
        fn('zs', 20)
    }, 1000)
}
// 3.
delayExechFn((name, age) =>  {
    ...
})

函数可选参数
  • 使用函数实现某个功能时,参数可以传也可以不传。这种情况下,在给函数参数指定类型时,就用到可选参数
  • 比如,数组的 slice 方法,可以 slice() 也可以 slice(1) 还可以 slice(1, 3)
function mySlice(start?: number, end?: number): void {
  console.log('起始索引:', start, '结束索引:', end)
}
  • 可选参数:在可传可不传的参数名称后面添加 ?(问号)
  • 注意:可选参数只能出现在参数列表的最后,也就是说可选参数后面不能再出现必选参数

对象可选参数:

也是通过?:标记为可选参数

function show5(user: {name: string, age?: number}) {
}
show5({age: 20, name: '张三'});

跳过可选参数

使用undefined跳过可选参数

function show4(name: string, gender: number, age?: number, address?: string) {
}
show4('张三', 0, undefined,'红旗河沟');

默认值

函数参数默认值和es6中写法一样

function show6(name: string = '张三') {
}
show6();

注意,一旦给了默认值,就不能显示的给可选?:

剩余参数

和es6中剩余参数基本类似,但是应该生命剩余参数的数据类型。

function show7(name: string, ...args: any[]) {

}

show7('张三', 1, 'a', true);

传入对象参数:

type Point = {
  x: number, 
  y: number,
  z?: number
}

function printPoint(point: Point) {
  console.log(point.x);
  console.log(point.y);
}

printPoint({x: 524.25, y: 78.456, z: 324.586})

函数作为参数
function foo() {}

type FooFnType = () => void

function bar(fn: FooFnType){
  fn()
}

bar(foo)

示例
function calc(n1: number, n2: number, fn: (num1: number, num2: number) => number){
  console.log(fn(n1, n2));
  return fn(n1, n2)
}

calc(20, 30, function(a1, a2) {
  return a1 + a2
})

calc(20, 30, function(a1, a2) {
  return a1 - a2
})

calc(20, 30, function(a1, a2) {
  return a1 * a2
})

calc(20, 30, function(a1, a2) {
  return a1 / a2
})

export {}

函数重载

函数重载或方法重载有以下几个优势:

优势1: 结构分明

  • 让代码可读性,可维护性提升许多,而且代码更漂亮。

优势2: 各司其职,自动提示方法和属性:每个重载签名函数完成各自功能,输出取值时不用强制转换就能出现自动提示,从而提高开发效率】

优势3: 更利于功能扩展

在TypeScript中,如果我们编写了一个add函数,希望可以对字符串和数字类型进行相加,应该如何编写呢?

我们可能会这样来编写,但是其实是错误的:

那么这个代码应该如何去编写呢?

在TypeScript中,我们可以去编写不同的重载签名(overload signatures)来表示函数可以以不同的方式进行调用

一般是编写两个或者以上的重载签名,再去编写一个通用的函数以及实现

示例:

type MessageType = "image" | "audio" | string;//微信消息类型

type Message = {
  id: number;
  type: MessageType;
  sendmessage: string;
};

let messages: Message[] = [
  {
    id: 1, type: 'image', sendmessage: "你好啊,今晚咱们一起去三里屯吧",
  },
  {
    id: 2, type: 'audio', sendmessage: "朝辞白帝彩云间,千里江陵一日还"
  },
  {
    id: 3, type: 'audio', sendmessage: "你好!张无忌"
  },
  {
    id: 4, type: 'image', sendmessage: "刘老根苦练舞台绝技!"
  },
  {
    id: 5, type: 'image', sendmessage: "今晚王牌对王牌节目咋样?"
  }]


//用方法重载 
//第一个根据数字id来查询单个消息的重载签名
function getMessage(value: number): Message

//第二个根据消息类型来查询消息数组的重载签名
// readRecordCount:控制显示的条数
function getMessage(value: MessageType, readRecordCount: number): Message[]

function getMessage(value: any, value2: any = 1) {
  if (typeof value === "number") {
    return messages.find((msg) => { return 6 === msg.id })//undefined
  } else {
    return messages.filter((msg) => value === msg.type).splice(0, value2)
  }
}

getMessage("image", 2).forEach((msg) => {
  console.log(msg);
})

export { }

示例:

// 函数重载:函数名相同、参数不同的几个函数
function add(num1: number, num2:number): number

function add(num1: string, num2: string): string

function add(num1: any, num2: any): any {
  return num1 + num2
}

const result = add(20, 30)
console.log(result);

const result1 = add('20', '30')
console.log(result1);

联合类型和重载

我们现在有一个需求:定义一个函数,可以传入字符串或者数组,获取它们的长度

这里有两种实现方案:

  • 方案一:使用联合类型来实现;
  • 方案二:实现函数重载来实现;
// 联合类型
// function getLength(a: string | any[]) {
//   return a.length
// }

// 重载
function getLength(a: string): number
function getLength(a: any[]): number
function getLength(a: any) {
  return a.length
}

在开发中我们选择使用哪一种呢?

在可能的情况下,尽量选择使用联合类型来实现

可调用注解

可以针对函数重载进行类型注解

// type A = () => void // 等价于如下

// 类型注解
type A = {
  (n: number, m: number): any
  (n: string, m: string): any
}

function foo(n: number, n1: number): any;
function foo(n: string, n1: string): any;
function foo(n: number|string, m: number|string){}

let a: A = foo

type A = {
  (n: number): number
  username?: string
}

let foo: A = (n) => {return n}
foo.username = 'zs'

匿名函数

匿名函数是否需要添加类型注解?最好不要添加注解,因为它自身会进行上下文推导

const names: string[]  = ['a', 'b']

names.forEach(function(item, index, arr){
    ...
})

对象类型

在ts中object类型是主要是[]、{}、function三种类型的复核类型。

let obj: object = {};

let obj2: object = [];

let obj3: object = function() {};

object是复核类型,不要随意用,因为你不知道这个数据应该传递数组还是对象,还是函数,一旦传递错误会报语法错误。

  • JS 中的对象是由属性和方法构成的,而 TS 对象的类型就是在描述对象的结构(有什么类型的属性和方法)
  • 对象类型的写法:
// 空对象
let person: {} = {}

// 有属性的对象
let person: { name: string } = {
  name: '同学'
}

// 既有属性又有方法的对象
// 在一行代码中指定对象的多个属性类型时,使用 `;`(分号)来分隔
let person: { name: string; sayHi(): void } = {
  name: 'jack',
  sayHi() {}
}

// 对象中如果有多个类型,可以换行写:
// 通过换行来分隔多个属性类型,可以去掉 `;`
let person: {
  name: string
  sayHi(): void
} = {
  name: 'jack',
  sayHi() {}
}

type Obj = {username: string}
let obj = {} as Obj

  • 解释:
    1. 使用 {} 来描述对象结构
    2. 属性采用属性名: 类型的形式
    3. 方法采用方法名(): 返回值类型的形式

如果你需要在对象中任意给值,可以使用[k: string]: any

let obj4: { name: string, age: number, gender: number, [k: string]: any } = {
    name: '张三',
    age: 20,
    gender: 0,
    address: '红旗河沟'
};

[k: string]: any:冒号左侧[k: string]代表对象的键只能是字符串类型,右侧的any代表值是任意类型

使用类型别名
  • 注意:直接使用 {} 形式为对象添加类型,会降低代码的可读性(不好辨识类型和值)
  • 推荐:使用类型别名为对象添加类型
// 创建类型别名
type Person = {
  name: string,
  age: number,
  sayHi(): void,
  // 索引签名
  [k: string]: any
}

// 使用类型别名作为对象的类型:
let person:Person = {
  name: 'zs',
  age: 20,
  sayHi() {},
  height: 160
}

带有参数的方法类型
  • 如果方法有参数,就在方法名后面的小括号中指定参数类型
type Person = {
  greet(name: string): void
}

let person: Person = {
  greet(name) {
    console.log(name)
  }
}

箭头函数形式的方法类型
  • 方法的类型也可以使用箭头函数形式
type Person = {
  greet: (name: string) => void
}

let person: Person = {
  greet(name) {
    console.log(name)
  }
}

对象可选属性
  • 对象的属性或方法,也可以是可选的,此时就用到可选属性
  • 比如,我们在使用 axios({ ... }) 时,如果发送 GET 请求,method 属性就可以省略
  • 可选属性的语法与函数可选参数的语法一致,都使用 ? 来表示
type Config = {
  url: string
  method?: string
}

function myAxios(config: Config) {
  console.log(config)
}

类型推论/导

  • 在 TS 中,某些没有明确指出类型的地方,TS 的类型推论机制会帮助提供类型
  • 换句话说:由于类型推论的存在,这些地方,类型注解可以省略不写
  • 发生类型推论的 2 种常见场景:
    1. 声明变量并初始化时
    2. 决定函数返回值时
// 变量 age 的类型被自动推断为:number
let age = 18

// 函数返回值的类型被自动推断为:number
function add(num1: number, num2: number) {
  return num1 + num2
}
  • 推荐:能省略类型注解的地方就省略(偷懒,充分利用TS类型推论的能力,提升开发效率)
  • 技巧:如果不知道类型,可以通过鼠标放在变量名称上,利用 VSCode 的提示来查看类型
  • 推荐:在 VSCode 中写代码的时候,多看方法、属性的类型,养成写代码看类型的习惯

console.log()
document.createElement()

字面量类型

let  进行类型推导,推导出来的通用类型

const  进行类型推导,推导出来的字面量类型,可作为一个类型使用,常用于联合类型中

  • 思考以下代码,两个变量的类型分别是什么?
let str1 = 'Hello TS'
const str2 = 'Hello TS'
  • 通过 TS 类型推论机制,可以得到答案:
    1. 变量 str1 的类型为:string
    2. 变量 str2 的类型为:'Hello TS'
  • 解释:
  1. str1 是一个变量(let),它的值可以是任意字符串,所以类型为:string
  1. str2 是一个常量(const),它的值不能变化只能是 'Hello TS',所以,它的类型为:'Hello TS'
  • 注意:此处的 'Hello TS',就是一个字面量类型,也就是说某个特定的字符串也可以作为 TS 中的类型
  • 任意的 JS 字面量(比如,对象、数字等)都可以作为类型使用
    • 字面量:{ name: 'jack' } [] 18 20 'abc' false function() {}

type A = 'liner' | 'swing'
let a: A = 'liner'

使用模式和场景
  • 使用模式:字面量类型配合联合类型一起使用
  • 使用场景:用来表示一组明确的可选值列表
  • 比如,在贪吃蛇游戏中,游戏的方向的可选值只能是上、下、左、右中的任意一个
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时,会有类型提示:
changeDirection('up')

  • 解释:参数 direction 的值只能是 up/down/left/right 中的任意一个
  • 优势:相比于 string 类型,使用字面量类型更加精确、严谨

字面量推理
// 方式1
// type Method = 'GET' | 'POST'
// type Request = {
//   url: string,
//   method: Method
// }
// const options: Request = {
//   url: 'https://www.baidu.com',
//   method: 'POST'
// }
// function request (url: string, method: Method) {}
// request(options.url, options.method)



// 方式2
// type Method = 'GET' | 'POST'
// const options = {
//   url: 'https://www.baidu.com',
//   method: 'POST'
// }
// function request (url: string, method: Method) {}
// request(options.url, options.method as Method)


// 方式3
type Method = 'GET' | 'POST'
const options = {
  url: 'https://www.baidu.com',
  method: 'POST'
} as const
function request (url: string, method: Method) {}
request(options.url, options.method as Method)

export {}

keyof 关键字
interface A {
  username: string,
  age: number
}

// 此时想将 username 和 age 单独提取出来,作为一个联合类型
// keyof A --> 'username' | 'age'
let a: keyof A = 'age'
let b: keyof A = 'username'

let obj: {
  username: 'zs',
  age: 20
}
let a: keyof typeof obj = 'age'

类型断言

基本用法

有时候你会比 TS 更加明确一个值的类型,此时,可以使用类型断言来指定更具体的类型。 比如,

const aLink = document.getElementById('link')
  • 注意:该方法返回值的类型是 HTMLElement,该类型只包含所有标签公共的属性或方法,不包含 a 标签特有的 href 等属性
  • 因此,这个类型太宽泛(不具体),无法操作 href 等 a 标签特有的属性或方法
  • 解决方式:这种情况下就需要使用类型断言指定更加具体的类型
  • 使用类型断言:

const aLink = document.getElementById('link') as HTMLAnchorElement

let value: any = '张三';
let arr = (value as string).split('')


class Person {}
class Student extends Person {
  studying(){}
}
function sayHello(p: Person) {
  (p as Student).studying()
}
const stu = new Student()
console.log(stu); // Student {}
  • 解释:
    1. 使用 as 关键字实现类型断言
    2. 关键字 as 后面的类型是一个更加具体的类型(HTMLAnchorElement 是 HTMLElement 的子类型)
    3. 通过类型断言,aLink 的类型变得更加具体,这样就可以访问 a 标签特有的属性或方法了
  • 另一种语法,使用 <> 语法,这种语法形式不常用知道即可:

// 该语法,知道即可:在react的jsx中使用会报错
const aLink = <HTMLAnchorElement>document.getElementById('link')

et value: any = '张三';
let arr = (<string>value).split('')

两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好;然而,当你在TypeScript里使用JSX时,只有 as语法断言是被允许的。

注意:在tsx文件中只能使用as语法断言。

技巧:在浏览器控制台,通过 __proto__ 获取 DOM 元素的类型*

TypeScript只允许类型断言转换为 更具体 或者 不太具体 的类型版本,此规则可防止不可能的强制转换:

 

特殊:

了解

这样做容易造成代码的混乱

const message: string = '123'
// const num: number = (message as any) as number
const num: number = (message as unknown) as number

非空断言

标识符:!

当我们编写下面的代码时,在执行ts的编译阶段会报错:

这是因为传入的message有可能是为undefined的,这个时候是不能执行方法的;

但是,我们确定传入的参数是有值的,这个时候我们可以使用非空类型断言:

非空断言使用的是 ! ,表示可以确定某个标识符是有值的,跳过ts在编译阶段对它的检测

 

typeof

  • 众所周知,JS 中提供了 typeof 操作符,用来在 JS 中获取数据的类型
console.log(typeof 'Hello world') // ?
  • 实际上,TS 也提供了 typeof 操作符:可以在类型上下文中引用变量或属性的类型(类型查询)
  • 使用场景:根据已有变量的值,获取该值的类型,来简化类型书写
let p = { x: 1, y: 2 }
function formatPoint(point: { x: number; y: number }) {}
formatPoint(p)

function formatPoint(point: typeof p) {}
  • 解释:
    1. 使用 typeof 操作符来获取变量 p 的类型,结果与第一种(对象字面量形式的类型)相同
    2. typeof 出现在类型注解的位置(参数名称的冒号后面)所处的环境就在类型上下文(区别于 JS 代码)
    3. 注意:typeof 只能用来查询变量或属性的类型,无法查询其他形式的类型(比如,函数调用的类型)

可选类型

其实上,可选类型可以看做是 类型 和 undefined 的联合类型

function print(message?: string) {
  console.log(message);
}

print() // undefined
print('21')
print(undefined) // undefined

// 报错:Argument of type 'null' is not assignable to parameter of type 'string | undefined'
// print(null)

类型缩小/保护

  • 类型缩小的英文是 Type Narrowing
  • 我们可以通过类似于 typeof padding === "number" 的判断语句,来改变TypeScript的执行路径
  • 在给定的执行路径中,我们可以缩小比声明时更小的类型,这个过程称之为 缩小
  • 而我们编写的 typeof padding === "number 可以称之为 类型保护(type guards)

常见的类型保护有如下几种:

  • typeof
  • 平等缩小(比如===、!==)
  • instanceof
  • in
  • 字面量类型
  • ......

typeof:

TypeScript 中,检查返回的值typeof是一种类型保护:因为 TypeScript 对如何typeof操作不同的值进行编码

type ID = number | string

function printId(id: ID) {
  if(typeof id === 'string'){
    console.log('1');
  }else {
    console.log('2');
  }
}

平等缩小:

我们可以使用Switch或者相等的一些运算符来表达相等性(比如===, !==, ==, and != )

type Direction = 'left' | 'right' | 'center'

function turnDirection(direction: Direction) {
  switch(direction) {
    case 'left':
      console.log('left');
      break;
    case 'right':
      console.log('right');
      break;
    case 'center':
      console.log('center');
      break;
    default:
      console.log('default');
  }
}

instanceof:

JavaScript 有一个运算符来检查一个值是否是另一个值的“实例”:

function printValue(date: Date | string) {
  if(date instanceof Date){
    console.log(date.toLocaleDateString());
  }else {
    console.log(date);
  }
}

in:

Javascript 有一个运算符,用于确定对象是否具有带名称的属性:in运算符

如果指定的属性在指定的对象或其原型链中,则in 运算符返回true

type Fish = {swim: () => void}
type Dog = {run: () => void}

function move(animal: Fish | Dog) {
  if('swim' in animal){
    animal.swim()
  } else {
    animal.run()
  }
}

字面量:

function foo(n: 'username' | 123) {
  if(n === 'username'){
    n.length
  }
}

自定义保护:

is 是类型谓词,它可以做到类型保护

function isString(n: any): n is string {
  return typeof n === 'string'
}

function foo(n: string | number) {
  if(isString(n)){
  }
}

interface VS type

interface和type都可以用来定义对象类型

如果是定义非对象类型,通常推荐使用type,比如Direction、Alignment、一些Function

如果是定义对象类型,那么他们是有区别的:

  • interface 可以重复的对某个接口来定义属性和方法
  • 而type定义的是别名,别名是不能重复的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2129870.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OPENAIGC开发者大赛企业组AI黑马奖 | 包你面-AI面试助手

在第二届拯救者杯OPENAIGC开发者大赛中&#xff0c;涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到&#xff0c;我们特意开设了优秀作品报道专栏&#xff0c;旨在展示其独特之处和开发者的精彩故事。 无论您是技术专家还是爱好者&#xff0c;希望能带给您…

Linux基础知识之用户和组

Linux基础知识之用户和组 01 1.什么是用户 用户账户为不同人员和运行的程序之间提供安全边界 用户使用 username 进行标识&#xff0c;操作系统为其分配唯一标识号&#xff08;UID&#xff09;&#xff0c;用户可能含有密码 系统中的每个程序都以一个特定用户运行&#xff…

上/下三角矩阵的压缩存储

1.给自己出题&#xff1a;自己动手创造&#xff0c;画一个5行5列的下三角矩阵 2.画图&#xff1a;按“行优先”压缩存储上述矩阵&#xff0c;画出一维数组的样子 3.简答&#xff1a;写出元素 i,j 与 数组下标之间的对应关系 4.画图&#xff1a;按“列优先”压缩存储上述矩阵…

【卷起来】VUE3.0教程-06-组件详解

各位看官&#xff0c;点波关注和赞吧 组件允许我们将 UI 划分为独立的、可重用的部分&#xff0c;并且可以对每个部分进行单独的思考。在实际应用中&#xff0c;组件常常被组织成层层嵌套的树状结构&#xff1a; 这和我们嵌套 HTML 元素的方式类似&#xff0c;Vue 实现了自己的…

ssrf漏洞利用+CTF实例

引发ssrf漏洞的几个函数 file_get_contents() 把整个文件读入一个字符串中&#xff0c;获取本地或者远程文件内容fsockopen() 获得套接字信息curl_exec() 执行一个curl会话&#xff0c;由curl_init()初始化一个新的会话&#xff0c;返回一个curl句柄fopen() 打开文件或者URLre…

【数据结构与算法 | 灵神题单 | 插入链表篇】力扣2807, LCR 029, 147

1. 力扣2807&#xff1a;在链表中插入最大公约数 1.1 题目&#xff1a; 你一个链表的头 head &#xff0c;每个结点包含一个整数值。 在相邻结点之间&#xff0c;请你插入一个新的结点&#xff0c;结点值为这两个相邻结点值的 最大公约数 。 请你返回插入之后的链表。 两个…

前端开发macbook——NVM环境配置以及git配置流程

本文主要针对前端使用mac电脑时需要安装nvm对应环境&#xff0c;一文解决环境安装问题 主要步骤如下&#xff1a; 安装homebrew 安装nvm 安装git 第一步&#xff1a;安装homebrew /bin/bash -c "$(curl -fsSL https:/raw.githubusercontent.com/Homebrew/install/HE…

C++基础(七):类和对象之深浅拷贝问题(中-3)

在C编程中&#xff0c;拷贝构造函数是对象复制的核心机制&#xff0c;尤其是在处理对象间的值传递时。当一个对象通过拷贝另一个对象来初始化时&#xff0c;浅拷贝只是简单地复制对象的成员变量的值。如果对象包含指针成员&#xff0c;浅拷贝只复制指针地址&#xff0c;这可能会…

基于matlab交通标志识别系统用的APP designer设计的gui界面 交互原理:bp神经网络-训练好图像处理有灰度化-二值化-颜色区域定位识别

基于MATLAB的交通标志识别系统是一个实用的工具&#xff0c;用于识别道路交通标志。该系统结合了图像处理技术和BP神经网络模型&#xff0c;可以在给定的图像中定位并识别交通标志。通过使用MATLAB的App Designer工具&#xff0c;系统还提供了一个交互式的图形用户界面&#xf…

【idea-安装】

JetBrains官⽹ : https://www.jetbrains.com/ 1.下载idea安装包&#xff0c;下载旧一些的版本&#xff0c;避免新版本的不稳定。 下载下来的安装包是exe格式的&#xff0c;直接点击运行。 点击Next 2.选择要下载的位置&#xff0c;点击下一步。 3.选择⽣成快捷⽅式和建⽴⽂件…

从头开始学MyBatis—01搭建基础框架

首先对mybatis进行一个简单的介绍&#xff0c;然后从最基础的准备工作开始搭建一个mybatis的开发 环境&#xff0c;最后通过简单的增删改查来熟悉配置文件和映射文件的编写。 目录 1.Mybaits简介 2.开发环境和准备工作 2.1开发环境 2.2pom文件 2.3数据库和表 2.4对应实体…

探索Python世界的隐藏宝石:Pika库的神秘力量

文章目录 探索Python世界的隐藏宝石&#xff1a;Pika库的神秘力量背景&#xff1a;为何选择Pika&#xff1f;Pik库简介如何安装Pika&#xff1f;简单库函数使用方法场景应用常见Bug及解决方案总结 探索Python世界的隐藏宝石&#xff1a;Pika库的神秘力量 背景&#xff1a;为何…

【机器学习】8 ——朴素贝叶斯

机器学习 8 ——朴素贝叶斯 特征条件独立假设 朴素是指每个特征独立地影响结果&#xff0c;整个假设在实际应用中不成立&#xff0c;主要是思想 输入输出的来拟合概率分布&#xff0c;贝叶斯定理&#xff0c;后验概率最大 文章目录 机器学习 8 ——朴素贝叶斯前言贝叶斯定理先…

vue2使用ag-grid表格

ag-grid官网&#xff1a;Vue Grid: Custom Components | AG Grid 根据官方文档说的AG Grid no longer supports Vue 2. The last version to support Vue 2 is AG Grid v31.3.&#xff0c;目前只有v31.3.版本支持vue2。 以下是官方给的demo Vue Grid: Get Started with AG G…

C# WPF编程-串口通信

C# WPF编程-串口通信 串口通信1. NuGet安装System.IO.Ports2. 界面布局XAML3. C#代码4. 运行效果源码下载 串口通信 1. NuGet安装System.IO.Ports 2. 界面布局XAML <Window x:Class"BlocksTools.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006…

Python 从入门到实战15(字符串其它操作)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们通过举例学习了字符串一些操作说明。今天继续讨论字符…

Java数组08:ArrayList简介

本节内容视频链接&#xff1a; Java关于ArrayList的简单用法与介绍_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1CC4y177CW/?spm_id_from333.337.search-card.all.click&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5Java的ArrayList简介_哔哩哔哩_bilibilihttps:…

Leetcode面试经典150题-27.移除元素

解法都在代码里&#xff0c;不懂就留言或者私信 超级简单的题&#xff0c;一般出现在笔试里&#xff0c;但是不知道为啥字节高频题里会排的那么靠前 class Solution {public int removeElement(int[] nums, int val) {/**如果数组为空&#xff0c;没什么可操作的&#xff0c;…

产业园服务体系建设,是否已全面覆盖企业成长的每一个阶段?

在当今竞争激烈的商业环境中&#xff0c;产业园作为企业发展的重要载体&#xff0c;其服务体系的完善程度至关重要。那么&#xff0c;产业园服务体系建设&#xff0c;是否已全面覆盖企业成长的每一个阶段呢&#xff1f; 从企业的初创期来看&#xff0c;产业园可以提供办公场地的…

【JUC】15-ThreadLocal线程局部变量

1. ThreadLocal ThreadLocal提供线程局部变量。每个线程在访问ThreadLocal实例的时候都有自己的、独立的变量副本。ThreadLocal实例通常是类中的私有静态字段&#xff0c;使用它的目的是希望将状态(用户ID或事务ID)与线程关联起来。 class Saler {ThreadLocal<Integer> …