Udemyで作ったTodoリストをTypeScriptに書き換える

React

2022.12.12 2022.09.03

UdemyでTodoリストを作成したものを「独自カスタマイズ＆機能追加」第三弾目です。

第一弾「firebase8をfirebase9へ書き換える」、第二弾「ページの追加」です。

どうやるべきかググる
TypeScriptに書き換える
1. 必要なパッケージのインストール
2. 型を書いていく

どうやるべきかググる

あまり新しい記事が見つかりませんでした。

私のように、後からTypeScriptに書き換えようとする非効率な人間はほとんどいないみたいですね。

ということは、TypeScriptの練習としても非効率なのか？まぁやって見ましょう。

こちらの記事を参考にさせていただきました。

ReactのプロジェクトにTypeScriptを導入する〜npm installからコンパイルまで〜

TypeScriptに書き換える

必要なパッケージのインストール

npm i typescript ts-loader --save-dev

./node_modules/.bin/tsc --init

npm i @types/{react,react-dom,react-router-dom} --save-deva

npm i --save-dev @types/styled-components

型を書いていく

エラー

Cannot use JSX unless the '--jsx' flag is provided.

const Nav = () => {
  return (
    <Snav> //Cannot use JSX unless the '--jsx' flag is provided.
      <ul>
        <li><NavLink className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")} to={'/'}>スーパー</NavLink></li>
        <li><NavLink className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")} to={'/dorugstore/'}>ドラッグストア</NavLink></li>
        <li><NavLink className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")} to={'/handredstore/'}>100均</NavLink></li>
      </ul>
    </Snav>
  )
}

解決方法

tsconfig.json で compilerOptions.jsx = react-jsx とする

{
  "compilerOptions": {
    "jsx": "react-jsx",
  }
}

propsへ型をつける

type Props = {
  id: string,
  fetch: () => Promise<void>,
  isComplete: boolean,
  collectionName: string,
}

const ChecboxComponent = (props: Props) => {
  const { id, fetch, isComplete, collectionName } = props;
}

propsへ型をつける<FC> children

type Props = {
  children: React.ReactNode
}

export const AuthProvider: FC<Props> = ({ children }) => {
}

stateに型を付ける

  const [currentUser, setCurrentUser] = useState<string>('');

propsで渡した、stateに型を付ける

引数を設定0なのに１個あるよ。と注意されます。

Expected 0 arguments, but got 1.

type Props = {
  fetch: () => Promise<void>,
  inputName: string,
  setInputName: (x: string) => void,
  collectionName: string
}