typescript(ts) 类型演算,类型推导

简介: 我们都知道,ts 具有类型推导,并且可以很好的进行智能的类型推导。但是如果我们想要手动的来进行类型推导 —— 通过已知的类型来推断另一个类型,那么这个需要怎么做呢?

导言:我们都知道,ts 具有类型推导,并且可以很好的进行智能的类型推导。但是如果我们想要手动的来进行类型推导 —— 通过已知的类型来推断另一个类型,那么这个需要怎么做呢?


关键字


主要的关键字有以下几个: typeof,in, keyof 等关键字


typeof关键字


大家看到typeof, 肯定会说 js 中已经存在了哇,但是ts 中的typeof 有不一样的用法:


20210203145611707.png


这里ts 在 类型检查的时候报错,typeof 用在类型检查的位置。所以,在这里typeof的作用是:获取某个数据的类型, 上面的c 的类型是b的变量,这个b又是const定义的(const 和 let 定义的区别在于 const 定义常量, let 定义变量,详细)常量的值一般在声明的时候就要赋值,所以b 的类型不是string, 而是一个字面量:


2021020315094450.png


如何把上面代码修改的不报错呢?


解决方法:


  • 方法一: 把const 修改成 let


20210203153520402.png


-方法二: 手动给const 声明类型:


20210203153809391.png


由上面的这个小例子,我们可以得出:TS中的typeof,书写的位置在类型约束的位置上。表示:获取某个数据的类型 但是typeof 作用于类的时候,确实一个类的构造函数。


20210203160639290.png

20210203160716238.png


keyof 关键字


作用于类、接口、类型别名,用于获取其他类型中的所有成员名组成的联合类型


20210203161839682.png


获取多个级联类型的交集


20210203162132345.png


如果没有交集的话,会类型推导出一个never类型


2021020316240388.png


获取多个级联类型的并集


20210203162303726.png


in 关键字


该关键字往往和keyof联用,限制某个索引类型的取值范围。


20210203171220579.png

20210203174039719.png


TS中预设的类型演算


Partial<T> 将类型T中的成员变为可选


样列


20210203174353650.png


原理分析


/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P]; // 使用泛型,把每一个属性都加上了可选的符号
};


Required<T> 将类型T中的成员变为必填


样列


20210203174541899.png


原理分析


/**
 * Make all properties in T required
 */
type Required<T> = {
    [P in keyof T]-?: T[P];  // 这里的 - 号是去除条件 
};


Readonly<T> 将类型T中的成员变为只读


样列


20210203175510603.png


源码分析


/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P]; // 就是在前面加了一个修饰符
};


Exclude<T, U> 从T中剔除可以赋值给U的类型。


样例


20210203182002938.png


源码分析


/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T; // 通过继承来实在U 包含 T


Extract<T, U> 提取T中可以赋值给U的类型。


样例


20210203182652252.png


源码分析


/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never; // 和上面的exclude 相反的


NonNullable<T> 从T中剔除null和undefined。


样例


20210203182854642.png


源码分析


/**
 * Exclude null and undefined from T
 */
type NonNullable<T> = T extends null | undefined ? never : T;


ReturnType<T> 获取函数返回值类型。


样例


-方式一:


20210203183418261.png


  • 方式二:


20210203183456808.png


InstanceType<T> 获取构造函数类型的实例类型。


20210203195220939.png

相关文章
|
27天前
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
189 82
|
4月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
77 6
|
4月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
71 2
|
4月前
|
JavaScript 安全 前端开发
TypeScript类型声明:基础与进阶
通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
72 2
|
4月前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
5月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
5月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
5月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
4月前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
58 0
|
5月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
87 0