Typescript PickとOmit

Typescriptで、
Todoの型指定としてtodo.tsを作成

export type TodoType = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

使いたい側のコンポーネントでtodo.tsをimportして使用する時

Pick

Pickを使うと、指定したい型の中から使いたいプロパティだけを抜き出せる

import { TodoType } from "./types/todo";

export const Todo = (
  props: Pick<TodoType, "userId" | "title" | "completed">
) => {
  const { title, userId, completed = false } = props;
  const completeMark = completed ? "[完]" : "[未]";
  return (
    <>
      <p>{`${completeMark} ${title}(ユーザー：${userId})`}</p>
    </>
  );
};

Omit

Pickの逆。使いたくないプロパティを除外できる。

import { TodoType } from "./types/todo";

export const Todo = (props: Omit<TodoType, "id">) => {
  const { title, userId, completed = false } = props;

  const completeMark = completed ? "[完]" : "[未]";
  return (
    <>
      <p>{`${completeMark} ${title}(ユーザー：${userId})`}</p>
    </>
  );
};