TS之类型推论、联合类型、类型断言

最新推荐文章于 2024-10-30 18:30:52 发布

原创最新推荐文章于 2024-10-30 18:30:52 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #vue.js #javascript

学习专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了TypeScript中的类型推论、联合类型、类型断言和类型守卫。通过示例，展示了如何在实际编程中确保类型安全，减少错误。类型推论帮助我们自动推断变量类型，而联合类型允许变量同时持有多种类型。类型断言则用于在编译器无法确定类型时明确指定类型。类型守卫则在条件语句中缩小变量可能的类型范围，提高代码的可读性和可靠性。

类型推论 - type inference

// 先把str赋值为string，TS就默认str为string类型
let str = 'str'
// 再将str赋值为number会报错，因为TS认为它已经是string类型
str = 123

联合类型 - union types

// 我们只需要用中竖线来分割两个
let numberOrString: number | string 
// 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：
numberOrString.length
numberOrString.toString()

类型断言 - type assertions

// 这里我们可以用 as 关键字，告诉typescript 编译器，你没法判断我的代码，但是我本人很清楚，这里我就把它看作是一个 string，你可以给他用 string 的方法。
function getLength(input: string | number): number {
  const str = input as string
  if (str.length) {
    return str.length
  } else {
    const number = input as number
    return number.toString().length
  }
}

类型守卫 - type guard

// typescript 在不同的条件分支里面，智能的缩小了范围，这样我们代码出错的几率就大大的降低了。
function getLength2(input: string | number): number {
  if (typeof input === 'string') {
    return input.length
  } else {
    return input.toString().length
  }
}