Advertisement

TypeScript中any类型和unknown类型有什么区别?

阅读量:

你好同学,我是沐爸,欢迎点赞、收藏、评论和关注!

在TypeScript中,any类型与unknown类型都被用来表示不确定类型的值。尽管它们之间存在显著差异,在类型安全以及编码实践层面都具有重要意义。

any类型

  • 定义:在TypeScript中,“any”型被视为一个顶级类(super type),能够接收来自任意类型的赋值,并且也能向任意类型的参数传递值。它基本上阻止了TypeScript进行严格的静态类型的验证。
    • 用途:“any”型在将现有JavaScript迁移至 TypeScript 时极为有用——因为它允许开发者逐步注入所需的types annotations,并不需要立即解决所有types错误。然而,在谨慎地使用该型之前,请确保不要放弃 TypeScript 提供的大部分静态安全优势。
    • 特性:采用 "any" 型会大大降低代码的安全性——因为 TypeScript 不会对这些显式的显式显式执行任何静态的type验证。

unknown类型

  • 标识unknown 类型标识了一个无法确定具体类型的变量值。与 any 不同的是,在这种情况下无法执行任何操作除非你首先使用类型断言或类型守卫(type guard)将其转换为更具体的 known 类型。
  • 用途unknown 类型在 TypeScript 中特别适合处理可能来自不可靠来源的数据值。它的主要优势在于鼓励开发者主动检查数据来源并明确变量的 known 类型以提高代码的安全性和可读性。
  • 安全性能:相比 any 类型来说,在支持显式类型的编程语言中 unknown 的安全性能更高因为它迫使开发者必须在其应用前对潜在的 unknown 值进行严格的验证和声明以确保程序的行为符合预期。

比较

  • 类型检查 :当采用any时,默认会忽略所有类型的检查;而当选择unknown时,则必须主动进行相关的处理和验证。
    • 安全性 :unknown相对于any提供了更加严格的安全性要求,在这种情况下必须主动处理未知类型的值。
    • 使用场景 :任何情况下需要将any应用于那些需要迁移现有代码或者无法预先定义具体数据类型的场景中;而unknown则特别适合于来自不可信来源的数据或者遇到数据类型不确定的情况。

代码示例

any 类型

(1)基础示例

复制代码
    let a: any = 4
    a = "hello"
    a = false
    a = [1, 2, 3]

(2)any 类型的数组

复制代码
    let arr: any[] = [1, true, "free"]
    arr[1] = 100

(3)any 的负作用

复制代码
    let a: string = 'hello'
    let b: any = 4
    a = b // 不会报错
    console.log(typeof a) // number

(4)隐式 any

复制代码
    // 开启严格模式也不报错
    let a
    
    // 形参 params 在开启严格模式时报错
    function fn(params) {
      console.log(params)
    }

如果要禁用隐式 any,可在 tsconfig.json 中开启 "noImplicitAny": true 选项。

unknown 类型

(1)基本示例

复制代码
    let a: string = 'hello'
    let b: unknown = 4
    b = 'hi'
    a = b // 报错
    
    // 添加类型判断
    if (typeof b === 'string') {
      a = b // 不报错
    }
    
    // 添加类型断言
    a = b as string // a = 4  不报错, 但a的类型变为number
    a = <string>b   // a = 4  不报错, 但a的类型变为number

从结果中可以看出,在应用类型判断时更为安全的做法是优先选择类型断言而非直接进行检查。然而,在实际应用中发现尽管采用类型断言不会报错但它可能导致"Bug逃逸"的情况出现。
(2)unknown 类型的数组 功能与 any 类型相似,在这种情况下允许对数组中的元素进行任意更改而不必考虑它们的数据类型的灵活性特点。

复制代码
    let arr: unknown[] = [ 1, 'hello', true]
    arr[0] = 'world'
    arr[1] = 2
    
    console.log(arr) // [ 'world', 2, true ]

结论

总的来说

总的来说

好了,分享结束,谢谢点赞,下期再见。

全部评论 (0)

还没有任何评论哟~