在使用 TypeScript 的 React 中，我們可以使用兩種主要方法來建立元件：功能元件和類別元件。兩種方法都允許使用 props 和 state，但使用的範例略有不同。 TypeScript 透過提供靜態類型進一步增強了開發安全性，這使我們能夠精確定義 props 和 state 的形狀。

下面我們將看不同元件的範例，使用介面來定義類型，以確保程式碼的一致性和可讀性。

F-1。 沒有 props 和 state 的功能組件

在這種情況下，一個既不使用 props 也不使用 state 的簡單功能元件如下所示：

import React from 'react';

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

此元件僅顯示靜態文字。

F-2。 附 props 的功能組件

當我們想要透過 props 傳遞資料時，我們會使用介面來定義資料的形式：

import React from 'react';

interface IMyProps {
  name: string;
}

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

這裡IMyProps包含用來顯示個人化問候語的名稱。

F-3。 具有狀態的功能組件

在功能元件中使用狀態時，我們使用React的useState hook：

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 的功能組件

透過組合 props 和 state，我們可以擁有靈活的元件，透過 props 接收資料並在內部操作狀態：

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。 沒有 props 和 state 的類別組件

React 中沒有 props 和 state 的類別元件看起來像這樣：

import React from 'react';

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

這是一個顯示靜態文字的簡單類別元件。

K-2。 有 props 的類別組件

當類別元件接收 props 時，我們使用介面定義它們：

import React from 'react';

interface IMyProps {
  name: string;
}

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

與功能元件一樣，這裡我們使用 props 來展示個人化資料。

K-3。 具有狀態的類別組件

對於有狀態的類別元件，我們在建構函式中定義狀態：

• 建構子中的空括號

如果你不使用 props，你可以簡單地將建構函式中的括號留空：

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
      
    );
  }
}

• 明確指定 {} 為 props 的類型

如果你想明確 props，你可以指定 {} 作為類型：

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，你可以簡單地在建構函式中使用空括號，但一定要在 super 呼叫中傳遞 {} 以避免初始化錯誤。

此元件使用狀態來追蹤計數器變化。

K-4。 具有 props 和 state 的類別組件

對於同時使用 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 編寫函數和類別元件奠定基礎。