TS特殊类型之unknown

unknown类型

首先说明一下,本人是前端小学生级别的菜鸡,吐槽的话请口下留情,在评论区指出错误或者补充不足,我会很喜欢,互喷不会进步,相互指点才会。。。。谢谢大家啦

📌unknown 类型也是顶部类型这与 any 一样

  • unknown 用于表示未知的类型
  • 会进行 TS 的类型检查,any 不进行 TS 检查
  • 使用 unknown 类型时可以使用 as 类型断言来明确类型
  • unknownany的相似之处,在于所有类型的值都可以分配给unknown类型。

下面是 any 与 unknown 赋值上的区别,unknown 需要明确类型后赋值,any 则不需要

typescript 复制代码
let unknownname: any = "akun";
let unknownakun: unknown = "akun001";

let unknowna: string = unknownname;
let unknownb: string = unknownakun; //报错: 'unknown'未知类型不能赋值给'string'类型

// // // unknown 类型需要使用断言明确类型后赋值
let c: string = unknownakun as string;

可以把任何值赋值给 unknown 类型,但在使用时需要指明类型

typescript 复制代码
let unknownakun02: unknown;
unknownakun02 = "akuna"; //ok
unknownakun02 = 1124; //ok

//在使用时,TS不知道是什么类型,所以需要使用类型断言进行告之
let unknownakun03 = (unknownakun02 as number) + 20;

首先,unknown类型的变量,不能直接赋值给其他类型的变量(除了any类型和unknown类型)。

typescript 复制代码
// 直接赋值
let unknownakun04: unknown = 123;
// let unknownakun05: boolean = unknownakun04; //eroor
// let unknownakun06: number = unknownakun04;//error

上面示例中,变量unknownakun04unknown类型,赋值给anyunknown以外类型的变量都会报错,这就避免了污染问题,从而克服了any类型的一大缺点。

📌其次,不能直接调用unknown类型变量的方法和属性。

typescript 复制代码
let v1:unknown = { foo: 123 };
v1.foo  // 报错

let v2:unknown = 'hello';
v2.trim() // 报错

let v3:unknown = (n = 0) => n + 1;
v3() // 报错

上面示例中,直接调用unknown类型变量的属性和方法,或者直接当作函数执行,都会报错

使用 keyof 类型工具时 unknown 与 any 的区别

typescript 复制代码
type AKUN<T> = { [P in keyof T]: string }

//{[x: string]: string;}
type AKUNA= AKUN<any>

//结果为{},因为 keyof unknow 是never,所以被忽略了
type KUN = AKUN<unknown>
typescript 复制代码
type AKUN<T> = { [P in keyof T]: string }

//{[x: string]: string;}
type AKUNA= AKUN<any>

//结果为{},因为 keyof unknow 是never,所以被忽略了
type KUN = AKUN<unknown>

不同类型赋值时会报错

typescript 复制代码
let akun:string ='99'
let age:number =akun as number //报错,TS 认为字符串转数值会出现错误

这里需要使用 unknown 做个中间层转换,将其先转换为 unknown 未知类型,再转换为 string 类型

typescript 复制代码
let akun:string ='99'
let age:number =akun as unknown as number

使用 any 类型 ts 不进行类型校验,所以在编译时不会报错,但执行编译后的 js 后会显示 NaN

typescript 复制代码
function get(val: any) {
  val = val * 100;
  return val
}

console.log(get('akun'));  //NaN

使用 unknown 类型时,结合 typeof 进行类型判断,根据不同类型使用不同逻辑,慢慢进行缩小范围

typescript 复制代码
function get(val: unknown) {
  if (typeof val === 'number') {
    return val * 100;
  }
  return 0
}
console.log(get(100));  //NaN
相关推荐
热爱编程的小曾8 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin20 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox33 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952737 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox