React with TypeScript では、関数コンポーネントとクラス コンポーネントという 2 つの主なアプローチを使用してコンポーネントを作成できます。どちらのアプローチでもプロパティと状態を操作できますが、使用するパラダイムはわずかに異なります。 TypeScript は静的型付けを提供することで開発の安全性をさらに高め、プロパティと状態の形状を正確に定義できます。

以下では、インターフェイスを使用して型を定義し、コードの一貫性と読みやすさを確保するさまざまなコンポーネントの例を見ていきます。

F-1。 小道具と状態のない機能コンポーネント

この場合、props も state も使用しない単純な機能コンポーネントは次のようになります:

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

このコンポーネントは静的テキストのみを表示します。

F-2. 支柱付き機能部品

プロパティを介してデータを渡したい場合は、インターフェイスを使用してそのデータの形式を定義します。

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

ここで、IMyProps には、パーソナライズされた挨拶を表示するために使用される名前が含まれています。

F-3. 状態のある機能コンポーネント

機能コンポーネントで状態を使用する場合、React の useState フックを使用します:

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

このコンポーネントはローカル状態を使用してカウンターを追跡します。

F-4. props と state を備えた機能コンポーネント

プロパティと状態を組み合わせることで、プロパティを通じてデータを受け取り、内部で状態を操作する柔軟なコンポーネントを作成できます:

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

このコンポーネントは、initialCount をプロップとして使用し、動的カウンター追跡の内部状態を使用します。

K-1。 プロパティと状態のないクラスコンポーネント

React の props と state のないクラス コンポーネントは次のようになります:

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

これは静的テキストを表示する単純なクラス コンポーネントです。

K-2。 小道具を備えたクラスコンポーネント

クラスコンポーネントがプロパティを受け取ると、インターフェイスを使用してそれらを定義します:

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

機能コンポーネントと同様に、ここでもプロップを使用してパーソナライズされたデータを表示します。

K-3。 状態を持つクラスコンポーネント

状態を持つクラス コンポーネントの場合、コンストラクター内で状態を定義します。

• コンストラクター内の空の括弧

小道具を使用しない場合は、コンストラクター内のかっこを空のままにすることができます:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• プロパティのタイプとして {} を明示的に指定します

小道具について明示的にしたい場合は、タイプとして {} を指定できます:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> どちらの場合でも、TypeScript と React は正しく動作します。コンポーネントが props を使用しない場合は、コンストラクターで空の括弧を使用するだけで済みますが、初期化エラーを避けるために必ずスーパー呼び出しで {} を渡してください。

このコンポーネントは状態を使用してカウンターの変更を追跡します。

K-4。 props と state を備えたクラスコンポーネント

プロパティと状態の両方を使用するクラス コンポーネントの場合、両方の概念を組み合わせることができます:

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

このコンポーネントは props を通じて初期カウンターを受け取り、さらに内部で状態を操作します。

TypeScript でインターフェイスを使用すると、特に複雑なデータ構造を扱う場合に、入力が向上し、コードが読みやすくなります。これらの基本的な例を使用すると、React と TypeScript を使用して関数コンポーネントとクラス コンポーネントを作成するための基礎が得られます。