[TypeScript] Transform Existing Types Using Mapped Types in TypeScript
Mapped types are a powerful and unique feature of TypeScript's type system. They allow you to create a new type by transforming all properties of an existing type according to a given transformation function. In this lesson, we'll cover mapped types like Readonly<T>
or Partial<T>
that ship with the TypeScript compiler, and we'll also explore how to create our own type transformations.
There are few mapped types built-in:
/**
* Make all properties in T optional
*/
type Partial<T> = {
[P in keyof T]?: T[P];
}; /**
* Make all properties in T readonly
*/
type Readonly<T> = {
readonly [P in keyof T]: T[P];
}; /**
* From T pick a set of properties K
*/
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
}; /**
* Construct a type with a set of properties K of type T
*/
type Record<K extends string, T> = {
[P in K]: T;
};
Take readonly as an example, the output is like this:
interface Point {
x: number;
y: number;
}
ReadonlyPoint = Readonly<Point>; type ReadonlyPoint = {
readonly x: number;
readonly y: number;
}
So for each props in Point, we append 'readonly' type for it.
The way type resolve:
interface Point {
x: number;
y: number;
} // From
type ReadonlyPoint = {
readonly [P in keyof Point]: Point[P]
} type ReadonlyPoint = {
readonly [P in "x" | "y"]: Point[P]
} type ReadonlyPoint = {
readonly x: Point["x"];
readonly y: Point["y"];
} // To
type ReadonlyPoint = {
readonly x: number
readonly y: number;
}
The same process can be done with Partial type:
type PartialPoint = Partial<Point>; // From
type PartialPoint = {
[P in keyof T]?: T[P];
} type PartialPoint = {
[P in keyof Point]?: Point[P];
} type PartialPoint = {
[P in "x" | "y"]?: Point[P];
} type PartialPoint = {
x?: Point["x"];
y?: Point["y"];
} // To
type PartialPoint = {
x?: number;
y?: number;
}
We can also write Nullable type by ourselves:
type Nullable<T> = {
[P in keyof T]: T[P] | null
}
For each Prop fo Type T, it can be its value or null.
We can also combine different type together:
type Nullable<T> = {
[P in keyof T]: T[P] | null
} type Stringify<T> = {
[P in keyof T]: string
} type NullablePoint = Nullable<Point>
type PartialNullablePoint = Partial<Nullable<Stringify<Point>>>
[TypeScript] Transform Existing Types Using Mapped Types in TypeScript的更多相关文章
- [TypeScript] Type check JavaScript files using JSDoc and Typescript 2.5
Typescript 2.5 adds JSDoc type assertion support for javascript file via ts-check service. First of ...
- [TypeScript] Model Alternatives with Discriminated Union Types in TypeScript
TypeScript’s discriminated union types (aka tagged union types) allow you to model a finite set of a ...
- [TypeScript] Union Types and Type Aliases in TypeScript
Sometimes we want our function arguments to be able to accept more than 1 type; e.g. a string or an ...
- [TypeScript] Dynamically Allocate Function Types with Conditional Types in TypeScript
Conditional types take generics one step further and allow you to test for a specific condition, bas ...
- [TypeScript] Typescript Interfaces vs Aliases Union & Intersection Types
TypeScript has 'interface' and 'type', so when to use which? interface hasName { firstName: string; ...
- [TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers
Using the optional “+” sign together with mapped type modifiers, we can create more explicit and rea ...
- Java中的Union Types和Intersection Types
前言 Union Type和Intersection Type都是将多个类型结合起来的一个等价的"类型",它们并非是实际存在的类型. Union Type Union type(联 ...
- Unable to create a constant value of type 'System.Object'. Only primitive types or enumeration types are supported in this context.
代码如下: var query = from s in db.LoginUserServices join ss in db.Services on s.ServiceType equals ss.C ...
- [TypeScript] Restrict null and undefined via Non-Nullable-Types in TypeScript
This lesson introduces the --strictNullChecks compiler option and explains how non-nullable types di ...
随机推荐
- clone对象或数组
function clone(obj) { var o; if (typeof obj == "object") { if (obj === null) { o = null; } ...
- python爬虫---从零开始(一)初识爬虫
我们开始来谈谈python的爬虫. 1,什么是爬虫: 网络爬虫是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕虫.互联网犹如一个大蜘蛛 ...
- PHP23 AJAX分页
模型代码设计 以留言信息管理为例. 获取根据条件查询记录总数和分页数据. <?php namespace application\admin\models; use core\mybase\Mo ...
- HDU1116(欧拉路径+并查集)
题意: 给出一些字符串,有这两个字符串,如果第一个字符串的最后一个字母和第二个字符串的第一个字母是一样的,则这两个字符串是可以连接在一起的. 问给出的这些字符串能否串成一个环或者一整个链. 思路: 将 ...
- dll加载遇到的问题
dll加载有两种形式,分别是隐式加载和显式加载. 隐式加载在编译的时候就将dll文件编译到可执行文件中去,程序发布的时候可以不用讲dll带着.缺点是,这样编译出来后,程序会很大. 显式加载是指在程序运 ...
- kvm客户机存储方式
前面介绍了存储的配置和qemu-img工具来管理镜像,在QEMU/KVM中,客户机镜像文件可以由很多种方式来构建,其中几种如下: 1) 本地存储的客户机镜像文件. 2) 物理磁盘或磁盘分区. 3) L ...
- Python数据可视化库-Matplotlib(一)
今天我们来学习一下python的数据可视化库,Matplotlib,是一个Python的2D绘图库 通过这个库,开发者可以仅需要几行代码,便可以生成绘图,直方图,功率图,条形图,错误图,散点图等等 废 ...
- 使用solrJ创建索引
sorlJ官方介绍谷歌翻译 SolrJ是一个API,可以让Java应用程序轻松与Solr对话. SolrJ隐藏了很多连接到Solr的细节,并允许您的应用程序通过简单的高级方法与Solr进行交互. p ...
- UVa 12118 检查员的难题 (dfs判连通, 构造欧拉通路)
题意: 分析: 欧拉通路:图连通:图中只有0个或2个度为奇数的结点 这题我们只需要判断选择的边构成多少个联通块, 再记录全部联通块一共有多少个奇度顶点. 然后我们在联通块中连线, 每次连接两个联通块就 ...
- 在Ubuntu 16.04 LTS上用g++和gcc编译C/C++代码错误提示“.../x86_64-linux-gnu/crt1.o: ELF section name out of range”
(有一些图片我是直接从个人的CSDN博客上复制来的) 最近一个多月来,我曾经多次尝试在Ubuntu 16.04 LTS上使用g++和gcc(这俩好像合起来叫MinGW?)来编译C/C++代码,但是在解 ...