TypeScript-infer关键字和TypeScript-unknown类型

简介: TypeScript-infer关键字和TypeScript-unknown类型

infer 关键字


条件类型提供了一个 infer 关键字, 可以让我们在条件类型中定义新的类型

博主假设有这么一个需求: 定义一个类型, 如果传入的是数组, 就返回数组的元素类型, 如果传入的是普通类型, 则直接返回这个类型。


传入的是数组:

type MyType<T> = T extends any[] ? T[number] : T;
type res = MyType<string[]>;


传入的是普通类型:

type MyType<T> = T extends any[] ? T[number] : T;
type res = MyType<number>;


除了如上的实现方式以外,还可以利用 infer 关键字来实现。

传入的是数组:

type MyType<T> = T extends Array<infer U> ? U : T;
type res = MyType<string[]>;


传入的是普通类型:

type MyType<T> = T extends Array<infer U> ? U : T;
type res = MyType<number>;




unknown 类型


unknown 类型是 TS3.0 中新增的一个顶级类型, 被称作安全的 any

任何类型都可以赋值给 unknown 类型:

let value: unknown;
value = 123;
value = "abc";
value = false;


如果没有类型断言或基于控制流的类型细化, 那么不能将 unknown 类型赋值给其它类型。

错误示例:

let value1: unknown = 123;
let value2: number;
value2 = value1;


正确示例:

let value1: unknown = 123;
let value2: number;
value2 = value1 as number;


let value1: unknown = 123;
let value2: number;
if (typeof value1 === 'number') {
    value2 = value1;
}


如果没有类型断言或基于控制流的类型细化, 那么不能在 unknown 类型上进行任何操作。

错误示例:

let value1: unknown = 123;
value1++;


正确示例:

let value1: unknown = 123;
(value1 as number)++;


let value1: unknown = 123;
if (typeof value1 === 'number') {
    value1++;
}


只能对 unknown 类型进行 相等不等 操作, 不能进行其它操作(因为其他操作没有意义)。

正确示例:

let value1: unknown = 123;
let value2: unknown = 123;
console.log(value1 === value2);
console.log(value1 !== value2);


不能进行其它操作(因为其他操作没有意义), 虽然没有报错, 但是不推荐, 如果想报错提示, 可以打开严格模式("strict": true):

let value1: unknown = 123;
let value2: unknown = 123;
console.log(value1 >= value2);


unknown 与其它任何类型组成的交叉类型最后都是其它类型:

type MyType = number & unknown;
type MyType = unknown & string;


unknown 除了与 any 以外, 与其它任何类型组成的联合类型最后都是 unknown 类型:

type MyType1 = unknown | any;
type MyType2 = unknown | number;
type MyType3 = unknown | string | boolean;


never 类型是 unknown 类型的子类型:

type MyType = never extends unknown ? true : false;


keyof unknown 等于 never:

type MyType = keyof unknown;


unknown 类型的值不能访问创建实例的属性, 方法:

class Person {
    name: string = 'yangbuyiya';
    say(): void {
        console.log(`name = ${this.name}`);
    }
}
let p: unknown = new Person();
p.say();
console.log(p.name);


使用映射类型时, 如果遍历的是 unknown 类型, 那么不会映射任何属性:

type MyType<T> = {
    [P in keyof T]: any
}
type res = MyType<unknown>


最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
12月前
|
JavaScript 前端开发
揭秘 TypeScript 条件类型:超越简单类型检查
揭秘 TypeScript 条件类型:超越简单类型检查
|
12月前
|
JavaScript 安全 索引
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
|
12月前
|
JavaScript 安全 IDE
TypeScript 类型体操:别让 `any` 毁了你的安全网!
TypeScript 类型体操:别让 `any` 毁了你的安全网!
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
600 82
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
516 0
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
12月前
|
JavaScript 安全 编译器
TypeScript 类型守卫:让你的类型系统更智能
TypeScript 类型守卫:让你的类型系统更智能
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
404 106
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
541 6
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
562 2