例えば、以下のコードがあるとします。

function App() {
  const pointDetail = (point: number, magnication?: number) => {
    return `この商品は、${
      point * (magnication ? magnication : 1)
    }ポイントです。`
  }

  const point = pointDetail(20, 5)
  return <>{point}</>
}

export default App

このまま使用しても、pointDetail 関数に型推論が効きます。

image2

型エイリアスを使って関数に型を明示します。

方法は、型推論の内容をコピーし、Point 型として使用します。

type Point = (point: number, magnication?: number) => string

magnication を使用しない場合、以下のようにコロンで記述します。

type Point = {
  (point: number): string
  (point: number, magnication: number): string
}
const pointDetail: Point = (point: number, magnication?: number) => {
  return `この商品は、${point * (magnication ? magnication : 1)}ポイントです。`
}

ブラウザで確認すると、

image3

エラーなく表示されていました。

magnication を指定しない場合も、

function App() {
  const pointDetail: Point = (point: number, magnication?: number) => {
    return `この商品は、${
      point * (magnication ? magnication : 1)
    }ポイントです。`
  }

  const point = pointDetail(20)
  return <>{point}</>
}

image4

問題なく、表示されました。

ブログ一覧