TypeScriptでのJSONインポートを行う上で、importしたオブジェクトに制約をかけた型を使用したい

Question

概要

reactでtypescriptを用いた環境でWeb開発を行っており、JSONファイルをimportしてコード上で加工したうえで出力するようなものを作成しています。
JSONからimportしたオブジェクトについて、扱いが難しいのでお知恵をいただければと思います。

コードと症状

/src/reference/testData.json

[
    {
        "name" : "Alice",
        "gender" : "2"
    },
    {
        "name" : "Bob",
        "gender" : "1"
    },
    {
        "name" : "Charlie"
    }
]

/src/App.tsx

import React from 'react';
import jsonObj from './reference/testData.json'

type tJSON = {
  name : string,
  gender?: "1" | "2"
}

const people1:tJSON[] = jsonObj;

const people2:tJSON[] = jsonObj.filter((people)=>{
  if(! ("gender" in people)) return true;
  if(people.gender === "1") return true;
  if(people.gender === "2") return true;
  return false;
});

上記コードを入力すると、VSCode上でconst people1で下記エラー

型 '({ name: string; gender: string; } | { name: string; gender?: undefined; })[]' を型 'tJSON[]' に割り当てることはできません。
  型 '{ name: string; gender: string; } | { name: string; gender?: undefined; }' を型 'tJSON' に割り当てることはできません。
    型 '{ name: string; gender: string; }' を型 'tJSON' に割り当てることはできません。
      プロパティ 'gender' の型に互換性がありません。
        型 'string' を型 '"2" | "1" | undefined' に割り当てることはできません。

const people2で下記エラーが発生します。

型 '({ name: string; gender: string; } | { name: string; gender?: undefined; })[]' を型 'tJSON[]' に割り当てることはできません。

環境

• os:windows 10
• editor: Visual Studio Code 1.50.1
• reactやnode,babelなどのバージョンは必要があれば調べますが、本日$npx create-react-app test-app --template typescriptで新規構築したフォルダでほかの開発をせずに上記のみで作業しましたので、私のtypescriptの知識不足だと考えています。

希望する解決策

tsconfig.json上で"resolveJsonModule": trueが指定されています。そのため自動で型が推測され、jsonObjのgenderの型がstring|undefinedで推測されているため、'1'|'2'|undefinedと競合していると考えています。
しかしアプリ側の都合でこちらの制限はかけたいため、下記の解決策のいずれかを希望します。

1. jsonに型定義を自前で登録して使用する。
2. JSONからinportしたオブジェクトを別オブジェクトに移す際にfilterなどで適用することをtypescript側に通知する

1番目についてはTypeScriptでJSONファイルを型付きで読み込む(Qiita)などを参考にしてやってみたのですが、うまく適用されませんでした。
2番目についてはperson2が私の認識ですが、こちらもうまくいっていないです。

以上、よろしくお願いします。

Comments

[Zuishin]

型の互換性が filter によって保証されるなら、手っ取り早く any とか unknown を通せば良さそうな気もしますが、もし https://teratail.com/questions/300006 の関係者だったらちゃんと教育してください。他人に通じるよう書かなかったくせに、通じなかったからと逆切れして退会のようなことをしてはいけません。

[Heles]

申し訳ありませんが、該当の質問者とは無関係の者です。
個人で新規にアプリ作成をしています。

filterにより型が補正されているのが問題で、一度オブジェクトをバラして再構築する必要があるということですかね？

今職場ですので確認できません。確認でき次第報告させてもらいます。
アドバイスありがとうございました。

[Heles]

自室に戻ったので検証させていただきました。

``` typescript
const people2:tJSON[] = []
jsonObj.forEach((person)=>{
if((! ("gender" in person)) || person.gender === "1" || person.gender === "2"){
const pushObj:tJSON = {name:person.name};
if(person.gender === "1") pushObj.gender = "1";
if(person.gender === "2") pushObj.gender = "2";
people2.push(pushObj);
}
});
```

これで一応意図した動作をすることを確認いたしました。filterが型を固定してしまうからそれを回避する必要があったのですね。

実際のコードはかなり複雑なjsonをinportしようとしている以上、この手が使えるかどうかは別途検証する必要があるのと、パフォーマンス的にもよろしくないとは思いますが、手法の1つとして覚えておくことにします。

ご指摘ありがとうございました。

Answer 1

こういうことじゃないかもしれませんが、requireでimportすれば怒られはしないと思います

- import jsonObj from './reference/testData.json'
+ const jsonObj:tJSON[] = reuire('./reference/testData.json');

Comments

[Heles]

ご回答ありがとうございます。
requireで読込を指定するとany型扱いで処理されるのですね。
anyですので型チェックは行われず、テキトーな型(string[]等)を左辺に指定しても処理されてしまうのですね。

いままでanyについては避けてきたので、挙動が新鮮です。
これで対応できるかどうか検討いたします、そして同時にimportとrequireの違いなどを詳しく調べてみます。

[Heles]

requireでとりあえず課題が解決できそうですので、今回はHogeikeさんをBAとして質問をクローズしたいと思います。

ありがとうございました