TypeScriptでテンプレートリテラルをkeyにしてオブジェクトの値を生成する際の型の指定について

Question

前提

いつもお世話になっております。
表題の件ですが、for文の中で配列を利用して新しくオブジェクトを生成したいと考えているのですが、その中でkeyにテンプレートリテラルをkeyにする際に型の指定でエラーが出てしまいます。

コード

import React from 'react';
import logo from './logo.svg';
import './App.css';

interface testIf {
    test_1:string;
    test_2:string;
    test_3:string;
    test_4:string;
    test_5:string;
}

function App() {
    const testArr = [
        'aaa',
        'bbb',
        'ccc',
        'ddd',
        'eee'
    ] ;

const newArray = {} as testIf;

    for (let i = 1; i <= 5; i++) {
        const keyName = `test_${i}`;
        const objKey: keyof testIf = keyName;

        newArray[objKey] = testArr[i-1];
    }

console.log()

return (
        <div className="App">
            test
        </div>
    );
}

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

上記のコードだと、
const objKey: keyof testIf = keyName;で、
型 'string' を型 'keyof testIf' に割り当てることはできません
というエラーが出てしまいます。

試したこと

keyNameの中身をtest_1やtest_2などベタがきで指定するとエラーがなくまりました。
keyNameの中身がテンプレートリテラルになっている場合はobjKeyにはどのような型を指定すればよいか教えていただければ幸いです。
よろしくお願いいたします。

Answer 1

質問にあるコードの趣旨を損なわず、asを使わないでエラーを解消する例を書いてみました。

import React from 'react';
import logo from './logo.svg';
import './App.css';

const myKeys = ['test_1', 'test_2', 'test_3', 'test_4', 'test_5'] as const;
type MyKey = typeof myKeys[number];
type TestType = Partial<Record<MyKey, string>>;

function App() {
  const testArr = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];

  const newObj: TestType = {};

  myKeys.forEach((key, i) => {
    newObj[key] = testArr[i];
  });

  return <div className="App">test</div>;
}

Comments

[mm--_--mm]

ご回答いただきありがとうございます。こういった書き方もあるのですね、参考にさせて頂きます...!

Answer 2

単にキャストする、では不満ですか？

        const objKey = `test_${i}` as keyof testIf;

Comments

[mm--_--mm]

ご回答いただきありがとうございます。いえ、キャストということをするというのでも問題ございません！試したところエラーなく動きました！しかしkeyofの場所を変えるだけでエラーがなくなるのは何故でしょうか..?
アサーション？というものについて調べてみたのですがいまいち理解できなく。。もし可能であればご教授いただければ幸いです。。