8️⃣

[TypeScript UtilityTypes] Exclude

2024/01/08に公開

TypeScript

tech

TypeScript入門メモ
[Utility Types] Exclude について

Exclude<UnionType, ExcludedMembers>

公式ドキュメント

UnionType から ExcludedMembers に割り当て可能なすべてのユニオンメンバーを除外して構成される型

type T0 = Exclude<"a" | "b" | "c", "a">;
// type T0 = "b" | "c"

type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
// type T1 = "c";

type T2 = Exclude<string | number | (() => void), Function>;
// type T2 = string | number
 
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number };

type T3 = Exclude<Shape, { kind: "circle" }>
// type T3 = {
//     kind: "square";
//     x: number;
// } | {
//     kind: "triangle";
//     x: number;
//     y: number;
// }

サンプルコード

ディレクトリ構造をモデル化し、ExcludeでDirTreeの型定義に役立てるみたいなことはできた。

type DirNames = {
  [dirName: string]: string | string[] | DirNames | DirNames[];
};

type Dir = DirNames[string];

type DirTree = Exclude<DirNames[string], string | string[]>;

// ディレクトリ構造の例
const myDirectory: DirNames = {
  "src": {
    "app": ["app.module.ts", "app.component.ts"],
    "assets": ["logo.png", "styles.css"],
    "environments": {
      "environment.prod.ts": "",
      "environment.ts": ""
    }
  },
  "README.md": "",
  "package.json": ""
};

function extractSubdirectories(dir: DirNames): DirTree[] {
  let subdirectories: DirTree[] = [];
  for (const key in dir) {
    if (dir.hasOwnProperty(key)) {
      const value = dir[key];
      if (typeof value === "object" && !Array.isArray(value)) {
        subdirectories.push(value as DirTree);
      }
    }
  }
  return subdirectories;
}

const subdirs = extractSubdirectories(myDirectory);
console.log(subdirs); // 'environments' オブジェクトが含まれる

// [LOG]: [{
//   "app": [
//     "app.module.ts",
//     "app.component.ts"
//   ],
//   "assets": [
//     "logo.png",
//     "styles.css"
//   ],
//   "environments": {
//     "environment.prod.ts": "",
//     "environment.ts": ""
//   }
// }]

playgroundにもコード残してます。

Docusaurusで使用されていたのを参考

まとめ

型を把握するのに時間がかかる。命名には気をつけたい。

Exclude<UnionType, ExcludedMembers>

サンプルコード

まとめ

Discussion