[TypeScript] Query Properties with keyof and Lookup Types in TypeScript

Posted 2020-10-14 Answer1215

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.

 

interface Todo {
    id: number;
    text: string;
    completed: boolean;
  }

  const todo: Todo = {
    id: 1,
    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<K extends keyof T, T>(key: K, obj: T): T[K] { 
    return obj[key];
}

const id = prop("id", todo);  // type number
const text = prop("text", todo); // type string
const completed = prop("completed", todo); // type boolean

console.log(id)
console.log(text)
console.log(completed)