かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

今更の TypeScript enum 型になっているプロパティの値ってどう指定するの?

GraphQL の schema から生成した型を利用してモックデータを作っていました。
今回 GraphQL の schema に特定の文字列が返されるフィールドを作成したく列挙型 (Enum) で Schema を定義していました。

schema.graphql

emun IdolType {
  cute
  cool
  sexy
  pop
}

type Idol {
  id: ID!
  name: String!
  type: IdolType!
}

type Query {
  idols: [Idol]
}

👇 生成された TypeScript の型
graphql.ts

export enum IdolType {
  Cute = 'cute',
  Cool = 'cool',
  Sexy = 'sexy',
  Pop = 'pop'
}

export type Idol = {
  __typename?: 'Idol';
  id:  Scalars['ID'];
  name:  Scalars['String'];
  type: IdolType;
};

このとき Idol 型のデータを作成しようとした時に type の値の定義方法で TypeError になってハマりました

enum 型 の値は enum の定義そのものを使う必要がある

🙅 エラーになったパターン

enum 型に含まれている値を直接指定するとエラーになりました

import { Idol } from './graphql';

const Hosimiya: Idol = {
  id: '1',
  name: '星宮いちご',
  type: 'cute',
}

=> Types of property 'type' are incompatible. Type '"cute"' is not assignable to type 'IdolType'

🙆 enum 型の型定義を使って指定する

- import { Idol } from './graphql';
+ import { Idol, IdolType } from './graphql';

const Hosimiya: Idol = {
  id: '1',
  name: '星宮いちご',
- type: 'cute',
+ type: IdolType.Cute,
}

enum 型は使わないほうが良い。みたいな記事を結構見たことがあったのと Union 型とかで何とかなってたから今まで触れてきませんでした。今回 GraphQL からの型生成で enum 型に初めましてした結果 Union 型みたいに直接値を指定するとエラーになって何でや!ってなったのでした…

雰囲気エンジニアリングしかできないから力不足を感じと同時に TIL (Today I Learned) を感じる日々です。がんばるぞぃ ₍ ᐢ. ̫ .ᐢ ₎


[参考]

Enum ずっとエミュって読んでた… エミューは Emu だった… えいごちから…