ReactでのTypeScriptの使用
TypeScriptは素晴らしいです。 Reactもそうです。 両方一緒に使いましょう! TypeScriptを使用すると、IntelliSenseのメリットを享受できるだけでなく、コードについてさらに推論することができます。 これに加えて、TypeScriptの採用は低摩擦です。これは、プロジェクトの残りの部分全体で問題を引き起こすことなく、ファイルを段階的にアップグレードできるためです。
新しいReactプロジェクトを作成し、TypeScriptを統合することから始めましょう。 次のコマンドを実行して、プロジェクトを開始します。
# Make a new directory $ mkdir react-typescript # Change to this directory within the terminal $ cd react-typescript # Initialise a new npm project with defaults $ npm init -y # Install React dependencies $ npm install react react-dom # Make index.html and App.tsx in src folder $ mkdir src $ cd src $ touch index.html $ touch App.tsx # Open the directory in your favorite editor $ code .
次に、次のようにindex.html
ファイルを作成できます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>React + TypeScript</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="main"></div> <script src="./App.tsx"></script> </body> </html>
バンドラーとしてParcelを使用しますが、必要に応じてwebpackまたは別のバンドラーを使用することもできます。 または、Create React Appを使用する場合は、このセクションを確認してください。 プロジェクトにParcelを追加しましょう。
# Install Parcel to our DevDependencies $ npm i parcel-bundler -D # Install TypeScript $ npm i typescript -D # Install types for React and ReactDOM $ npm i -D @types/react @types/react-dom
package.json
を、開発サーバーを起動する新しいタスクで更新できます。
{ "name": "react-typescript", "version": "1.0.0", "description": "An example of how to use React and TypeScript with Parcel", "scripts": { "dev": "parcel src/index.html" }, "keywords": [], "author": "Paul Halliday", "license": "MIT" }
これで、Counter.tsx
ファイルに単純なカウンターを設定できます。
import * as React from 'react'; export default class Counter extends React.Component { state = { count: 0 }; increment = () => { this.setState({ count: (this.state.count + 1) }); }; decrement = () => { this.setState({ count: (this.state.count - 1) }); }; render () { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.increment}>Increment</button> <button onClick={this.decrement}>Decrement</button> </div> ); } }
次に、App.tsx
の内部で、カウンターをロードできます。
import * as React from 'react'; import { render } from 'react-dom'; import Counter from './Counter'; render(<Counter />, document.getElementById('main'));
私たちのプロジェクトは$ npm run dev
で実行でき、http://localhost:1234
でアクセスできます。
ReactアプリとTypeScriptを作成する
Create React App を使用してプロジェクトを開始したい場合は、CRAがTypeScriptをすぐにサポートすることを知っていただければ幸いです。
create-react-app
コマンドを呼び出すときは、--typescript
フラグを使用するだけです。
$ create-react-app my-new-app --typescript
機能コンポーネント
ステートレスまたは機能コンポーネントは、次のようにTypeScriptで定義できます。
import * as React from 'react'; const Count: React.FunctionComponent<{ count: number; }> = (props) => { return <h1>{props.count}</h1>; }; export default Count;
React.FunctionComponent
を使用して、予想される小道具のオブジェクト構造を定義しています。 このシナリオでは、count
という名前の単一の小道具で渡されることを期待しており、インラインで定義しています。 Props
などのインターフェイスを作成することで、これを他の方法で定義することもできます。
interface Props { count: number; } const Count: React.FunctionComponent<Props> = (props) => { return <h1>{props.count}</h1>; };
クラスコンポーネント
クラスコンポーネントも同様にTypeScriptで次のように定義できます。
import * as React from 'react'; import Count from './Count'; interface Props {} interface State { count: number; }; export default class Counter extends React.Component<Props, State> { state: State = { count: 0 }; increment = () => { this.setState({ count: (this.state.count + 1) }); }; decrement = () => { this.setState({ count: (this.state.count - 1) }); }; render () { return ( <div> <Count count={this.state.count} /> <button onClick={this.increment}>Increment</button> <button onClick={this.decrement}>Decrement</button> </div> ); } }
デフォルトの小道具
デフォルトの小道具を設定したいシナリオでdefaultProps
を定義することもできます。 これを示すために、カウントの例を更新できます。
import * as React from 'react'; interface Props { count?: number; } export default class Count extends React.Component<Props> { static defaultProps: Props = { count: 10 }; render () { return <h1>{this.props.count}</h1>; } }
this.state.count
をCounter
コンポーネントに渡すのも停止する必要があります。これにより、デフォルトのプロップが上書きされます。
render () { return ( <div> <Count /> <button onClick={this.increment}>Increment</button> <button onClick={this.decrement}>Decrement</button> </div> ) }
これで、TypeScriptとReactを使用するように設定されたプロジェクトと、独自の機能およびクラスベースのコンポーネントを作成するためのツールができました。