ReactとTypeScriptは、最近多くの開発者が使用する2つの素晴らしいテクノロジーです。物事を行う方法を知ることはトリッキーになる可能性があります。また、正しい答えを見つけるのが難しい場合があります。心配しないでください。あなたが持っているかもしれない疑いを明確にするために、私たちはベストプラクティスと例をまとめました。
飛び込みましょう！キーテイクアウト
ts：「ねえ、これはあなたのすべてのUIコードですか？」
反応：「うん！」TS：「クール！私はそれをコンパイルし、あなたが何も見逃さないようにします。」
反応：「私にはいいですね！」答えはイエスです、そうです！しかし、その後、tsconfig.jsonの設定をカバーすると、ほとんどの場合、「noemit」：trueを使用する必要があります。これが意味することは、タイプスクリプトがコンパイル後にJavaScriptを放出しないことです。これは、通常、TypeScriptを使用してタイプチェックを行うためです。
出力は、CRA設定で、React-Scriptsによって処理されます。 Yarn BuildとReactScriptsを実行して生産用の出力をバンドルします。要約すると、TypeScriptはReactコードをコンパイルして、コードをタイプチェックします。 JavaScriptの出力はありません（ほとんどのシナリオで）。出力は、非タイプのReactプロジェクトにまだ似ています。
TypeScriptはReactおよびWebpackで動作できますか？はい、タイプスクリプトはReactとWebpackで動作できます。幸運なことに、Webpackドキュメントにはそのガイドがあります。
ベストプラクティス
最も一般的な質問を調査し、TypeScriptとの反応のための最も一般的なユースケースのこの便利なリストをまとめました。このようにして、この記事を自分のプロジェクトのリファレンスとして使用できます。
構成tsconfig.json
prettier
.tsxファイル拡張子
tsconfig.json
npx create-react-app my-app <span>--template typescript </span>
React-App-Env.d.ts
eslint/prettier
コードがプロジェクトまたはチームのルールに従っていることを確認するために、スタイルが一貫していることを確認するために、Eslintとよりきれいをセットアップすることをお勧めします。それらをうまく再生させるには、これらの手順に従ってセットアップしてください。
npx create-react-app my-app <span>--template typescript </span>
<span>{
</span> <span>"compilerOptions": {
</span> <span>"target": "es5", // Specify ECMAScript target version
</span> <span>"lib": [
</span> <span>"dom",
</span> <span>"dom.iterable",
</span> <span>"esnext"
</span> <span>], // List of library files to be included in the compilation
</span> <span>"allowJs": true, // Allow JavaScript files to be compiled
</span> <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span> <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span> <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span> <span>"strict": true, // Enable all strict type checking options
</span> <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span> <span>"module": "esnext", // Specify module code generation
</span> <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span> <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span> <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span> <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span> <span>"jsx": "react", // Support JSX in .tsx files
</span> <span>"sourceMap": true, // Generate corrresponding .map file
</span> <span>"declaration": true, // Generate corresponding .d.ts file
</span> <span>"noUnusedLocals": true, // Report errors on unused locals
</span> <span>"noUnusedParameters": true, // Report errors on unused parameters
</span> <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span> <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span> <span>},
</span> <span>"include": [
</span> <span>"src/**/*" // *** The files TypeScript should type check ***
</span> <span>],
</span> <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span><span>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev </span>
module<span>.exports = {
</span> <span>parser: '@typescript-eslint/parser', // Specifies the ESLint parser
</span> <span>extends: [
</span> <span>'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
</span> <span>'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
</span> <span>],
</span> <span>parserOptions: {
</span> <span>ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
</span> <span>sourceType: 'module', // Allows for the use of imports
</span> <span>ecmaFeatures: {
</span> <span>jsx: true, // Allows for the parsing of JSX
</span> <span>},
</span> <span>},
</span> <span>rules: {
</span> <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
</span> <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
</span> <span>},
</span> <span>settings: {
</span> <span>react: {
</span> <span>version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
</span> <span>},
</span> <span>},
</span><span>};
</span><span>yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev </span>
vsコード拡張機能と設定
ESLINTとTHERTTIERを追加しました。DXを改善する次のステップは、保存でコードを自動的に修正/prettifieすることです。
最初に、ESLINT拡張子とVSコードのきれいな拡張機能をインストールします。これにより、ESLINTはエディターとシームレスに統合できます。次に、.vscode/settings.jsonに次のことを追加して、ワークスペース設定を更新します：
これにより、VSコードが魔法を機能させ、保存するとコードを修正することができます。美しい！
これらの提案は、ロバート・クーパーによる以前にリンクされた記事「タイプスクリプトプロジェクトでのESLINTときれいなものを使用している」からも掲載されています。
module<span>.exports = {
</span> <span>semi: true,
</span> <span>trailingComma: 'all',
</span> <span>singleQuote: true,
</span> <span>printWidth: 120,
</span> <span>tabWidth: 4,
</span><span>};
</span>コンポーネント
Reactのコア概念の1つはコンポーネントです。ここでは、React V16.8の標準コンポーネントを参照します。これは、クラスではなくフックを使用するものを意味します。 一般的に、基本的なコンポーネントについては、多くのことが関係しています。例を見てみましょう：
ここで重要な違いに注意してください。最初の例では、機能を関数宣言
として書き込みます。関数式を使用します。
2番目のインスタンスは値または式の代わりに関数を返すため、関数型
にreact.fcをreact.fcで注釈にします。関数コンポーネント」。module<span>.exports = {
</span> <span>parser: '@typescript-eslint/parser', // Specifies the ESLint parser
</span> <span>extends: [
</span> <span>'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
</span> <span>'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
</span><span>+ 'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
</span><span>+ 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
</span> <span>],
</span> <span>parserOptions: {
</span> <span>ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
</span> <span>sourceType: 'module', // Allows for the use of imports
</span> <span>ecmaFeatures: {
</span> <span>jsx: true, // Allows for the parsing of JSX
</span> <span>},
</span> <span>},
</span> <span>rules: {
</span> <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
</span> <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
</span> <span>},
</span> <span>settings: {
</span> <span>react: {
</span> <span>version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
</span> <span>},
</span> <span>},
</span><span>};
</span>2つを覚えておくのは混乱する可能性があります。それは主に設計の選択の問題です。プロジェクトで使用することを選択した場合は、一貫して使用することを選択してください。 小道具 私たちがカバーする次のコアコンセプトは小道具です。インターフェイスまたはタイプのいずれかを使用して、小道具を定義できます。別の例を見てみましょう： タイプまたはインターフェイスに関しては、React-Typescript-Cheatsheetコミュニティが提示したガイドラインに従うことをお勧めします。
もう1つの例を見てみましょう。
このコンポーネントでは、小道具にタイプを使用します。各Propには、他の開発者により多くのコンテキストを提供するために、その上にリストされた短い説明があります。 ？名前の名前が付けられた後、それがオプションであることを示します。 Children PropはReact.Reactnodeを取ります。これは、コンポーネントの有効な返品値であるすべてを受け入れるためです（こちらをご覧ください）。オプションのカラープロップを説明するために、デフォルト値を破壊するときに使用します。この例では、基本をカバーし、小道具の種類を記述し、オプション値とデフォルト値の両方を使用する必要があることを示してください。
一般的には、React and TypeScriptプロジェクトで小道具を書くときは、これらのことを念頭に置いてください：npx create-react-app my-app <span>--template typescript </span>
tsdoc notation /** コメント* /。
を使用して、常にあなたの小道具に説明的なコメントを追加します
コンポーネントのプロップにタイプまたはインターフェイスを使用するかどうかは、一貫して使用します。タイプスクリプトがフックで輝くもう1つの場所は、USERREDUCERにあり、差別された組合を利用できます。役立つ例を次に示します：
<span>{
</span> <span>"compilerOptions": {
</span> <span>"target": "es5", // Specify ECMAScript target version
</span> <span>"lib": [
</span> <span>"dom",
</span> <span>"dom.iterable",
</span> <span>"esnext"
</span> <span>], // List of library files to be included in the compilation
</span> <span>"allowJs": true, // Allow JavaScript files to be compiled
</span> <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span> <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span> <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span> <span>"strict": true, // Enable all strict type checking options
</span> <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span> <span>"module": "esnext", // Specify module code generation
</span> <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span> <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span> <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span> <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span> <span>"jsx": "react", // Support JSX in .tsx files
</span> <span>"sourceMap": true, // Generate corrresponding .map file
</span> <span>"declaration": true, // Generate corresponding .d.ts file
</span> <span>"noUnusedLocals": true, // Report errors on unused locals
</span> <span>"noUnusedParameters": true, // Report errors on unused parameters
</span> <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span> <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span> <span>},
</span> <span>"include": [
</span> <span>"src/**/*" // *** The files TypeScript should type check ***
</span> <span>],
</span> <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span>
出典：React-Typescript-Cheatsheet Hooksセクション
<span>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev </span>
ここでの美しさは、差別された組合の有用性にあります。アクションが2つの似たようなオブジェクトの結合をどのように持っているかに注目してください。プロパティタイプは文字通りの文字列です。この文字列とタイプの文字列の違いは、値がタイプで定義されている
リテラルmodule<span>.exports = {
</span> <span>parser: '@typescript-eslint/parser', // Specifies the ESLint parser
</span> <span>extends: [
</span> <span>'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
</span> <span>'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
</span> <span>],
</span> <span>parserOptions: {
</span> <span>ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
</span> <span>sourceType: 'module', // Allows for the use of imports
</span> <span>ecmaFeatures: {
</span> <span>jsx: true, // Allows for the parsing of JSX
</span> <span>},
</span> <span>},
</span> <span>rules: {
</span> <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
</span> <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
</span> <span>},
</span> <span>settings: {
</span> <span>react: {
</span> <span>version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
</span> <span>},
</span> <span>},
</span><span>};
</span>ご覧のとおり、フックはReactとTypeScriptプロジェクトの性質にそれほど複雑さを追加しません。どちらかといえば、彼らはデュオにうまく貸してくれます。 このセクションは、ReactでTypeScriptを使用するときに人々がつまずく最も一般的なユースケースをカバーすることです。これを共有することで、落とし穴を避け、この知識を他の人と共有することを願っています。
フォームイベントの取り扱い 最も一般的なケースの1つは、フォームの入力フィールドで使用されるオンチェンジを正しく入力することです。例を次に示します：
コンポーネントの小道具を拡張 1つのコンポーネントに対して宣言されたコンポーネントのプロップを取得し、それらを別のコンポーネントで使用するように拡張したい場合があります。ただし、1つまたは2つを変更する必要があります。さて、コンポーネントのプロップ、タイプ、またはインターフェイスを入力する2つの方法をどのように調べたか覚えていますか？使用したものに応じて、コンポーネントプロップの拡張方法を決定します。まず、タイプの使用方法を見てみましょう：
両方の方法が問題を解決します。どちらを使用するかを決定するのはあなた次第です。個人的には、インターフェイスを拡張することはより読みやすいと感じますが、最終的にはあなたとあなたのチーム次第です。
インターフェイスの拡張
これらは、私のpackage.json？ スタックオーバーフローにはこれに対するいくつかの回答がありますが、詳細については確認できます。
最初のオプションは、パッケージ名に基づいてファイルを作成し、ルートに配置することを意味します。たとえば、パッケージバナナJSにタイプが必要な場合、ルートでBanana-js.d.tsという基本的な宣言ファイルを作成できます。
要約 連絡を取りたい場合は、この記事に関するフィードバックを共有するか、2つのテクノロジーを一緒に使用することについてチャットしたい場合は、Twitter @jsjoeioで連絡できます。
TypeScript Playground
es、TypeScriptでReactを絶対に使用できます。実際、ReactとTypeScriptを組み合わせることで、Web開発コミュニティでますます人気が高まっています。 TypeScriptは、強化されたツールとタイプの安全性を提供するJavaScriptの静的に型付けられたスーパーセットであり、堅牢で保守可能なReactアプリケーションを構築するための優れた選択肢となります。タイプスクリプト関数の署名。 TypeScriptを使用すると、小道具と状態の強力なタイプを定義して、ランタイムエラーのリスクを減らし、コードベースをより予測可能にすることができます。さらに、TypeScriptのオートコンプリートとタイプの最新のコードエディターのチェックは、開発中に貴重な支援を提供します。 次に、TypeScriptを使用してReactコンポーネントを書きます。 TypeScript関数の署名を使用して機能コンポーネントを作成したり、クラスコンポーネントにTypeScriptクラスを使用したりできます。 TypeScriptを使用すると、プロップタイプと状態タイプを指定して、コードエディターで強力なタイプのチェックとオートコンプリートサポートを提供できます。 Reactアプリでサードパーティライブラリまたはパッケージを使用している場合は、それらの依存関係のタイプスクリプトタイプ定義を必ずインストールしてください。多くの一般的なライブラリには、間違いなく利用可能なコミュニティにメンテナンスされたタイプスクリプトタイプの宣言がありますReact.js（JavaScript）：React.jsは、一般にReactと呼ばれ、ユーザーインターフェイスを構築するために設計されたJavaScriptライブラリです。 React.jsを使用する場合、開発者は通常、Plane JavaScriptでアプリケーションを書き込み、ES6やES7などの最新のJavaScript機能を活用します。 React.jsの顕著な特徴の1つは、デフォルトで厳格なタイピングを強制しないことです。その結果、開発者は、タイプ検証とエラー検出のためのランタイムチェックとプロパティなどのツールに依存しています。発達。 React TypeScriptを使用すると、開発者はTypeScriptの構文を使用してReactコンポーネントを書き込みます。このアプローチは、開発中の静的タイプチェック、つまり大きな利点を提供します。 TypeScriptは、開発者がプロップ、状態、およびその他のデータのタイプとインターフェイスを定義できるようにします。これにより、ランタイムではなくコンパイル時にタイプ関連のエラーをキャッチできます。これにより、コードの品質の向上、コードの予測可能性の向上、ランタイムエラーの減少につながります。 TypeScriptまたはJavaScriptを使用してReactプロジェクトを開始することは、さまざまな考慮事項に依存します。開発ツール。 TypeScriptの静的タイプチェックは、コンパイル時にエラーをキャッチするのに役立ち、より堅牢で保守可能なコードにつながります。かなりのプロジェクトまたは複雑なプロジェクトに取り組んでいる場合、TypeScriptはバグを防止し、コードベースを管理しやすくするのに特に有益です。 TypeScriptは、チーム内のコードの読みやすさとコラボレーションを改善できるタイプ定義を通じて強化されたコードドキュメントも提供します。 JavaScriptはより軽量で、学習曲線が短く、セットアップと開始が迅速になります。チームがTypeScriptの経験がない場合、またはプロジェクトの要件が強力なタイピングを必要としない場合、JavaScriptは実用的な選択である可能性があります。さらに、JavaScriptエコシステムは、ライブラリとリソースの広範なコレクションを誇っているため、プロジェクトのソリューションとサポートを簡単に見つけることができます。一般的なユースケース
npx create-react-app my-app <span>--template typescript
</span>
<span>{
</span> <span>"compilerOptions": {
</span> <span>"target": "es5", // Specify ECMAScript target version
</span> <span>"lib": [
</span> <span>"dom",
</span> <span>"dom.iterable",
</span> <span>"esnext"
</span> <span>], // List of library files to be included in the compilation
</span> <span>"allowJs": true, // Allow JavaScript files to be compiled
</span> <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span> <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span> <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span> <span>"strict": true, // Enable all strict type checking options
</span> <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span> <span>"module": "esnext", // Specify module code generation
</span> <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span> <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span> <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span> <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span> <span>"jsx": "react", // Support JSX in .tsx files
</span> <span>"sourceMap": true, // Generate corrresponding .map file
</span> <span>"declaration": true, // Generate corresponding .d.ts file
</span> <span>"noUnusedLocals": true, // Report errors on unused locals
</span> <span>"noUnusedParameters": true, // Report errors on unused parameters
</span> <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span> <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span> <span>},
</span> <span>"include": [
</span> <span>"src/**/*" // *** The files TypeScript should type check ***
</span> <span>],
</span> <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span><span>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
</span>
たとえば、
jestを使用している場合は、実行してこれを行うことができます。
module<span>.exports = {
</span> <span>parser: '@typescript-eslint/parser', // Specifies the ESLint parser
</span> <span>extends: [
</span> <span>'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
</span> <span>'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
</span> <span>],
</span> <span>parserOptions: {
</span> <span>ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
</span> <span>sourceType: 'module', // Allows for the use of imports
</span> <span>ecmaFeatures: {
</span> <span>jsx: true, // Allows for the parsing of JSX
</span> <span>},
</span> <span>},
</span> <span>rules: {
</span> <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
</span> <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
</span> <span>},
</span> <span>settings: {
</span> <span>react: {
</span> <span>version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
</span> <span>},
</span> <span>},
</span><span>};
</span><span>yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
</span>
npx create-react-app my-app <span>--template typescript
</span>
<span>{
</span> <span>"compilerOptions": {
</span> <span>"target": "es5", // Specify ECMAScript target version
</span> <span>"lib": [
</span> <span>"dom",
</span> <span>"dom.iterable",
</span> <span>"esnext"
</span> <span>], // List of library files to be included in the compilation
</span> <span>"allowJs": true, // Allow JavaScript files to be compiled
</span> <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span> <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span> <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span> <span>"strict": true, // Enable all strict type checking options
</span> <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span> <span>"module": "esnext", // Specify module code generation
</span> <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span> <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span> <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span> <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span> <span>"jsx": "react", // Support JSX in .tsx files
</span> <span>"sourceMap": true, // Generate corrresponding .map file
</span> <span>"declaration": true, // Generate corresponding .d.ts file
</span> <span>"noUnusedLocals": true, // Report errors on unused locals
</span> <span>"noUnusedParameters": true, // Report errors on unused parameters
</span> <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span> <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span> <span>},
</span> <span>"include": [
</span> <span>"src/**/*" // *** The files TypeScript should type check ***
</span> <span>],
</span> <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span> reactとtypeScriptを最適な方法で一緒に使用すると、情報の量が多いため、少し学習が必要ですが、長期的にはメリットが非常に報われます。この記事では、構成、コンポーネント、小道具、フック、一般的なユースケース、およびサードパーティライブラリを取り上げました。多くの個々の領域をより深く掘り下げることができましたが、これはベストプラクティスに従うのに役立つために必要な80％をカバーする必要があります。
これを実際に見たい場合は、Githubでこの例を見ることができます。
これらの推奨事項の多くは、React-Typescript-Cheatsheetから直接来ました。反応型の何かの特定の例や詳細を探しているなら、これは行くべき場所です。貢献も歓迎します！
もう1つの素晴らしいリソースは、タイプスクリプトハンドブックです。これは、タイプスクリプトチームによって最新の状態に保たれ、言語の内側の仕組みの背後にある例と詳細な説明を提供します。
ブラウザのタイプスクリプトコードでReactをテストできることをご存知ですか？あなたがしなければならないのは、輸入Reactだけです。これがあなたを始めるためのリンクです。
タイプスクリプトスキルを向上させるための実用的な方法 faq
TypeScriptでReactを使用できますか？
TypeScriptでReactプロジェクトを開始するには、TypeScriptテンプレートを使用したReactアプリの作成などのツールを使用したり、既存のReactプロジェクトでタイプスクリプトを手動で構成したりできます。 TypeScriptを使用すると、Reactとの動的でインタラクティブなユーザーインターフェイスを構築しながら静的タイピングの利点を享受でき、より信頼性が高く保守可能なWebアプリケーションになります。タイプスクリプトは、Reactアプリケーションを構築するために必要ではありませんが、非常に有益な場合があります。 ReactはもともとJavaScript（ECMAScript）を使用して開発されていましたが、多くのReactアプリケーションはまだPlain JavaScriptで書かれています。 ReactはJavaScriptでシームレスに動作し、TypeScriptなしで完全に機能的で効率的なReactアプリケーションを作成できます。
ただし、TypeScriptはReactで作業するときに大きな利点を提供できます。 TypeScriptは、javaScriptの静的に型付けられたスーパーセットです。つまり、タイプの注釈とJavaScriptコードにチェックを追加します。これらのタイプの注釈は、コンパイル時にタイプ関連のエラーをキャッチでき、コードの品質と保守性が向上します。 TypeScriptは、プロップ、状態、および関数パラメーターのタイプ安全性を提供し、ランタイムエラーの可能性を減らすことにより、大きく複雑なReactコードベースをより管理しやすくすることができます。要約すると、TypeScriptはReactの要件ではなく、Reactを効果的に使用できます。プレーンJavaScriptを使用。ただし、タイプチェックを追加してコードの予測可能性を改善することにより、タイプスクリプトが開発エクスペリエンスを向上させることができ、特により大きく複雑なプロジェクトで堅牢で保守可能なアプリケーションを構築するための貴重な選択肢になります。React AppsでTypeScriptを使用する方法は？
TypeScriptを使用して新しいReactプロジェクトをセットアップすることから始めます。 TypeScriptテンプレートを使用したCreate React Appなどのツールを使用したり、既存のReactプロジェクトでTypeScriptを手動で構成できます。 タイプスクリプトとの反応を開始する必要がありますか？
以上がTypeScriptとの反応：ベストプラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
