[TypeScript] Deeply mark all the properties of a type as read-only in TypeScript
typescript in The of type all as Read
2023-09-14 08:59:15 时间
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] Write clean Type 2 - Reduce the usage in generic slot
- [Typescript] Generics in Type Arguments
- [Typescript] Function scope in typescript
- [Typescript] Tips: Use 'in' operator to transform a union to another union(watched)
- [TypeScript] Typescript Intersection & Union Types
- [Typescript] Dynamic types: Use TypeScript's Mapped Types and Template Literal Types Together
- [Typescript] Narrow the unknown Type with TypeScript's Assertion Functions
- [React] Use React.ReactNode for the children prop in React TypeScript components and Render Props
- [TypeScript] Query Properties with keyof and Lookup Types in TypeScript
- [Typescript] Sorting arrays in TypeScript
- [TypeScript] Typescript Interfaces vs Aliases Union & Intersection Types
- [Typescript] Introduction to Generics in Typescript
- [Typescript 4.9] TypeScript 4.9: satisfies operator
- [Typescript] Use Generics in a Reduce Function
- [Typescript] Using Generic Context to Avoid Distributivity in Conditional Types
- [Typescript] Use the Optional Chaining Operator in TypeScript
- [Typescript] Create Type From Any Given Data in TypeScript
- [Typescript] Exclude Properties from a Type in TypeScript (Omit)
- [TypeScript] Deeply mark all the properties of a type as read-only in TypeScript
- [Tools] Unlock TypeScript's Features in Vanilla JS with @ts-check and JSDoc
- [TypeScript] Use the JavaScript “in” operator for automatic type inference in TypeScript
- [Typescript] Installing Promise Type Definitions Using the lib Built-In Types
- [TS] Implement a singly linked list in TypeScript
- Unexpected XML declaration. The XML declaration must be the first node in the document and no white
- Spark SQL 源代码分析之 In-Memory Columnar Storage 之 in-memory query
- Caused by: org.xml.sax.SAXParseException; systemId: file:/home/hadoop/hive-0.12.0/conf/hive-site.xml; lineNumber: 5; columnNumber: 2; The markup in the document following the root element must be well
- The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar