TypeScriptで定義したオブジェクトに新しい要素を追加できないようにしたい

Question

TypeScriptでオブジェクトをより安全に扱いたいため質問です。

const data = ['logo.png','search.png','stock.png'] //本当は画像データを想定した文字列
interface objType {
  [key: string]: string;
}
const nameObj: objType = {
  'logo': "",
  'search': ""
};

data.map((name: string) => {
  const imgName = name.split(".")[0];
  nameObj[imgName] = name;
  
  return;
});

console.log(nameObj);

nameObj は入ってくることが事前にわかっている画像データ名のオブジェクトです。
キーに 'logo', 'search' が入っておりそれ以外は入れたくありません。

ソースコード（TSのPlayground）

問題

上のコードを実行すると

{
  "logo": "logo.png",
  "search": "search.png",
  "stock": "stock.png"
} 

が返ってきてしまいます。
キーに 'logo', 'search' のみが入り他のプロパティは入ってきて欲しくありません。（エラーになって欲しい）。

試したこと

interface objType {
  [key: string]: string;
}

interfaceの定義が[key: string]プロパティ形式であればなんでも入るようにしていることが原因ではあります。
しかし

interface objType {
  "logo": string,
  "search": string
}

とすると、

nameObj[imgName] = name;

の行に対して、

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'objType'.
  No index signature with a parameter of type 'string' was found on type 'objType'.(

上のように未定義の型が入ってきてしまうと型のメッセージが当然ながら出てきてしまいます。

質問

どのようにすれば nameObj に入れる型を限定しながら data.map(省略) を回す処理ができるようになるでしょうか？

Answer 1

以下のようなコードがあったとしましょう。

interface objType {
  'logo': string,
  'search': string
}

function foo(imgName: string, name: string): objType {
  let nameObj: objType = {'logo': '', 'search': ''}
  nameObj[imgName] = name 
  return nameObj
}

TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript
リンク先で動かすと同じようなところでエラーが出ています。なぜかと言うと、objType のキーは string 型ではなく 'logo' | 'search' というユニオン型になっています。そもそも型が違うためコンパイルできません。ではどのようにして objType にアクセスするかですが、答えは簡単で if で分岐をし、キーを直接書くことです。

function foo(imgName: string, name: string): objType | null {
  let nameObj: objType = {'logo': '', 'search': ''}

  if(imgName === 'logo'){
    nameObj['logo'] = name
  }else if(imgName === 'search'){
    nameObj['search'] = name
  }else{
    return null
  }
  return nameObj
}

TypeScript のわかりにくい点のひとつなんですが、bar['baz'] と書いた場合 'baz' は string 型か 'baz' を含むユニオン型のどちらかになります。この場合は interface でキーの型を決めていますから後者であるとコンパイラが解釈してくれます。また、関数の戻り値の型が objType | null
となっている点にも注意しましょう。imgName が 'logo' や 'search' 以外の場合は null にするようにしてみました（もちろんここは好みの処理に変えて構いません）。実際の動きは関数 foo
の戻り値を console.log() して確認してみてください。

Answer 2

遅レスすみません。結論としてはif文で可能性を打ち消す形でしか難しそうだったので以下のようにしました。

他に方法ありそうな気もしますがひとまずkeyにユニオン型を適用させたい場合はIF文を使ってみようと思います。

const data = ['logo.png','search.png','stock.png'] //本当は画像データを想定した文字列

interface objType {
  'logo' : string,
  'search' : string
}

const nameObj: objType = {
  'logo': "",
  'search': ""
};

data.map((name: string) => {
  const keyN = name.split(".")[0];
  if (keyN !== 'logo' &&  keyN !== 'search' ) return;
    nameObj[keyN] = name;
  
  return;
});

Comments

[moimoi_sushi]

if (keyN !== 'logo' && keyN !== 'search' ) return;
で他の型の可能性を打ち消しているため自ずとkeyNは logo | search のユニオン型になります。