13.【TypeScript 教程】类型推断

本文详细介绍了TypeScript中的类型推断机制,包括基础类型推断、默认参数、返回值类型、通用类型推断以及上下文类型推断的区别和应用场景。通过实例演示了如何在项目中灵活运用这些特性以提高代码的类型安全性。
摘要由CSDN通过智能技术生成

TypeScript 类型推断

TypeScript 类型检查机制包含三个部分:

  • 类型推断
  • 类型保护
  • 类型兼容性

本节介绍其中的类型推断,类型推断主要用于那些没有明确指出类型的地方帮助确定和提供类型,这是 TypeScript 的一种能力。

类型推断是有方向的,要注意区分从左向右和从右向左两种推断的不同应用。

1. 解释

类型推断的含义是不需要指定变量类型或函数的返回值类型,TypeScript 可以根据一些简单的规则推断其的类型。

2. 基础类型推断

基础的类型推断发生在 初始化变量,设置默认参数和决定返回值时。

初始化变量例子:

let x = 3             // let x: number
let y = 'hello world' // let y: string

let z                 // let z: any

代码解释:

变量 x 的类型被推断为数字,变量 y 的类型被推断为字符串。如果定义时没有赋值,将被推断为 any 类型。

设置默认参数和决定返回值时的例子:

// 返回值推断为 number
function add(a:number, b:10) {
  return a + b
}

const obj = {
  a: 10,
  b: 'hello world'
}

obj.b = 15 // Error,Type '15' is not assignable to type 'string'

代码解释:

第 1 行,参数 b 有默认值 10,被推断为 number 类型。

第 2 行,两个 number 类型相加,函数 add() 返回值被推断为 number 类型。

最后一行,obj 的类型被推断为 {a: number, b: string},所以属性 b 不能被赋值为数字。

const obj = {
  protagonist: 'Sherlock',
  gender: 'male'
}

let { protagonist } = obj

代码解释: 通过解构赋值也可以完成正确的类型推断:let protagonist: string

3. 最佳通用类型推断

当需要从多个元素类型推断出一个类型时,TypeScript 会尽可能推断出一个兼容所有类型的通用类型。

比如声明一个数组:

let x = [1, 'mybj', null]

代码解释: 为了推断 x 的类型,必须考虑所有的元素类型。这里有三种元素类型 number、string 和 null,此时数组被推断为 let x: (string | number | null)[] 联合类型。

Tip: 是否兼容 null 类型可以通过 tsconfig.json 文件中属性 strictNullChecks 的值设置为 true 或 false 来决定。

4. 上下文类型推断

前面两种都是根据从右向左流动进行类型推断,上下文类型推断则是从左向右的类型推断。

例如定义一个 Animal 的类作为接口使用:

class Animal {
  public species: string | undefined
  public weight: number | undefined
}

const simba: Animal = {
  species: 'lion',
  speak: true  // Error, 'speak' does not exist in type 'Animal'
}

代码解释: 第 6 行,将 Animal 类型显示的赋值给 变量 simbaAnimal 类型 没有 speak 属性,所以不可赋值。

5. 小结

本小节介绍了一些常见的类型推断方式,需要明白从右向左从左到右两种类型推断方法的区别及应用,在项目中灵活运用。

  • 12
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

红薯不甜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值