Zenn
🧀

create-react-appのJavaScriptバージョンとTypeScriptバージョンを比較してみた

2021/12/31に公開
JavaScript
React
TypeScript
VS Code
tech

JavaScriptからTypeScriptに変換するときに何をしなければいけないのか気になったので、

npx create-react-app js-app
npx create-react-app ts-app --template typescript

で出力された結果をvscodeの拡張機能を使って比較してみました
https://marketplace.visualstudio.com/items?itemName=moshfeu.compare-folders

比較結果

tsxファイルに変換

index.js -> index.tsx
(ファイル名違うだけで内容同じ）
App.js -> App.tsx
0a1
> import React from 'react';
10c11
<           Edit <code>src/App.js</code> and save to reload.
---
>           Edit <code>src/App.tsx</code> and save to reload.

import React from 'react';が追加されていましたが、これを削除しても動くので、
実質App.js -> App.tsxの文章を変更しただけになり、本質的な差分はなしです。

App.test.js -> App.test.tsx
0a1
> import React from 'react';

tsファイルに変換

reportWebVitals.js -> reportWebVitals.ts
1c1,3
< const reportWebVitals = onPerfEntry => {
---
> import { ReportHandler } from 'web-vitals';
> 
> const reportWebVitals = (onPerfEntry?: ReportHandler) => {
setupTests.js -> setupTests.ts
(ファイル名違うだけで内容同じ）

ファイル名同じ　内容変更

package.json
2c2
<   "name": "js-app",
---
>   "name": "ts-app",
8a9,12
>     "@types/jest": "^27.4.0",
>     "@types/node": "^16.11.17",
>     "@types/react": "^17.0.38",
>     "@types/react-dom": "^17.0.11",
11a16
>     "typescript": "^4.5.4",

dependenciesに@types関連とtypescriptが追加されていた

@types系のdependenciesは下記のコマンドで自動生成できます

js-app $ typesync
»  TypeSync v0.8.0
✔  4 new typings added.

📦 js-app — package.json (4 new typings added, 0 unused typings removed)
├─ + @types/react
├─ + @types/testing-library__jest-dom
├─ + @types/react-dom
└─ + @types/testing-library__user-event

✨  Go ahead and run npm install or yarn to install the packages that were added.

https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95

TypeScriptのみにあったファイル

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
src/react-app-env-d.ts
/// <reference types="react-scripts" />

react-app-env-d.tsが何のためにあるのか確認するためにこのファイル消してみましたが、logo.svgをimportする処理でエラーになったので、svgファイルをimportするために存在するもののようです。

ERROR in src/App.tsx:1:18
TS2307: Cannot find module './logo.svg' or its corresponding type declarations.
  > 1 | import logo from './logo.svg';
      |                  ^^^^^^^^^^^^

https://stackoverflow.com/questions/67262914/what-is-the-react-app-env-d-ts-in-a-react-typescript-project-for

結論

npx create-react-app js-app

で作成したアプリをTypeScriptに変更するのは簡単にできそうです

link

https://qiita.com/282Haniwa/items/ff3fc9cd783f6f418a35

Discussion