在使用create-react-app创建的React项目中，引入TypeScript

非常抱歉現在才開始學習React，我從頭開始建立了環境。我將在使用create-react-app創建的項目中引入TypeScript。

做过的事情 (zuò guò de shì

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

• create-react-app で作成された js ファイルを置換する

React の型定義をコンパイラに伝える

安装所需的软件包

在官方网站上已经列出了所需的软件包。
在创建项目时，我意识到我本可以使用模板。

在项目的根目录下执行以下命令。
虽然官方通常建议正常安装，但考虑到构建时所需，我们将使用devDependencies进行安装。

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

用create-react-app创建并替换js文件。

• レンダリングを行う js ファイル(jsxを使用しているファイル) -> tsx ファイル

今回は src/App.js、src/App.test.tsx、src/index.jsが該当

ロジックのみ書かれているjsファイル -> ts ファイル

src/reportWebVitals.js、src/setupTests.js

import logo from './logo.svg';
import './App.css';
- function App() {
+ // 返り値の型書いておく
+ function App(): JSX.Element {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Edit <code>src/App.tsx</code> and save to reload.
        </p>

- const reportWebVitals = onPerfEntry => {
+ import { ReportHandler } from 'web-vitals';
+
+ const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
    });
  }
};

export default reportWebVitals;

将React的类型定义传递给编译器。

我会创建一个 d.ts 文件。

/// <reference types="react-scripts" />

TypeScript 的引入已经完成！

结束

我在GitHub的仓库中作为一个pull request，总结了我所做的事情。(这儿)
虽然现在可以用一个命令创建包括TypeScript的React项目，但我自己进行了修改，感觉自己的理解有所提高。

接下来我会亲自尝试制作一些东西，并输出一些关于React的技巧之类的东西。