Zenn
Closed4

create-react-appでTypeScript環境を見てみる

React
TypeScript
suzuki-navisuzuki-navi

このページに従ってみる。

https://create-react-app.dev/docs/adding-typescript/

$ npx create-react-app my-app2 --template typescript
$ cd my-app2

とりあえずgit first commitする。

$ git init .
$ git add -A
$ git status -s
A  .gitignore
A  README.md
A  package-lock.json
A  package.json
A  public/favicon.ico
A  public/index.html
A  public/logo192.png
A  public/logo512.png
A  public/manifest.json
A  public/robots.txt
A  src/App.css
A  src/App.test.tsx
A  src/App.tsx
A  src/index.css
A  src/index.tsx
A  src/logo.svg
A  src/react-app-env.d.ts
A  src/reportWebVitals.ts
A  src/setupTests.ts
A  tsconfig.json
$ git commit -m 'first commit'

起動してみる。

PORT=8080 npm run start

ブラウザで8080番ポートにアクセスできる。

suzuki-navisuzuki-navi

package.json を前回の記事と今回のとでdiffを見てみた。

@@ -1,14 +1,19 @@
 {
-  "name": "my-app",
+  "name": "my-app2",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.38",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

このdiffの内容は、公式ページにある以下の記述と一致する。

To add TypeScript to an existing Create React App project, first install it:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

suzuki-navisuzuki-navi

src/App.tsx はこんな感じ。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
このスクラップは2023/07/07にクローズされました