20220809 | QWYNG.dev

やったこと

カーペットに掃除機かけてトイレとキッチンの排水口を掃除した。偉い。あとたくさん燃えるゴミを出した。偉い。

学び

手を動かしながら学ぶTypeScriptを読み終えた。本当に結構手を動かせたので満足。

最後の２つの課題の例は以下のようにした。

// Buttonコンポーネントにdisabledをつける
export const Button: VFC<Props> = ({
  title,
  onClick,
  width = 80,
  type = 'primary',
  disabled = false
}) => {
  return (
    <Wrapper onClick={onClick} width={width} className={type} disabled={disabled}>
      {title}
    </Wrapper>
  )
}

// 使用例
<Button onClick={() => onSubmit(value)} title="実行" disabled={isError(value.length)}/>

// PasswordFormのonSubmitの型を(password: string) => Promise<T>にする

export const PasswordForm: VFC<Props<Response>> = ({onSubmit}) => {
  const [value, setValue] = useState<string>('')
~~~~

<PasswordForm onSubmit={(_password) => fetch("https://example.com/")}/>

↑はなんかもっといい感じにPasswordForm呼び出す側で型渡せるようにしたいんだけどうまく思いつかなかった。

最後に１つだけ誤植？を見つけた。

246pのコラムに掲載されていたコード

const tag = (strings: TemplateStringsArray, ...placeholders: string[]) => {
  console.log(string) // ["\n font-size: ", ";\n font-weight: ", ";\n"]
  console.log(placeholders) // ["16px", "bold"]
}

tag`
  font-size: ${'10px'};
  font-weight: ${'bold'};
`

多分10pxか16pxのどちらかが間違っている。そのうち報告するかもしれない。