Open2

TS Tips

TypeScript
ピン留めされたアイテム
ken7253ken7253

Type Scriptの小さい実装テクニックまとめ

ken7253ken7253

型を直接渡さずに実装から型を抽出する

例えばこのような関数の実装があった場合

getPermittedActions.ts
/** ユーザー種別 */
type UserCategory = "premium" | "standard" | "non-profit";
/** 実行可能な行動 */
type PermittedActions = {
  removeAd: boolean;
  changeUserId: boolean;
};

/** ユーザーの種別から実行可能な行動を取得する関数 */
export const getPermittedActions:PermittedActions = (byUserCategory: UserCategory) => ({
  removeAd: byUserCategory === 'premium',
  changeUserId: byUserCategory === 'premium' || byUserCategory === 'non-profit'
});

このように型をexportするのではなく

getPermittedActions.ts
/** ユーザー種別 */
- type UserCategory = "premium" | "standard" | "non-profit";
+ export type UserCategory = "premium" | "standard" | "non-profit";
/** 実行可能な行動 */
- type PermittedActions = {
+ type PermittedActions = {
  removeAd: boolean;
  changeUserId: boolean;
};

/** ユーザーの種別から実行可能な行動を取得する関数 */
export const getPermittedActions:PermittedActions = (byUserCategory: UserCategory) => ({
  removeAd: byUserCategory === 'premium',
  changeUserId: byUserCategory === 'premium' || byUserCategory === 'non-profit'
});

利用側で関数から型を抽出する。

import { getPermittedActions } from "./getPermittedActions"

type UserCategory = Parameters<typeof getPermittedActions>[0];
type PermittedActions = ReturnType<typeof getPermittedActions>;