The keyof operator produces a union type of all known, public property names of a given type. You can use it together with lookup types (aka indexed access types) to statically model dynamic property access in the type system.

Take away:

1. extends

2. keyof

interface Todo {
id: number;
text: string;
completed: boolean;
} const todo: Todo = {
id: ,
text: "Buy milk",
completed: false
} // K extends keyof T: K will be the unit types of 'id', 'text', 'completed'
// T[K] is the lookup tells the Typescript the correct return type
function prop<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
} type TodoId = Todo['id'];
type TodoText = Todo['text'];
type TodoCompleted = Todo['completed']; const id: TodoId = prop(todo, 'id'); // type number
const text: TodoText = prop(todo, 'text'); // type string
const completed: TodoCompleted = prop(todo, 'completed'); // type boolean

[TypeScript] Query Properties with keyof and Lookup Types in TypeScript的更多相关文章

  1. [TypeScript] Understand lookup types in TypeScript

    Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the proper ...

  2. [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 ...

  3. [TypeScript] Deeply mark all the properties of a type as read-only in TypeScript

    We will look at how we can use mapped types, conditional types, self-referencing types and the “infe ...

  4. [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 ...

  5. [TypeScript] Represent Non-Primitive Types with TypeScript’s object Type

    ypeScript 2.2 introduced the object, a type that represents any non-primitive type. It can be used t ...

  6. [TypeScript] Using Assertion to Convert Types in TypeScript

    Sometimes the compiler needs help figuring out a type. In this lesson we learn how to help out the c ...

  7. [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 ...

  8. [TypeScript] Make Properties and Index Signatures Readonly in TypeScript

    TypeScript 2.0 introduced the readonly modifier which can be added to a property or index signature ...

  9. [TypeScript] Using Interfaces to Describe Types in TypeScript

    It’s easy to pass the wrong value to a function. Typescript interfaces are great because they catch ...

随机推荐

  1. CAD交互绘制文字(网页版)

    在CAD设计时,需要绘制文字,用户可以设置设置绘制文字的高度等属性. 主要用到函数说明: _DMxDrawX::DrawText 绘制一个单行文字.详细说明如下: 参数 说明 DOUBLE dPosX ...

  2. redis基础一_常用指令

    # Redis configuration file example. # # Note that in order to read the configuration file, Redis mus ...

  3. C++ 给自己的扫盲笔记

    1.运算符new分配内存的格式: 指针变量名 = new 类型: 如分配一个20字节的name变量    :name = new char[20]; 2.strlen(s);函数: 返回字符串s的长度 ...

  4. soc desgin 目前需要做的事情

    1.熟练的画时序图 达到一旦有想法可以立即通过时序图表达出来. 2.下面是项目中经常用到的典型设计 2.1串并互相转换 2.2cdc 2.3握手协议 2.4cgc(门控时钟) 2.5AHB2reg文件 ...

  5. python_random模块

    random模块 import random print(random.random()) # 大于0且小于1之间的小数 print(random.randint(1, 6)) # 大于等于1且小于等 ...

  6. Jedis 工具类

    package com.pig4cloud.pigx.admin.utils; import redis.clients.jedis.*; import java.util.ArrayList; im ...

  7. MyISAM和InnoDB索引实现对比

    MyISAM索引实现 MyISAM引擎使用B+Tree作为索引结构,叶节点的data域存放的是数据记录的地址.如图:  这里设表一共有三列,假设我们以Col1为主键,则上图是一个MyISAM表的主索引 ...

  8. 【06】Firebug记录Javascript日志

    Firebug记录Javascript日志 你可以使用Firebug来生成日志. 这有助于我们调试web页面并发现页面的错误. 在Firefox浏览器中执行以下代码: <!DOCTYPE HTM ...

  9. Fiddler抓包-会话框添加查看get与post请求类型选项

    from:https://www.cnblogs.com/yoyoketang/p/7061990.html 在使用fiddler抓包的时候,查看请求类型get和post每次只有点开该请求,在Insp ...

  10. python003 Python3 基本数据类型

    Python3 基本数据类型Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建.在 Python 中,变量就是变量,它没有类型,我们所说的"类型&qu ...