Utility Types in TypeScript

TypeScript 提供了一些內建的 Utility Types，可以幫助我們更方便地操作型別。

Utility Types

Pick

Pick Utility Type 可以從一個 Interface 中選擇一些屬性，形成一個新的 Interface。

當你只需要某個 Interface 的部分屬性時，可以使用 Pick Utility Type。

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

// 只選擇 description 和 completed 屬性
type TodoPreview = Pick<Todo, 'description' | 'completed'>;

function updateTodo(todo: Todo, fieldsToUpdate: TodoPreview) {
    return {
        ...todo,
        ...fieldsToUpdate,
    };
}

const todo1 = updateTodo(
    {
        title: 'Old Title',
        description: 'Old Description',
        completed: false,
    },
    // 只需要傳入 description 和 completed 屬性
    {
        description: 'New Description',
        completed: true,
    },
);

console.log(todo1);

Omit

Omit Utility Type 與 Pick Utility Type 相反，可以從一個 Interface 中排除一些屬性，形成一個新的 Interface。

當你只需要某個 Interface 的部分屬性時，可以使用 Omit Utility Type。

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

// 排除 description 和 completed 屬性
type TodoPreview = Omit<Todo, 'description' | 'completed'>;

function updateTodo(todo: Todo, fieldsToUpdate: TodoPreview) {
    return {
        ...todo,
        ...fieldsToUpdate,
    };
}

const todo1 = updateTodo(
    {
        title: 'Old Title',
        description: 'Old Description',
        completed: false,
    },
    // 只需要傳入 title 屬性
    {
        title: 'New Title',
    },
);

console.log(todo1);

Partial

Partial Utility Type 可以將一個 Interface 的所有屬性都轉換為可選的 (optional)。

當你只需要某個 Interface 的部分屬性時，可以使用 Partial Utility Type。

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

// 將所有屬性都轉換為可選的
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
    return {
        ...todo,
        ...fieldsToUpdate,
    };
}

const todo1 = updateTodo(
    {
        title: 'Old Title',
        description: 'Old Description',
        completed: false,
    },
    // 只需要傳入 title 和 description 屬性
    {
        title: 'New Title',
        description: 'New Description',
    },
);

console.log(todo1);

Required

Required Utility Type 可以將一個 Interface 的所有屬性都轉換為必填的 (required)。

Interface 有些屬性可能為可選的 (optional)，使用 Required Utility Type 可以將這些可選的屬性轉換為必填的。

interface Todo {
    title: string;
    // description 是可選的
    description?: string;
    completed: boolean;
}

// 將所有屬性都轉換為必填的
function updateTodo(todo: Todo, fieldsToUpdate: Required<Todo>) {
    return {
        ...todo,
        ...fieldsToUpdate,
    };
}

const todo1 = updateTodo(
    {
        title: 'Old Title',
        description: 'Old Description',
        completed: false,
    },
    // 只需要傳入 title 和 description 屬性
    {
        title: 'New Title',
        // description 變成必填的
        description: 'New Description',
        completed: true,
    },
);

console.log(todo1);

Readonly

Readonly Utility Type 可以將一個 Interface 的所有屬性都轉換為只讀的 (readonly)。

當你只需要某個 Interface 的部分屬性時，可以使用 Readonly Utility Type。

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type T = Readonly<Todo>;

const todo1: T = {
    title: 'Old Title',
    description: 'Old Description',
    completed: false,
};

// 下面這行會出現錯誤，因為 title 是只讀的
// Cannot assign to 'title' because it is a read-only property.(2540)
todo1.title = 'New Title';

Record

Record Utility Type

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

// 建立一個 key-value pair 的 type，key 是 string，value 是 User
type T = Record<string, User>;

const a: T = {
    '1_allen': {
        id: '1',
        name: 'Allen',
        age: 25,
    },
    '2_bob': {
        id: '2',
        name: 'Bob',
        age: 30,
    },
};

// 建立一個 key-value pair 的 type，key 是 "admin" 或 "user"，value 是 User
type U = Record<'admin' | 'user', User>;

const b: U = {
    admin: {
        id: '1',
        name: 'Allen',
        age: 25,
    },
    user: {
        id: '2',
        name: 'Bob',
        age: 30,
    },
};

Extract

可以從 Type 中提取出符合條件的 Type。

type Role = 'admin' | 'user' | 'guest';
type Permission = 'read' | 'write' | 'delete';
type OtherRole = 'testing' | 'admin' | 'user' | 'guest' | 'moderator';

type AdminRole = Extract<Role, 'admin'>;
type UserPermission = Extract<Permission, 'read' | 'write'>;
// 類似交集，只提取 Role 在 OtherRole 中的共通部分
type T = Extract<Role, OtherRole>;

Exclude

可以從 Type 中排除出不符合條件的 Type。

type Role = 'admin' | 'user' | 'guest';
type Permission = 'read' | 'write' | 'delete';
type OtherRole = 'testing' | 'admin' | 'user' | 'guest' | 'moderator';

type AdminRole = Exclude<Role, 'admin'>;
type UserPermission = Exclude<Permission, 'read' | 'write'>;
// 類似差集，排除 Role 在 OtherRole 中的共通部分
type T = Exclude<Role, OtherRole>;

ReturnType

ReturnType Utility Type 可以從一個 Function Type 中提取出返回值的 Type。

function getUser() {
    return { id: 1, name: 'Allen', age: 25 };
}

type T = ReturnType<typeof getUser>;

const user: T = {
    id: 1,
    name: 'Allen',
    age: 25,
};

Parameters

Parameters Utility Type 可以從一個 Function Type 中提取出參數的 Type。

當你有一個函式的參數想參照其他函式的參數時，可以使用 Parameters Utility Type。

function getUser(id: number) {
    return { id, name: 'Allen', age: 25 };
}

type T = Parameters<typeof getUser>;

const id: T = [1];

ConstructorParameters

ConstructorParameters Utility Type 可以從一個 Class 中提取出建構子的參數的 Type。

class User {
    constructor(
        public id: number,
        public name: string,
        public age: number,
    ) {}
}

type T = ConstructorParameters<typeof User>;

const user: T = [1, 'Allen', 25];

InstanceType

有點莫名其妙的 Utility Type

InstanceType Utility Type 可以從一個 Class 中提取出建構子的返回值的 Type。

class User {
    constructor(
        public id: number,
        public name: string,
        public age: number,
    ) {}
}

type T = InstanceType<typeof User>;
// 上面這一句等同於下面這一句，所以 InstanceType 是用途有點微妙的 Utility Type
type T = User;

NonNullable

NonNullable Utility Type 可以從一個 Type 中排除出 null 和 undefined 的 Type。

type A = string | number | null | undefined;

// T 會排除掉 null 和 undefined，只剩下 string | number
type T = NonNullable<A>;

Awaited

Awaited Utility Type 可以從一個 Promise Type 中提取出返回值的 Type。

function getUser() {
    return Promise.resolve({ id: 1, name: 'Allen', age: 25 });
}

// T 會提取出 Promise 的返回值的 Type
// type T = { id: number; name: string; age: number }
type T = Awaited<ReturnType<typeof getUser>>;

字串相關的 Utility Type

type T = Uppercase<'hello'>; // "HELLO"
type T = Lowercase<'HELLO'>; // "hello"
type T = Capitalize<'hello'>; // "Hello"
type T = Uncapitalize<'Hello'>; // "hello"

參考資料