TypeScript 你还只会用 Any?

更新日期: 2022-04-29阅读: 933标签: 类型

在你刚学 TypeScript 的时候,是不是遇到了很多令人抓狂的问题,最终你用上 any 大招把问题解决了。如果后期你没有系统的学习 TypeScript 的类型系统,你会发现你可能把 TypeScript 学成了 AnyScript。

在 TypeScript 中,any 类型被称为 top type。所谓的 top type 可以理解为通用父类型,也就是能够包含所有值的类型。

let value: any;

value = true; // OK
value = 42; // OK
value = "Hello World"; // OK
value = []; // OK
value = {}; // OK
value = Math.random; // OK
value = null; // OK
value = undefined; // OK
value = new TypeError(); // OK
value = Symbol("type"); // OK

而在 TypeScript 3.0 时,又引入一个新的 top type —— unknown 类型。同样,你也可以把任何值赋给 unknown 类型的变量。

let value: unknown;

value = true; // OK
value = 42; // OK
value = "Hello World"; // OK
value = []; // OK
value = {}; // OK
value = Math.random; // OK
value = null; // OK
value = undefined; // OK
value = new TypeError(); // OK
value = Symbol("type"); // OK

那么现在问题来了,any 类型和 unknown 类型之间有什么区别呢?any 类型可以理解成我不在乎它的类型,而 unknown 类型可以理解成我不知道它的类型。

其实 any 类型本质上是类型系统的一个逃生舱口,TypeScript 允许我们对 any 类型的值执行任何操作,而无需事先执行任何形式的检查。

let value: any;

value.foo.bar; // OK
value.trim(); // OK
value(); // OK
new value(); // OK
value[0][1]; // OK

这会带来什么问题呢?下面我们来举一个例子:

function invokeCallback(callback: any) {
    try {
        callback();
    } catch (err) {
        console.error(err)
    }
}

invokeCallback(1);

对于以上的 TS 代码,在编译期不会提示任何错误,但在运行期将会抛出运行时错误。作为开发人员,any 类型给了我们很大的自由度,但同时也带来了一些隐患。

为了解决 any 类型存在的安全隐患,TypeScript 团队在 3.0 版本时,引入了 unknown 类型,你可以把它理解成类型安全的 any 类型。

那么 unknown 类型是类型安全的体现在哪里呢?这里我们把 invokeCallback 函数参数的类型改为 unknown 类型,之后 TS 编译器就会提示相应的错误信息:

function invokeCallback(callback: unknown) {
    try {
        // Object is of type 'unknown'.(2571)
        callback(); // Error
    } catch (err) {
        console.error(err)
    }
}

invokeCallback(1); 

相比 any 类型,TypeScript 会对 unknown 类型的变量执行类型检查,从而避免出现 callback 参数非函数类型。要解决上述问题,我们需要缩小 callback 参数的类型,即可以通过 typeof 操作符来确保传入的 callback 参数是函数类型的对象:

function invokeCallback(callback: unknown) {
    try {
        if (typeof callback === 'function') {
            callback();
        }
    } catch (err) {
        console.error(err)
    }
}

invokeCallback(1); 

在实际工作中,你还可以通过 instanceof 或用户自定义类型守卫等方式来缩窄变量的类型。

declare function isFunction(x: unknown): x is Function;

function f20(x: unknown) {
    if (x instanceof Error) {
        x;  // Error
    }
    if (isFunction(x)) {
        x;  // Function
    }
}

与 any 类型不同,因为 TypeScript 会对 unknown 类型的变量执行类型检查,所以当我们把之前代码中 value 变量的类型改成 unknown 类型时,使用 value 变量的多个语句将出现错误。

let value: unknown;

// Object is of type 'unknown'.(2571)
value.foo.bar; // Error
value.trim(); // Error
value(); // Error
new value(); // Error
value[0][1]; // Error

另外,需要注意的是,unknown 类型的变量只能赋值给 any 类型和 unknown 类型本身。

let value: unknown;

let value1: unknown = value; // OK
let value2: any = value; // OK
let value3: boolean = value; // Error
let value4: number = value; // Error
let value5: string = value; // Error
let value6: object = value; // Error
let value7: any[] = value; // Error
let value8: Function = value; // Error

any 类型和 unknown 类型在这些场合中的表现也是不一样的:

type T40 = keyof any;  // string | number | symbol
type T41 = keyof unknown;  // never

type T50<T> = { [P in keyof T]: number };
type T51 = T50<any>;  // { [x: string]: number }
type T52 = T50<unknown>;  // {}

在以上代码中,T50 类型被称为映射类型,在映射过程中,如果 key 的类型是 never 类型,则当前 key 将会被过滤掉,所以 T52 的类型是空对象类型。

关于 any 类型和 unknown 类型的区别就介绍到这里,现在我们来做个总结:

  • 你可以把任何值赋给 any 类型的变量,并对该变量执行任何操作;
  • 你可以把任何值赋给 unknown 类型的变量,但你必须进行类型检查或类型断言才能对变量进行操作;


在平时工作中,为了保证类型安全,我们应该尽可能使用 unknown 类型。最后我们来看一下 unknown 类型与不同类型进行类型运算的结果:

// In an intersection everything absorbs unknown
type T00 = unknown & null;  // null
type T01 = unknown & undefined;  // undefined
type T02 = unknown & null & undefined;  // null & undefined (which becomes never in union)
type T03 = unknown & string;  // string
type T04 = unknown & string[];  // string[]
type T05 = unknown & unknown;  // unknown
type T06 = unknown & any;  // any

// In a union an unknown absorbs everything
type T10 = unknown | null;  // unknown
type T11 = unknown | undefined;  // unknown
type T12 = unknown | null | undefined;  // unknown
type T13 = unknown | string;  // unknown
type T14 = unknown | string[];  // unknown
type T15 = unknown | unknown;  // unknown
type T16 = unknown | any;  // any

any 类型比较特殊,该类型与任意类型进行交叉或联合运算时,都会返回 any 类型。

阅读完本文之后,相信你已经了解 any 类型和 unknown 类型之间的区别了。你知道如何检测 any 类型和 unknown 类型么?

来源: 全栈修仙之路

链接: https://fly63.com/article/detial/11421

JS中Null与Undefined的区别

在JavaScript中存在这样两种原始类型:Null与Undefined。这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined?Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。

Javascript的类型检测

主要介绍了JS中检测数据类型的几种方式,typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回\'object\',有时我们需要判断该实例是否为某个对象的实例,那么这个时候需要用到instanceof运算符

js类型转换的各种玩法

对于object和number、string、boolean之间的转换关系,ToPrimitive是指转换为js内部的原始值,如果是非原始值则转为原始值,调用valueOf()和toString()来实现。

JavaScript类型:关于类型,有哪些你不知道的细节?

Undefined类型表示未定义,它的类型只有一个值为undefined。undefined和null有一定的表意差别。非整数的Number类型无法使用 == 或 === 来比较,因为 JS 是弱类型语言,所以类型转换发生非常频繁

为你的 JavaScript 项目添加智能提示和类型检查

近在做项目代码重构,其中有一个要求是为代码添加智能提示和类型检查。智能提示,英文为 IntelliSense,能为开发者提供代码智能补全、悬浮提示、跳转定义等功能,帮助其正确并且快速完成编码。

js的类型

基本类型:按值访问,可以操作保存在变量中实际的值;引用类型数据存在堆内存,而引用存在栈区,也就是说引用类型同时保存在栈区和堆区,关于==的执行机制,ECMASript有规范,因为==前后的值交换顺序,返回的值也是一样的,所以在此对规范做出如下总结

再也不用担心 JavaScript 的数据类型转换了

JavaScript 是一种弱类型或者说动态类型语言。所以你不用提前声明变量的类型,在程序运行时,类型会被自动确定,你也可以使用同一个变量保存不同类型的数据。

JavaScript基础之值传递和引用传递

js的值传递和引用(地址)传递:js的5种基本数据类型 number,string,null,undefined,boolean 在赋值传递时是值传递,js的引用数据类型(object,array,function)进行引用传递,其实底层都是对象。

JS中的布尔 数字 字符串

JS中所有的值都可以转换成布尔类型 使用Boolean()或者 !!(两个感叹号),JS中所有的值都可以转换成数字类型,使用Number()或+。数字类型转换场景目的只有一个,用于计算,将后台传递的数据,从字符串转换为数字并参与计算

if条件中,js的强制类型转换

众所周知,JS在很多情况下会进行强制类型转换,其中,最常见两种是:1.使用非严格相等进行比较,对==左边的值进行类型转换2.在if判断时,括号内的值进行类型转换,转化为布尔值

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!