CreateReactアプリでTypescriptを使用する方法
序章
Create React App は、Reactアプリケーションの構築を開始するための基本的なパッケージと構成のセットを提供します。 バージョン2.0では、公式のTypeScriptサポートが導入されました。 これにより、JavaScriptユーザーはReactフロントエンドフレームワークでTypeScript規則を使用して記述できるようになりました。 TypeScriptは、より安全で自己文書化されたコードを作成するのに役立つ強力なツールであり、開発者がバグをより早く発見できるようにします。
この記事では、Create React Appを使用して、TypeScriptでReactアプリをセットアップします。
前提条件
この記事をフォローするには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Reactにある程度精通している。 React.jsシリーズのコーディング方法をご覧ください。
- TypeScriptの規則にある程度精通している。
- コードヒントをサポートする最新のコードエディタをお勧めします。 Visual Studio Code は、IntelliSenseを介してこれを提供します。
このチュートリアルは、ノードv15.13.0で検証されました。 npm
v7.8.0、 react-scripts
v4.0.3、 react
v17.0.2、および typescript
v4.2.3。
TypeScriptCreateReactアプリの起動
まず、ターミナルウィンドウを開き、プロジェクトをビルドするディレクトリに移動します。
次に、 create-react-app
とともに --template typescript
国旗:
- npx create-react-app cra-typescript-example --template typescript
ターミナルウィンドウに最初のメッセージが表示されます。
Creating a new React app in [..]/cra-typescript-example.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
The --template typescript
flagは、CreateReactAppスクリプトにcra-template-typescripttemplateを使用してビルドするように指示します。 これにより、メインのTypeScriptパッケージが追加されます。
注: Create React Appの以前のバージョンでは、 --typescript
フラグがありますが、このオプションは廃止されました。
インストールが完了すると、TypeScriptをサポートする新しいReactアプリケーションが作成されます。 プロジェクトディレクトリに移動し、コードエディタで開きます。
調べる tsconfig.json
ファイル
ターミナルウィンドウに次のメッセージが表示されていることに気付いたかもしれません。
We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.
Your tsconfig.json has been populated with default values.
The tsconfig.json
ファイルは、TypeScriptプロジェクトを構成するために使用されます。 package.json
JavaScriptプロジェクト用です。
The tsconfig.json
Create React Appによって生成されるものは、次のようになります。
{
"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"
]
}
この構成により、コンパイル先のECMAScriptのいくつかのコンパイルルールとバージョンが確立されます。
調べる App.tsx
ファイル
それでは、 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;
以前にCreateReactAppを使用したことがある場合は、これが App.js
CreateReactAppがTypeScript以外のビルド用に生成するファイル。 JavaScriptプロジェクトと同じベースを取得しますが、TypeScriptサポートが構成に組み込まれています。
次に、TypeScriptコンポーネントを作成し、それが提供できる利点を調べてみましょう。
TypeScriptコンポーネントの作成
で機能コンポーネントを作成することから始めます App.tsx
ファイル:
function MyMessage({ message }) {
return <div>My message is: {message}</div>;
}
このコードは message
からの値 props
. レンダリングされます div
テキスト付き My message is:
そしてその message
価値。
次に、TypeScriptを追加して、この関数にそのことを伝えましょう。 message
パラメータは string
.
TypeScriptに精通している場合は、追加してみるべきだと思うかもしれません。 message: string
に message
. ただし、この状況で行う必要があるのは、すべてのタイプを定義することです props
オブジェクトとして。
これを達成する方法はいくつかあります。
タイプをインラインで定義する:
function MyMessage({ message }: { message: string }) {
return <div>My message is: {message}</div>;
}
の定義 props
物体:
function MyMessage(props: { message: string }) {
return <div>My message is: {props.message}</div>;
}
別のインターフェースを使用する:
interface MyMessageProps {
message: string;
}
function MyMessage(props: MyMessageProps) {
return <div>My message is: {props.message}</div>;
}
あなたは作成することができます interface
それを別のファイルに移動して、タイプが他の場所に存在できるようにします。
これはたくさんの文章のように見えるかもしれないので、もう少し書くことから何が得られるか見てみましょう。
このコンポーネントは、 string
として message
パラメータ。 それでは、これを私たちの中で使ってみましょう App
成分。
TypeScriptコンポーネントの使用
これを使ってみよう MyMessage
コンポーネントをレンダリングロジックに追加します。
コンポーネントの入力を開始します。
<MyMessage
コードエディタがコードヒントをサポートしている場合は、コンポーネントの入力を開始すると、コンポーネントの署名が表示されることに気付くでしょう。
これにより、コンポーネントに戻ることなく、期待される値とタイプが提供されます。 これは、別々のファイルで複数のコンポーネントを処理する場合に特に便利です。
小道具の種類を調べる
次に、小道具の入力を開始します。
<MyMessage messa
入力を開始するとすぐに message
、あなたはその小道具がどうあるべきかを見ることができます:
これは表示されます (JSX attribute) message: string
.
タイプエラーの調査
の数値を渡してみてください message
文字列の代わりに:
<MyMessage message={10} />
メッセージとして数字を追加すると、TypeScriptはエラーをスローし、これらの入力のバグを見つけるのに役立ちます。
次のようなタイプエラーがある場合、Reactはコンパイルすらしません。
これは表示されます Type 'number' is not assignable to type 'string'
.
結論
このチュートリアルでは、Create React Appを使用して、TypeScriptでReactアプリをセットアップします。
すべてのコンポーネントと小道具のタイプを作成できます。 最新のコードエディタを使用すると、コードヒントを利用できます。 また、TypeScriptではプロジェクトをタイプエラーでコンパイルすることさえできないため、エラーをより迅速にキャッチできます。
TypeScriptの詳細については、TypeScriptトピックページで演習とプログラミングプロジェクトを確認してください。