TypeScriptで型の項目が必須かどうかを判定する方法

Question

実現したいこと

TypeScriptで定義した型のうち、必須項目のkeyだけを抽出したいです。

何のために？

型の必須項目だけをDBに保存したい

データベースから取得した値を使ってReactでUIを作り、
UIに変更が加わった際にデータベースに保存する仕組みをReact×TypeScriptで開発しています。

その際、クライアント側でUIのためだけに必要なデータは不要なので取り除いて保存します。

// React内の型定義
interface HogeProps {
  id: string;
  name: string;
  isActive?: boolean;
  isOpened?: boolean;
}

例えば上記のようなデータがあるとします。
isActiveとisOpenedは何かしらの状態を判定してUIに反映するためのものであり、DBに残したいのはidとnameのみです。
(例えば、nameに変更が加わった時などに保存したい)

イケてる方法が見つからない...

現状、不要なデータをトリムするような関数を作って、それを通してからDBに保存しています。

const dataFilter = (data: HogeProps) => {
  const newData = data;
  const uselessKeys = ['isActive', 'isOpened'];
  uselessKeys.forEach(key => {
    delete newData[key];
  });
  return newData;
}

このような感じです。
これだと、型に変更が加わった時にいちいち手直しする必要があり、スマートではないと思います。

型を引数にして、必須の項目だけを抽出して返してくれるような関数があればと思ったのですが、調べても見つからず...
型を文字列化して、正規表現で抽出する方法も考えたのですが、そもそも型を値として使うことはできないですし...

何か良い方法はないでしょうか？
TypeScript初心者です。

Comments

[hoshi-takanori]

不要な項目が含まれたデータから必要な項目だけ取り出したい、という考え方がそもそもいけてなくて、不要な項目は別管理するようにすれば良いのでは…。

[nbys]

不要な項目というのは、データベースに保存する必要がないという意味であって、React内では必要なんです...。
別管理にしてしまうとReact内のUI構築のロジックが成立しなくなってしまいます。

Answer 1

ん〜。たとえば、こないな感じかのう。

まず、HogeProps から、DBに保存したいプロパティだけを持ったインタフェースを分離する。つまり

interface Hoge {
  id: string;
  name: string;
}

を作っておいて、HogeProps はこれをextends したものにしておく。

interface HogeProps extends Hoge {
  isActive?: boolean;
  isOpened?: boolean;
}

次に、Hoge のプロパティを文字列の配列hogeKeysとして作っておく。

const DEFAULT_HOGE: Hoge = {
  id: '',
  name: '',
} as const;

const hogeKeys: readonly string[] = Object.freeze(Object.keys(DEFAULT_HOGE));  // => [ 'id', 'name' ]

そして、HogeProps型のオブジェクト hogeProps1 があったとして、isActive と isOpened を除いたオブジェクトhoge1を作るのにどうしようかゆうたら、ワイなら困ったときのlodash大先生頼みや。

yarn add lodash
yarn add @types/lodash -D

import { pick } from 'lodash';


const hogeProps1: HogeProps = {
  id: 'aaa',   
  name: 'bbb',
  isActive: true,
  isOpened: false,
}

const hoge1 = pick(hogeProps1, hogeKeys) as Hoge;  // => { id: "aaa", name: "bbb"}

補足：

• 最後の hoge1 を作るとこ、Hogeやのうて、Partial<HogeProps> でもよければ、as Hoge は要らん。

• 最近ではlodashかさばるゆうて、入れるの嫌やゆう人もおるやん。そやから _.pick を自分で書くのもええ暇潰しになるで。

補足2：
lodashのpick使うとか、似たようなもん自分で書くとかイキってやらんでも

const hoge1: Hoge = {
  id: hogeProps1.id,
  name: hogeProps1.name,
};

でええんちゃう？ゆう気もしてますう。

補足3：

質問にあるコードの中の

const uselessKeys = ['isActive', 'isOpened'];

みたいな、取り除きたいキー名のパターンを正規表現で作っといて、実際にそれに当てはまるプロパティを除く作業は、これまたlodash大先生に頼るというのもありやもしれん。

const OMITTED_KEYS_PATTERN = /^is[A-Z]/;

interface HogeProps {
  id: string;
  name: string;
  isActive?: boolean;
  isOpened?: boolean;
}

const hogeProps1: HogeProps = {
  id: 'aaa',
  name: 'bbb',
  isActive: true,
  isOpened: false,
}

const params1 = _.omitBy(hogeProps1, (v, k) => k.match(OMITTED_KEYS_PATTERN));

console.log(JSON.stringify(params1));  // => "{'id':'aaa','name':'bbb'}"

➡ サンプル

そんで、他の除外パターン加えたり、除外パターンに該当しても例外的にサーバーサイドに送りたいプロパティ名が出てきたら、都度都度、 OMITTED_KEYS_PATTERN の正規表現や、_.omitByの第二引数の関数 (v, k) => k.match(OMITTED_KEYS_PATTERN) を修正していくと。

Comments

[nbys]

ありがとうございます！補足3はかなりスマートな気がします！

[退会済みユーザー]

どうもです〜

バックエンドにAPI投げるときのリクエストボディだったりクエリパラメータ作るときに、余計なキーを除外したり、欲しいものだけ抽出するのに lodash の pick や omit および omitBy は、ときどき自分も使います。

それとは別に質問のタイトル「TypeScriptで型の項目が必須かどうかを判定する方法」は、ちょっと調べましたが、簡単にできる方法が見つかってないです。

interface HogeProps {
id: string;
name: string;
isActive?: boolean;
isOpened?: boolean;
}

があったときに、ここから必須の（＝オプショナルではない）プロパティだけで構成される

{
id: string;
name: string;
}

という型を作ってくれる書き方が
https://www.typescriptlang.org/docs/handbook/utility-types.html
あたりにあるかなー？と思ったんですが無いですね。（いつか将来的には出来るようになるかもですが）
Stackoverflow にも今のところ私の調べでは見つかってないです。

なので、HogeProps を定義する前に、必須のものだけを持っている

interface Hoge {
id: string;
name: string;
}

を作っておくのも手かなと思った次第です。

[退会済みユーザー]

こんにちは。その後の調べで、以下を見つけました。

type RequiredKeys<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? never : K }[keyof T];
type OptionalKeys<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? K : never }[keyof T];

ちなみに上記2つの式の右辺が何をやっているかを詳細は理解していません。m(_ _)m

これらはstackoverflowの質問

https://stackoverflow.com/questions/52984808/is-there-a-way-to-get-all-required-properties-of-a-typescript-object

の回答
https://stackoverflow.com/a/52991061

の上のほうに挙げられています。これらを使って、

type RequiredHogeKeys = RequiredKeys<HogeProps>;
type OptionalHogeKeys = OptionalKeys<HogeProps>;

とすると、

RequiredHogeKeys は "name" | "id" という二つの文字列リテラルのユニオンのエイリアス
OptionalHogeKeys は "isActive" | "isOpened" という二つの文字列リテラルのユニオンのエイリアス

になります。これはこれで使えそうという気もしますが、ご質問の本題には（残念ながら）使えなさそうです。

というのも、プログラムの実行時に、ある文字列が、RequiredHogeKeys に該当するか？を判定することはできないですし、さりとて、Typescript から Javascript に変換されるときに、文字列リテラルのユニオンであるRequiredHogeKeysから、

["name", "id"]

という文字列の配列リテラルに置き換えてくれる文法やユーティリティーは（今のところ）提供されていないからです。（あったらいいのにな、とは思いますが。）

ということで、

ご質問のタイトルである、「TypeScriptで型の項目が必須かどうかを判定する方法」
については、端的にいうと

現状ではそのような方法は無い

というのが答えになるかと思います。

ただしご質問の発端である、「APIのリクエスト時に送りたくないプロパティを除去したい」ということの解決策としては、回答に書いたような、lodash の pick や omit のようなことをやればよいかと思います。

[nbys]

色々と調べていただき、ありがとうございました！
やはりなさそうですね...

命名ルールの徹底、それを正規表現などで抽出、という方法で行きたいと思います。ありがとうございました。

Answer 2

これだと、型に変更が加わった時にいちいち手直しする必要があり、スマートではないと思います。

手軽な方法としては、「一時的な属性はアンダーバーで始める」など何らかのルールを作っておいて、そのルールに従ってピックアップする、という方法が考えられます。

Comments

[nbys]

運用でカバーするということですかね。コードで行うことは難しいでしょうか...。

[maisumakun]

> コードで行うことは難しいでしょうか...。

「アンダーバーで始まるキーを除外したオブジェクトを作る」ことはコードで可能ですが、そういうことではないでしょうか？

[nbys]

すみません回答をちゃんと理解できてませんでした。型定義の際にキーを_isActive, _isOpenのようにしておくということですね。確かに手軽ではありますね！