後からTypescriptを入れる

経緯

javascriptで開発を進めていたが、後の事を考えると早いうちにtypescriptに変更しておいた方が何かと便利ではと判断したので、作業手順を記録として残す。

1.yarn add @type/~

yarn add typescript @types/node @types/react @types/react-dom @types/jest

2.js => tsx, tsに変更

JSXを内部で記述しているなら.tsx。そうでないなら.tsに変更。

3.src/index.tsxのエラーを解消する

型が指定されていないと怒っているエラーで恐らく現状のままだとyarn startができないはず。
なので、

const root = ReactDOM.createRoot(document.getElementById("root")!);

とすればよい。
参考
https://typescript-jp.gitbook.io/deep-dive/intro/strictnullchecks#nullasshonnon-null-assertion-operator

4.tsconfig.json

この時点でもyarn startしてもtsconfig.jsonが作成されなかったり、サーバが立ち上がらない場合がある。なのでtsconfig.jsonを自分で記述する。自動で生成されるらしいが、自分で1つくらいのファイルだったら書いてしまった方が早い。

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "emitter.ts",
    "program.ts",
    "commandLineParser.ts",
    "tsc.ts",
    "diagnosticInformationMap.generated.ts"
  ]
}

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

5.サーバ再起動

yarn startしなおす。実行できているはず。お疲れさまでした。