型変換後にタプル型の変数に格納する方法

Question

前提・実現したいこと

型変換した変数をタプル型の変数に単純に入れるとエラーが発生します。
具体的にはnumber型で受け取った値を計算したのち、string型に変換してタプル型の変数に入れたいです。

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

Type 'string' is not assignable to type '"1" | "2" | "3" | "4"'.

該当のソースコード

type TestProps = {
    testProp: '1' | '2' | '3' | '4';
}

const value = 0;
const castValue = String(value + 1);

const TestObject: TestProps = {
    testProp: castValue
}

補足情報（FW/ツールのバージョンなど）

Typescript 4.0.2

Comments

[jun68ykt]

value を何らか型づけすることは可能でしょうか？言い換えると、value は、整数値の 0, 1, 2, 3 しか取りえないと考えてよいのか？ それとも、number のあらゆる値（たとえば 100 だったり、0.1 など）を取り得ることがあるのか？ これについて補足いただけると、回答がつきやすいかもしれません。

[Hogeike]

もう少し直接的な質問にした方が良いと思います。質問の意図が不明です。
本当にあなたがやりたいことを質問したほうが、これを解決する直接的な方法を考えるよりもより良い解決策が提供される可能性があります。

Answer 1

人間が考えれば value が 0 なので castValue の中身が文字列の '1' になることはわかりますが，typescript のコンパイラは value は number 型として認識しているので， number型に + 1 した結果がnumber 型の何かしらの値であることは分かっても実際の計算結果が何になるのか(この例ですと1ですね)を知ることはできません．

そのため計算結果によって得られた number 型のなにがしを String にかけたものを代入しているので castValue を string型として扱う．がコンパイラの限界となります．

このような場合 castValue の結果を '1' | '2' | '3' | '4' のどれかであるかをコンパイラに伝えるためにはタイプガードを実装することで実現できます．

const testPropsValues = ['1', '2', '3', '4'] as const;

type TestProps = {
  testProp: (typeof testPropsValues)[number]
}

// タイプガード
const isTestPropValues = (arg: string): arg is TestProps['testProp'] => (testPropsValues as Readonly<string[]>).includes(arg);
 
const value = 0;
const castValue = String(value + 1);

const TestObject: TestProps = {
  // castValue が 1, 2, 3, 4以外の場合のことも考慮しないといけないことに注意
  testProp: isTestPropValues(castValue) ? castValue : '1',
}

Comments

[t_t_t]

タイプガードの使い方がわかっておらず、少し理解できました。こちらで想定の挙動にできました。ありがとうございます。