We will look at how we can use mapped types, conditional types, self-referencing types and the “infer” keyword to create a reusable generic type that traverses down the properties of an object and marks of all them as read-only. This is especially useful when used with Redux, to ensure our whole state tree is marked as read-only and immutable.

For example we have complex interface:

interface IRootState {
userId: string;
showCompletedOnly: boolean;
todoTypes: string[];
todos: ITodo[];
iconGrid: string[][];
} interface IEmail {
from: string;
to: string[];
body: string;
} interface ITodo {
isCompleted: boolean;
text: string;
linkedEmail: IEmail;
}

If we want to add readonly to all the props of IRootState. We want to do it automaticlly.

type DeepReadonlyObject<T> = { readonly [K in keyof T]: DeepReadonly<T[K]> };

type DeepReadonly<T> = T extends (infer E)[] ?
ReadonlyArray<DeepReadonlyObject<E>> :
T extends object ? DeepReadonlyObject<T> :
T;
type IReadonlyRootState = DeepReadonly<IRootState>;

[TypeScript] Deeply mark all the properties of a type as read-only in TypeScript的更多相关文章

  1. [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript

    With properties we can follow a one-way parent→child flow communication between components. This les ...

  2. [TypeScript] Use the JavaScript “in” operator for automatic type inference in TypeScript

    Sometimes we might want to make a function more generic by having it accept a union of different typ ...

  3. Checking Types Against the Real World in TypeScript

    转自:https://www.olioapps.com/blog/checking-types-real-world-typescript/ This is a follow-up to Type-D ...

  4. TypeScript - Classes

    简介 JavaScript语言基于函数和原型链继承机制的方式构建可重用的组件.这对于OO方面编程来说显得比较笨拙.在下一代的JavaScript标准ECMAScript 6为我们提供了基于class ...

  5. TypeScript中的怪语法

    TypeScript中的怪语法 如何处理undefined 和 null undefined的含义是:一个变量没有初始化. null的含义是:一个变量的值是空. undefined 和 null 的最 ...

  6. Angular基础(三) TypeScript

    一.模仿Reddit a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为: 界面可以看到了: b) 对于界面输入的数据,获 ...

  7. typescript枚举,类型推论,类型兼容性,高级类型,Symbols(学习笔记非干货)

    枚举部分 Enumeration part 使用枚举我们可以定义一些有名字的数字常量. 枚举通过 enum关键字来定义. Using enumerations, we can define some ...

  8. Declaration Merging with TypeScript

    原文:https://blog.oio.de/2014/03/21/declaration-merging-typescript/ Why might you need this? There can ...

  9. [转]TypeScript Quick start

    本文转自:http://www.typescriptlang.org/docs/tutorial.html Quick start Get started with a simple TypeScri ...

随机推荐

  1. iOS开发-Runloop详解(简书)

    不知道大家有没有想过这个问题,一个应用开始运行以后放在那里,如果不对它进行任何操作,这个应用就像静止了一样,不会自发的有任何动作发生,但是如果我们点击界面上的一个按钮,这个时候就会有对应的按钮响应事件 ...

  2. xdebug参数说明

    ;;;;;;;;;;;;;;;;;;;;;;;;; Basic Features; xdebug基本功能,如堆栈跟踪,递归错误安全输出,时间内存跟踪等;;;;;;;;;;;;;;;;;;;;;;;;; ...

  3. 【转载】bash: ifconfig: command not found 解决办法

    原本使用ifconfig 可以使用,今天是怎么了,可能安装软件修改了,百度~~ [oracle@localhost /]$ ifconfig 提示:“bash: ifconfig: command n ...

  4. Codeforces Round #424 A(模拟)

    #include<cstdio> ]; int main(){ scanf("%d",&n); ;i<=n;++i)scanf("%d" ...

  5. ZCMU训练赛-J(循环节+字符串处理)

    J - Java Beans There are N little kids sitting in a circle, each of them are carrying some java bean ...

  6. java 时间格式化中的模式字母

    java日期格式化中的模式字母有特定的意义,由于没有注意,今天在做工程的时候导致出现了奇怪的日期: 错误写法如下: 然而得到了错误的结果: 正确写法如下: 这样就得到了正确的结果 mm指的是分钟,MM ...

  7. csu1216( Trie )

    csu1216 题意 给定一些数,求这些数中两个数的异或值最大的那个值. 分析 转化成二进制数存入字典树,比如说要查询 \(0011\) ,显然和 \(1100\) 结合最优,所以我们直接在字典树上寻 ...

  8. POJ 2115 C Looooops(Exgcd)

    [题目链接] http://poj.org/problem?id=2115 [题目大意] 求for (variable = A; variable != B; variable += C)的循环次数, ...

  9. [CF480E]Parking Lot

    题意:给一个$n\times m$的网格,初始时有些地方不能选,给$k$个询问$(x,y)$,每次令$(x,y)$不能选,然后询问最大子正方形的边长 如果按原题来做,禁止选一个点对答案的影响是极其鬼畜 ...

  10. 【树链剖分】【函数式权值分块】bzoj1146 [CTSC2008]网络管理Network

    裸题,直接上.复杂度O(n*sqrt(n)*log(n)). //Num[i]表示树中的点i在函数式权值分块中对应的点 //Map[i]表示函数式权值分块中的点i在树中对应的点 #include< ...