Javascript のソースコードを TypeScript に変換しようとしています。

function App() {
  const text = person => {
    return person
  }

  return (
    <>
      <p>{text("田中")}さん</p>
      <p>{text(23)}歳</p>
    </>
  )
}

export default App

image2

person が any 型ではないのかと言われています。

このまま any 型にしてもいいのですが、TypeScript ではなるべく any 型を避けたいと考えます。

この場合、person を unknown 型にします。

const text = (person: unknown) => {
  return person
}

このままだと JSX タグ内は、単一の要素でないといけません、というコンパイルエラーが発生します。

image3

エラーを解除する方法として、text 関数内の person を string 型の場合と number 型の場合で条件分けします。

const text = (person: unknown) => {
  if (typeof person === "string") {
    return person
  } else if (typeof person === "number") {
    return person
  }
}

エラーが解除されました。

image4

image5

ちなみに number 型で返ってきている person に 1 を追加してみると、

function App() {
  const text = (person: unknown) => {
    if (typeof person === "string") {
      return person
    } else if (typeof person === "number") {
      return person + 1
    }
  }

  return (
    <>
      <p>{text("田中")}さん</p>
      <p>来年{text(23)}歳</p>
    </>
  )
}

image6

ブラウザに意図した内容が表示されました。

ブログ一覧