1. typeof (in TS it is "getting the type")

⚠️ TS’s typeof ≠ JS’s typeof

Scenario	JS typeof	TS typeof
Function	Runtime	Compile time
return	string	type

1️⃣ Basic usage

const user = {
  id: 1,
  name: "Tom",
  age: 18,
};

type User = typeof user;

Equivalent to:

type User = {
  id: number;
  name: string;
  age: number;
};

📌 Core purpose: Deducing "type" from "value"

2️⃣ Common usage scenarios

✅ Scenario 1: Configuration object → automatic synchronization of types

const config = {
  mode: "dark",
  size: "small",
};

type Config = typeof config;

When you change config, the type will change automatically and will not be out of sync 👍

✅ Scenario 2: Function/hook return value type

function useUser() {
  return {
    name: "Tom",
    age: 18,
  };
}

type User = ReturnType<typeof useUser>;

(typeof + tool type is Wang Zha)

2. keyof (get the key of the object)

1️⃣ Basic usage

type User = {
  id: number;
  name: string;
  age: number;
};

type UserKeys = keyof User;

Result:

type UserKeys = "id" | "name" | "age";

📌 keyof = turn key into a union type

2️⃣The actual value of keyof

✅ Restriction parameters can only be the key of the object

function getValue<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

getValue(user, "name"); // ✅
getValue(user, "xxx"); // ❌

This is one of the core capabilities of TS type safety.

3. typeof + keyof (combination punch)

1️⃣ Get key from "object value"

const user = {
  id: 1,
  name: "Tom",
  age: 18,
};

type UserKeys = keyof typeof user;

Result:

"id" | "name" | "age";

📌 This is the most common way of writing

2️⃣ Replace enum (strongly recommended for front-end)

const STATUS = {
  PENDING: "pending",
  SUCCESS: "success",
  ERROR: "error",
} as const;

type Status = (typeof STATUS)[keyof typeof STATUS];

Result:

type Status = "pending" | "success" | "error";

💥 Vue / React state management standard writing method

4. Advanced: The importance of as const (must understand)

❌ No as const

const user = {
  role: "admin",
};

type Role = typeof user.role;
// string ❌

✅ Use as const

const user = {
  role: "admin",
} as const;

type Role = typeof user.role;
// 'admin' ✅

📌 Conclusion:

If you want to get a "literal type", you must use as const

5. Common variations of keyof

1️⃣ keyof any

type Keys = keyof any;
// string | number | symbol

2️⃣ keyof + mapping type

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

This is the underlying principle of Readonly<T>.

6. Examples of real front-end scenarios

1️⃣ React props verification

const props = {
  size: "small",
  type: "primary",
} as const;

type Props = typeof props;
type PropKeys = keyof Props;

2️⃣ Vue emit event

const emits = {
  submit: (value: string) => true,
  cancel: () => true,
};

type EmitName = keyof typeof emits;
// 'submit' | 'cancel'

3️⃣ Form field constraints

type Form = {
  username: string;
  password: string;
};

function updateField(key: keyof Form, value: string) {}

7. Summary of common pitfalls (must ask in interviews)

❌ keyof is used on values

keyof user // ❌
keyof typeof user // ✅

❌ typeof cannot be used on types

type A = { a: number };
type B = typeof A; // ❌

❌ forgot as const

const arr = ["a", "b"];
type A = (typeof arr)[number]; // string ❌

const arr = ["a", "b"] as const;
type A = (typeof arr)[number]; // 'a' | 'b' ✅

8. One sentence memory method 🧠

• typeof: from value → type
• keyof: union from type → key
• typeof + keyof: union from object → key