Zenn
AIQ Tech Blog (有志)Publicationへの投稿
🎃

TypeScriptでconfigやsettingなどの定数Dataをexportする時は合わせて、型定義もexportしてみては？

まさぴょん
2023/10/01に公開
React
TypeScript
Vue.js
frontend
nexjs
tech

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は「TypeScriptで、configやsettingなどの定数Dataをexportする時は合わせて、型定義もexport型定義もexportしてみては？」という提案です。

定数Dataをexportする時は合わせて、型定義もexportする

「TypeScriptで、configやsettingなどの定数Dataをexportする時は合わせて、型定義もexportしてみては？」って、そもそも何のこと？
って思うかもしれませんが、つまりこういうことです。

次のような決定された定数Dataがあるとします。
そうしたら、それと合わせて、TypeScriptのtypeof演算子などを使用して、実データから型を抽出して、合わせて提供できるようにしましょうというシンプルな話です。

frontend/src/config/const.ts
/**
 * NOTE: 投稿の検索の Sort・SelectBox・Contents
 */
export const PostSearchSortConfigList = [
  {
    id: "post_date",
    main: "post_date",
    sub: "desc",
    name: "投稿日時が新しい順",
  },
  {
    id: "likes",
    main: "likes",
    sub: "desc",
    name: "いいね数の多い順",
  },
  {
    id: "comments",
    main: "comments",
    sub: "desc",
    name: "コメント数の多い順",
  },
  {
    id: "engagement",
    main: "engagement",
    sub: "desc",
    name: "エンゲージメント率の高い順",
  },
];

/**
 * NOTE: Sort 設定情報 Object の型
 */
export type SortSettingObjType = typeof PostSearchSortConfigList;

定数Dataを使うところで、型を定義すればいいじゃんとも思うかもしれませんが、ここで先んじて、定義しておけば、定数Dataを使用するいろんなファイルで同じような型定義が乱立することを防ぐことができます。

実データから、型を抽出することができるTypeScriptのtypeof演算子については、以前にこちらの記事で解説をしています。

https://masanyon.com/keyof-typeof/

まとめ

今回は、実プロジェクトを動かしながら、思ったことを提案記事的な形でまとめてみました。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

エンジニア視点での我が社のおすすめポイント

  1. フルリモート・フルフレックスの働きやすい環境！
    • 前の会社でアサインしてた現場は、フル出社だったので、ありがたすぎる。。。
    • もうフル出社には、戻れなくなります！
  2. 経験豊富なエンジニアの先輩方
    • 私は、3年目の駆け出しエンジニアなので、これが、かなりありがたいです！
  3. 自社開発とR&D(受託開発)を両方している会社なので、経験できる技術が多い。
    • 自社のProduct開発と、他社からの受託案件で、いろいろな技術を学ぶことができます。
  4. AI関連の最新の技術に触れられるチャンスが多い。
    • 自社で特許を持つほど、AI技術に強い会社で、プロファイリングを得意とした技術体系があります。
    • ChatGPTを自社アプリに搭載など、AIトレンドも、もちろん追っており、最新の技術に触れられるチャンスが多いです。
  5. たまに、札幌ラボ(東京から札幌) or 東京オフィス(札幌から東京)に出張で行ける！
    • 東京と、札幌に2拠点ある会社なので、会合などで集まる際に、出張で行けます。

採用技術 (一部抜粋)

  • FrontEnd: TypeScript, JavaScript, React.js, Vue.js, Next.js, Nuxt.js など
  • BackEnd: Node.js, Express,Python など
  • その他技術: Docker, AWS, Git, GitHub など

エントリー方法

  1. 私達と東京か札幌で一緒に働ける仲間を募集しています。
    詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

Webエンジニア向け説明

https://www.wantedly.com/projects/1089410

データサイエンティスト向け説明

https://www.wantedly.com/projects/1089406

人事に直通(?)・ご紹介Plan(リファラル採用)

私経由で、ご紹介もできますので、興味のある方や気軽にどんな会社なのか知りたい方は、X(旧:Twitter)にて、DMを送ってくれても大丈夫です。
https://twitter.com/masanyon1212

AIQ Tech Blog (有志)
AIQ Tech Blog (有志)Publication

AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab

Discussion