TypeScriptで型が違うプロパティを型を変えずに解決したい

Question

質問： 型が違うプロパティを型を変えずに解決したい

下記で型 'string' を型 'ID' に割り当てることはできません。というエラーが出ます。（実行はできます）
このエラーを解消するためにはどうすれば良いでしょうか。
下記のFormコンポーネントのconst handleClick = (value: ID) => { /* something process */ }とInputコンポーネントのonClick: (value: string) => voidの型は変えない方法を探しています。
分かる方がいれば教えていただければと思います。

import React from 'react'
import Input from 'components/Card'
import Input from 'components/Input'
import {Props} from '.'

type ID = "a" | "b" | "c" 

const Form = ({  onClick, className, props }: Props) => {
  const handleClick = (value: ID) => { /* something process */ }
  return (
    <Card>
    {/* 省略 */}
        <Input
          onClick={handleClick} // ココで上記のエラーが出る
          className={className}
          props={props}
        />
      </Card>
    )
}

export default Form

import React from 'react'

type Props = {
  onClick: (value: string) => void
  className: string
  props: any
}

const Input = ({  onClick, className, props }: Props) => (
    <Input
      onClick={onClick}
      className={className}
      props={props}
    />
)

export default Input

考えた方法

FormコンポーネントのhandleClickを以下のように変える。
（うまくいかなかった）

const handleClick = (value: ID as string) => { /* something process */ }

Comments

[maisumakun]

なぜ「型を変えずに」なのでしょうか？

[teis]

Inputは汎用的なcomponentなのでstringのままである必要があり、Formで使用するonClickの値はIDに限定したいというケースだからです。
IDはunion typeですが値自体はstringなのでどうにかできないかなぁと模索しています。

Answer 1

InputのonClickから渡される型が汎用的なstringである以上、（型理論的には）IDにない値が来る可能性も否定できません。

• その可能性を無視して、onClick={handleClick as (val: string) => void}のようにキャストしてごまかす
• handleClickの引数型をstringに変えて、IDのときだけ処理を続けさせるようなType Guardを入れる

といった、2方向のやり方が考えられます。