Objectに対する文字列プロパティアクセスをする時、プロパティの型を絞り込みたい

Question

いつもお世話になります。
TypeScriptの型推論について、ご教示いただければ幸いです。

前提・実現したいこと

TypeScript 4.3を利用しています。

異なるオブジェクト同士（objA, objB）でキー名を比較して、同一キー名の型が同じ時のみ、
片側のオブジェクトにもう片方のプロパティを代入する良い書き方があればご教示いただけませんでしょうか。

片側のオブジェクトのkeyで回した時、どうしてもnever型で推論してしまい、エラーになってしまいます。

発生している問題・エラーメッセージ

Type 'string' is not assignable to type 'never'.

エラーその２
こちらは、baseClass のidに readonlyを付けた場合、当該エラー箇所が id が入ることを示唆していてエラーとなる。
このことで、当該箇所でプロパティの絞り込みができていないと考えています。

Cannot assign to 'id' because it is a read-only property.

該当のソースコード

class baseClass {
  constructor(id: number,name: string ,name2: string){
      this.id = id
      this.name = name
      this.name2 = name2
  }
  id:number
  name:string
  name2:string
}
const baseClassInstance = new baseClass(0,"","")
baseClassInstance.id = 123
baseClassInstance.name = "base name"
baseClassInstance.name2 = "base name 2"

const forInput = {
  id: 789,
  name2: "input 2",
  name10 : "input 10",
}

Object.keys(forInput)
    .forEach(key => {
      if (typeof baseClassInstance[key as keyof typeof baseClassInstance] === "string" &&
          typeof forInput[key as keyof typeof forInput] === "string" 
      ) {
        console.log(key)
        console.log(forInput[key as keyof typeof forInput])
        console.log(typeof forInput[key as keyof typeof forInput])
        console.log(baseClassInstance[key as keyof typeof baseClassInstance])
        console.log(typeof baseClassInstance[key as keyof typeof baseClassInstance])

        // 以下のような挙動を取りたい
        // baseClassInstance["name2"] = forInput["name2"]
        baseClassInstance[key as keyof typeof baseClassInstance] = forInput[key as keyof typeof forInput]
        //ops... Type 'string' is not assignable to type 'never'.
      }
    })

//期待する結果
//forInput の name2だけが string型で共通するので、そのプロパティが書き換わっている
console.log(baseClassInstance)
// baseClass: {
//   "id": 123,
//   "name": "base name",
//   "name2": "input 2"
// } 

試したこと

エラーを無視すれば実行時に動くのですが、もっと正しい示唆の仕方がないのかなと悩んでいます。

Answer 1

自己解決されたようで何よりです。

ちなみにエラーが発生する行の（コメントアウトされている行は含まずに、）一行上の行の行末にセミコロンを追加

- console.log(typeof baseClassInstance[key as keyof typeof baseClassInstance])
+ console.log(typeof baseClassInstance[key as keyof typeof baseClassInstance]);

したうえで、エラーが発生する行を以下のように修正

- baseClassInstance[key as keyof typeof baseClassInstance] = forInput[key as keyof typeof forInput]
+ (baseClassInstance[key as keyof typeof baseClassInstance] as string | number) = forInput[key as keyof typeof forInput]

することによっても、エラーは解消されました。

???? 上記の修正を Typescript Playground で動作確認

Comments

[UnripeTomato]

おおぉぉぉ・・・ご回答いただきありがとうございます。動作確認しました。
`as string | number` とするということは、やはりifでの型ガードは効いていないってことなのですね????

このスレッドでの新たな質問となり恐縮ですが、ご提案頂いている、
> 一行上の行の行末にセミコロンを追加
確かになくすと構文エラーになるのですが。。。

これは、どのような作用を引き起こしているのでしょうか？????

[退会済みユーザー]

セミコロンが無いと、
見た目上、

console.log(typeof baseClassInstance[key as keyof typeof baseClassInstance])

と

(baseClassInstance[key as keyof typeof baseClassInstance] as string | number) = forInput[key as keyof typeof forInput]

とは別の行ですが、連結された

console.log(typeof baseClassInstance[key as keyof typeof baseClassInstance])(baseClassInstance[key as keyof typeof baseClassInstance] as string | number) = forInput[key as keyof typeof forInput]

でひとつの文と見做されており、これがコンパイルされてしまうので、文法エラーになってしまうようです。

Answer 2

もう少し書きようがあるとはおもうのですが・・・
型ガード関数を実装してチェックすることで、構文エラーを通すことができました！

console.clear();
class baseClass {
  constructor(id: number, name: string, name2: string) {
    this.id = id;
    this.name = name;
    this.name2 = name2;
  }
  id: number;
  name: string;
  name2: string;
}

const forInput = {
  id: 987897,
  name2: "input name",
  name10: "input name 10",
};

let objInstance = new baseClass(123, "base1", "base2");

// want to run like as follow.
// objInstance["name"] = "aaa"
Object.keys(forInput).forEach((key) => {
  if (
    typeof objInstance[key as keyof typeof objInstance] === "string" &&
    typeof forInput[key as keyof typeof forInput] === "string"
  ) {

    //ここで型ガード関数作成
    const isString = (value: unknown): value is string =>
      typeof value === "string";

    if (isString(objInstance[key as keyof typeof objInstance])) {
      if (isString(forInput[key as keyof typeof forInput])) {
        //代入する時も as string にキャストしてから入れる
        (objInstance[key as keyof typeof objInstance] as string) = forInput[
          key as keyof typeof forInput
        ] as string;
      }
    }
  }
});
console.log(objInstance);
期待する結果となった
//baseClass { id: 123, name: 'base1', name2: 'input name' }

tsc後のjs抜粋

Object.keys(input).forEach((key) => {
  if (typeof objInstance[key] === "string" && typeof input[key] === "string") {
    const isString = (value) => typeof value === "string";
    if (isString(objInstance[key])) {
      if (isString(input[key])) {
        objInstance[key] = input[key];
      }
    }
  }
});

Answer 3

TypeScriptの型はコンパイル時点で消えてしまうが故に、実行時に型情報を参照できないという制約がつきまといます。

「事前にbaseClassのうちstringとなるキーの配列をas constとして作成しておく」ような手段を除けば、「エラーを無視させる」しかありません。

Comments

[UnripeTomato]

回答ありがとうございます！

＞「事前にbaseClassのうちstringとなるキーの配列をas constとして作成しておく」

この発想は無かったです！ありがとうございます！

実行時に型情報が飛ぶが故に、静的解析時に安全性を高めようと色々と方言に沿った書き方をしていかないとダメなんですね・・・。

今回はエラーを無視させない方法（tsの方言をasで騙しただけかもしれないですが）ができましたので自己解決とさせていただきましたが、ご提案いただいた手段もあること勉強になりました！