优秀的编程知识分享平台

网站首页 > 技术文章 正文

TypeScript 中的顶级类型:any 和 unknown

nanyue 2024-07-25 05:54:47 技术文章 30 ℃



前言

在TypeScript中,any并且unknown是包含所有的值类型。在文章中,我们研究了它们如何工作。


目录:

  • TypeScript的两种顶级类型
  • 顶部类型 示例:JSON.parse() 示例:String()
  • 顶部类型未知

打字稿的两个顶级类型

any而unknown在所谓的顶部类型的打字稿。引用维基百科:

在顶部型 [...]为通用型,有时也被称为通用超类型和所有其他类型在任何给定类型的系统是亚型[...]。在大多数情况下,类型是包含相关类型系统中所有可能的[值]的类型。

也就是说,当将类型视为值的集合,any并且unknown是包含所有值的集合时。顺便说一句,TypeScript还具有底部类型 never,它是空集。

顶部类型any

如果值具有type any,我们可以使用它来做所有事情:

function func(value: any) {
  // Only allowed for numbers, but they are a subtype of `any`
  5 * value;

  // Normally the type signature of `value` must contain .propName
  value.propName;

  // Normally only allowed for Arrays and types with index signatures
  value[123];
}

每个类型都可以分配给type any:

let storageLocation: any;

storageLocation = null;
storageLocation = true;
storageLocation = {};

类型any可分配给每种类型:

function func(value: any) {
  const a: null = value;
  const b: boolean = value;
  const c: object = value;
}

随着any我们失去通常由打字稿的静态类型系统给我们任何保护。因此,如果我们不能使用更具体的类型或,则只能将其用作最后的选择unknown。

例如:JSON.parse()

结果JSON.parse()取决于动态输入,这就是为什么返回类型是any(我reviver从签名中省略了参数)的原因:

JSON.parse(text: string): any;

JSON.parse()在类型unknown存在之前将其添加到TypeScript 。否则,其返回类型可能为unknown。

例如:String()

String()将任意值转换为字符串的函数具有以下类型签名:

interface StringConstructor {
  (value?: any): string; // call signature
  // ···
}

顶部类型unknown

类型unknown是type的类型安全版本any。每当您考虑使用时any,请先尝试使用unknown。

在哪里any允许我们做任何事情,unknown要严格得多。

在对type的值执行任何操作之前unknown,我们必须首先通过以下方法缩小其类型:

  • 类型断言(将在以后的博客文章中进行描述)
function func(value: unknown) {
    // @ts-ignore: Object is of type 'unknown'.
    value.toFixed(2);

    // Type assertion:
    (value as number).toFixed(2); // OK
}
  • 平等:
function func(value: unknown) {
   // @ts-ignore: Object is of type 'unknown'.
    value * 5;

   if (value === 123) { // equality
        // %inferred-type: 123
        value;

       value * 5; // OK
    }
}
  • 类型防护(将在以后的在文章中进行介绍)
function func(value: unknown) {
    // @ts-ignore: Object is of type 'unknown'.
    value.length;

   if (typeof value === 'string') { // type guard
        // %inferred-type: string
       value;

       value.length; // OK
    }
}
  • 断言功能(将在以后的在文章中进行介绍)
function func(value: unknown) {
    // @ts-ignore: Object is of type 'unknown'.
    value.test('abc');

    assertionFunction(value);

    // %inferred-type: RegExp
    value;

    value.test('abc'); // OK
}

function assertionFunction(arg: unknown): asserts arg is RegExp {
    if (! (arg instanceof RegExp)) {
        throw new TypeError('Not a RegExp: ' + arg);
}

推荐TypeScript知识点文章

1500行TypeScript代码在React中实现组件keep-alive

「TypeScript」详解一个了不起的 tsconfig.json 指南

用TypeScript编写React的优雅实践「干货」

了不起的 TypeScript 入门教程「实践篇」

了不起的 TypeScript 入门教程「基础篇」

TypeScript 常见问题整理(60多个)「上」

TypeScript 常见问题整理(60多个)「下」

深入TypeScript难点梳理讲解

Vue3.0之前你必须知道的TypeScript实战技巧

深入TypeScript难点梳理讲解

Vue3.0之前你必须知道的TypeScript实战技巧

你需要的 React + TypeScript 50 条规范和经验

TypeScript详细概括【思维导图】

Vue3.0 尝鲜 Hook TypeScript 取代 Vuex【项目实践】

TypeScript详细概括【思维导图】

「新消息」基于JavaScript/TypeScript 编程环境Deno1.0 即将发布

「干货」一张页面引起的项目架构思考(rax+Typescript+hooks)

深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】

最近发表
标签列表