TypeScript Official Manual Translation Project [7]: Type Manipulation-Type Operator

• Description : There is currently no Chinese translation of the latest official documents of TypeScript on the Internet, so there is such a translation plan. Because I am also a beginner in TypeScript, I cannot guarantee that the translation will be 100% accurate. If there are errors, please point out in the comment section;
• translation content : The tentative translation content is TypeScript Handbook , and other parts of the translation document will be added later;
• project address : TypeScript-Doc-Zh , if it helps you, you can click a star~

Official document address of this chapter: Keyof Type Operator , Typeof Type Operator

Keyof type operator

keyof type operator

keyof type operator accepts an object type as a parameter, and based on its key generates a combined type composed of string literals or numeric literals. The following type P equivalent to type "x" | "y" :

type Point = { x: number; y: number };
type P = keyof Point;
    ^
   // type P = keyof Point     

If the type of keyof string or number keyof will return the type of index signature:

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish;
     ^
   // type A = number
 
type Mapish = { [k: string]: boolean };
type M = keyof Mapish;
     ^
   // type M = string | number

Note that in this example, M represents the type string | number -this is because the key of the JavaScript object is always forced to be converted to a string, so obj[0] equivalent to obj["0"] .

keyof type and the mapping type will play a great role when combined, and we will also introduce it in the subsequent chapters.

Typeof type operator

typeof type operator

typeof operator that can be used in expression context:

// 打印 "string"
console.log(typeof "Hello world");

typeof operator that can be used in type context, allowing you to refer to the type of a variable or attribute:

let s = "hello";
let n: typeof s;
    ^
    // let n: string

It is not very useful for basic types like the above, but if you combine typeof with other type operators, you can easily express multiple modes. For example, let's first look at the predefined type ReturnType<T> . It can accept a function type and return its return value type:

type Predicate = (x: unknown) => boolean;
type K = ReturnType<Predicate>;
     ^
    // type K = boolean     

If you directly pass the function name as a parameter to ReturnType , then we will see an indicative error:

function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<f>;
                  ^    
// 'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?

Remember, value and type are not the same, here should be passed in type instead of value, so we can use typeof to refer to the type of f

function f(){
    return {
        x: 10,
        y: 3
    };
}
type P = ReturnType<typeof f>;
     ^
   /* type P = {
        x: number;
        y: number;
     }            */   

limit

TypeScript intentionally restricts the types of expressions that typeof Specifically, tyepof can only act on identifiers (such as variable names) or their attributes. This prevents developers from writing code that they think can be executed but cannot actually be executed:

// 这里应该改用 = ReturnType<typeof msgbox>
let shouldContinue: typeof msgbox("Are you sure you want to continue?");
                            ^            
// ',' expected.