Tạo type property từ object

Muốn lấy chỉ property từ object

📄️ Tạo type key từ object

Muốn lấy chỉ key từ object

Trái ngược với trang trước, mục tiêu là lấy union type chỉ của property từ object. Lần này cũng giống như lần trước, giả sử có message sau được định nghĩa.

ts
const conf = {
  en: "Are you sure?",
  fr: "Êtes-vous sûr?",
  es: "Está seguro?",
  ja: "よろしいですか？",
  zh: "您确定吗？",
};

ts
const conf = {
  en: "Are you sure?",
  fr: "Êtes-vous sûr?",
  es: "Está seguro?",
  ja: "よろしいですか？",
  zh: "您确定吗？",
};

Cuối cùng, union type như sau là mục tiêu lần này.

ts
type ConfirmationMessage =
  | "Are you sure?"
  | "Êtes-vous sûr?"
  | "Está seguro?"
  | "よろしいですか？"
  | "您确定吗？";

ts
type ConfirmationMessage =
  | "Are you sure?"
  | "Êtes-vous sûr?"
  | "Está seguro?"
  | "よろしいですか？"
  | "您确定吗？";

Để giải bài toán lần này

Lần này có thể thực hiện bằng cách kết hợp phương pháp tạo type từ object đã giới thiệu trước đó và Mapped Types.

📄️ Tạo type từ object

Trong nhiều ngôn ngữ, coding bắt đầu bằng việc định nghĩa struct, object bằng type, nhưng TypeScript có nguồn gốc từ JavaScript nên thường không có quy định như vậy.

📄️ Tạo type key từ object

Muốn lấy chỉ key từ object

Cách tiếp cận là đầu tiên tạo type key từ object, sử dụng Mapped Types để tham chiếu type property của object, và lấy chúng dưới dạng literal type.

Tạo type key

Tạo type key giống với trang trước. Có thể lấy được union type của ngôn ngữ là key bằng cách sau. Để biết chi tiết, hãy xem trang tạo type key từ object.

📄️ Tạo type key từ object

Muốn lấy chỉ key từ object

ts
type Language = keyof typeof conf;
        
type Language = "en" | "fr" | "es" | "ja" | "zh"

ts
type Language = keyof typeof conf;
        
type Language = "en" | "fr" | "es" | "ja" | "zh"

Mapped Types

Sử dụng Mapped Types để tham chiếu type property của object. Khi đó sử dụng typeof để tạo type từ object gốc.

ts
type ConfirmationMessage = (typeof conf)[Language];
             
type ConfirmationMessage = string

ts
type ConfirmationMessage = (typeof conf)[Language];
             
type ConfirmationMessage = string

Làm cho có thể lấy literal type

Nếu để nguyên như này, giống như tạo type từ object, type không phải là literal type. Nghĩa là chỉ là union type của string type tức là string type. Vì vậy, thêm as const vào object gốc conf.

ts
const conf = {
  en: "Are you sure?",
  fr: "Êtes-vous sûr?",
  es: "Está seguro?",
  ja: "よろしいですか？",
  zh: "您确定吗？",
} as const;

ts
const conf = {
  en: "Are you sure?",
  fr: "Êtes-vous sûr?",
  es: "Está seguro?",
  ja: "よろしいですか？",
  zh: "您确定吗？",
} as const;

Tóm tắt

Tùy ý gán type key Language đã định nghĩa vào phần key của Mapped Types. Hình thức cuối cùng như sau.

ts
const conf = {
  en: "Are you sure?",
  fr: "Êtes-vous sûr?",
  es: "está seguro?",
  ja: "よろしいですか？",
  zh: "您确定吗？",
} as const;
 
type ConfirmationMessage = (typeof conf)[keyof typeof conf];
             
type ConfirmationMessage = "Are you sure?" | "Êtes-vous sûr?" | "está seguro?" | "よろしいですか？" | "您确定吗？"

ts
const conf = {
  en: "Are you sure?",
  fr: "Êtes-vous sûr?",
  es: "está seguro?",
  ja: "よろしいですか？",
  zh: "您确定吗？",
} as const;
 
type ConfirmationMessage = (typeof conf)[keyof typeof conf];
             
type ConfirmationMessage = "Are you sure?" | "Êtes-vous sûr?" | "está seguro?" | "よろしいですか？" | "您确定吗？"

Đừng quên as const.