例えば、通常 20 ポイントの商品が、今回特別にポイント 5 倍にして 100 ポイントであることを表示したいとします。

以下のコードを作成してみました。

type Point = [number, number]

function App() {
  const pointCalc = (point: Point, magnication: number) => {
    point[1] *= magnication
    return point[0] * point[1]
  }

  const point: Point = [20, 1]
  const specialPoint = pointCalc(point, 5)

  return (
    <>
      <p>この商品は、今回特別{specialPoint}ポイントにします。</p>
      <p>通常、この商品は{point[0] * point[1]}ポイントです。</p>
    </>
  )
}

export default App

ブラウザで確認すると、

image2

通常 20 ポイントなのですが、ブラウザでは 100 ポイントと表示されてしまいました。

これは、point[1] *= magnication;point[1]である『1』が書き換えられたことが原因です。

初期 point が書き換えられないようにするために、readonly 型を使用します。

type Point = readonly [number, number]

すると、point[1] *= magnication;で『Cannot assign to ‘1’ because it is a read-only property.』というコンパイルエラーが発生しました。

image3

これは、読み取り専用なので、point[1]に代入することができませんよ、と教えてくれています。

pointCalc関数を書き換えてみましょう。

const pointCalc = (point: Point, magnication: number) => {
  return point[0] * point[1] * magnication
}

コンパイルエラーが消えました。

ブラウザを確認すると、

image4

意図した結果が表示されました。

ブログ一覧