react常见的ts类型怎么定义

发布时间：2023-04-17 17:19:40 作者：iii
来源：亿速云阅读：238

React常见的TS类型怎么定义

TypeScript（TS）是一种强类型的JavaScript超集，它为JavaScript添加了静态类型检查。在React项目中，使用TypeScript可以帮助我们更好地管理组件的类型，减少运行时错误，并提高代码的可维护性。本文将详细介绍在React中常见的TypeScript类型定义，包括组件、状态、事件、高阶组件等方面的类型定义。

1. 基本组件类型定义

1.1 函数组件

在React中，函数组件是最常见的组件类型之一。使用TypeScript定义函数组件时，我们可以使用React.FC（Function Component）类型。

import React from 'react';

interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;

在上面的例子中，MyComponentProps接口定义了组件的属性类型，React.FC<MyComponentProps>表示这是一个函数组件，并且它的属性类型为MyComponentProps。

1.2 类组件

类组件是React中另一种常见的组件类型。使用TypeScript定义类组件时，我们可以使用React.Component类，并指定属性和状态的类型。

import React, { Component } from 'react';

interface MyComponentProps {
  name: string;
  age: number;
}

interface MyComponentState {
  count: number;
}

class MyComponent extends Component<MyComponentProps, MyComponentState> {
  state: MyComponentState = {
    count: 0,
  };

  render() {
    const { name, age } = this.props;
    const { count } = this.state;

    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
        <p>Count: {count}</p>
      </div>
    );
  }
}

export default MyComponent;

在上面的例子中，MyComponentProps接口定义了组件的属性类型，MyComponentState接口定义了组件的状态类型。Component<MyComponentProps, MyComponentState>表示这是一个类组件，并且它的属性类型为MyComponentProps，状态类型为MyComponentState。

2. 状态管理

2.1 使用`useState`管理状态

在函数组件中，我们通常使用useState来管理组件的状态。使用TypeScript时，我们可以为useState指定状态的类型。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

在上面的例子中，useState<number>(0)表示count的状态类型为number，初始值为0。

2.2 使用`useReducer`管理复杂状态

对于更复杂的状态管理，我们可以使用useReducer。使用TypeScript时，我们可以为useReducer指定状态和动作的类型。

import React, { useReducer } from 'react';

interface State {
  count: number;
}

type Action = { type: 'increment' } | { type: 'decrement' };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

const MyComponent: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default MyComponent;

在上面的例子中，State接口定义了状态的类型，Action类型定义了动作的类型。useReducer(reducer, { count: 0 })表示使用reducer函数来管理状态，初始状态为{ count: 0 }。

3. 事件处理

3.1 处理表单事件

在React中，处理表单事件是非常常见的操作。使用TypeScript时，我们可以为事件处理函数指定事件类型。

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [inputValue, setInputValue] = useState<string>('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Input Value: {inputValue}</p>
    </div>
  );
};

export default MyComponent;

在上面的例子中，React.ChangeEvent<HTMLInputElement>表示输入框的change事件类型。

3.2 处理按钮点击事件

处理按钮点击事件也是React中常见的操作。使用TypeScript时，我们可以为点击事件处理函数指定事件类型。

import React, { useState } from 'react';

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

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default MyComponent;

在上面的例子中，React.MouseEvent<HTMLButtonElement>表示按钮的click事件类型。

4. 高阶组件

高阶组件（Higher-Order Component，HOC）是React中用于复用组件逻辑的一种高级技术。使用TypeScript时，我们可以为高阶组件指定类型。

4.1 简单的高阶组件

import React from 'react';

interface WithLoadingProps {
  loading: boolean;
}

const withLoading = <P extends object>(Component: React.ComponentType<P>) => {
  return ({ loading, ...props }: WithLoadingProps & P) => {
    if (loading) {
      return <div>Loading...</div>;
    }

    return <Component {...(props as P)} />;
  };
};

export default withLoading;

在上面的例子中，withLoading是一个高阶组件，它接受一个组件并返回一个新的组件。WithLoadingProps接口定义了高阶组件的属性类型，React.ComponentType<P>表示传入的组件类型。

4.2 使用高阶组件

import React from 'react';
import withLoading from './withLoading';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default withLoading(MyComponent);

在上面的例子中，withLoading(MyComponent)将MyComponent包装成一个新的组件，并添加了loading属性。

5. 上下文（Context）

React的上下文（Context）提供了一种在组件树中传递数据的方式，而不必手动逐层传递props。使用TypeScript时，我们可以为上下文指定类型。

5.1 创建上下文

import React from 'react';

interface ThemeContextProps {
  theme: string;
  toggleTheme: () => void;
}

const ThemeContext = React.createContext<ThemeContextProps>({
  theme: 'light',
  toggleTheme: () => {},
});

export default ThemeContext;

在上面的例子中，ThemeContextProps接口定义了上下文的类型，React.createContext<ThemeContextProps>创建了一个上下文，并指定了默认值。

5.2 使用上下文

import React, { useContext, useState } from 'react';
import ThemeContext from './ThemeContext';

const MyComponent: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default MyComponent;

在上面的例子中，useContext(ThemeContext)用于获取上下文的值，并根据theme的值来设置组件的样式。

6. 路由

在React应用中，路由是非常重要的一部分。使用TypeScript时，我们可以为路由组件指定类型。

6.1 使用`react-router-dom`

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home: React.FC = () => <div>Home</div>;
const About: React.FC = () => <div>About</div>;

const App: React.FC = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

在上面的例子中，Route组件的path和component属性分别指定了路由的路径和对应的组件。

6.2 使用`useParams`获取路由参数

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useParams } from 'react-router-dom';

interface UserParams {
  id: string;
}

const User: React.FC = () => {
  const { id } = useParams<UserParams>();

  return <div>User ID: {id}</div>;
};

const App: React.FC = () => {
  return (
    <Router>
      <nav>
        <Link to="/user/1">User 1</Link>
        <Link to="/user/2">User 2</Link>
      </nav>
      <Switch>
        <Route path="/user/:id" component={User} />
      </Switch>
    </Router>
  );
};

export default App;

在上面的例子中，useParams<UserParams>()用于获取路由参数，并指定参数的类型为UserParams。

7. 异步数据获取

在React应用中，异步数据获取是非常常见的操作。使用TypeScript时，我们可以为异步操作指定类型。

7.1 使用`useEffect`获取数据

import React, { useEffect, useState } from 'react';

interface User {
  id: number;
  name: string;
}

const MyComponent: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data: User[]) => setUsers(data));
  }, []);

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

在上面的例子中，User接口定义了用户数据的类型，useEffect用于在组件挂载时获取数据，并将数据存储在users状态中。

7.2 使用`async/await`获取数据

import React, { useEffect, useState } from 'react';

interface User {
  id: number;
  name: string;
}

const MyComponent: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data: User[] = await response.json();
      setUsers(data);
    };

    fetchData();
  }, []);

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

在上面的例子中，fetchData函数使用async/await语法来获取数据，并将数据存储在users状态中。

8. 表单处理

在React中，表单处理是非常常见的操作。使用TypeScript时，我们可以为表单处理函数指定类型。

8.1 处理表单提交

import React, { useState } from 'react';

interface FormData {
  name: string;
  email: string;
}

const MyComponent: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({ name: '', email: '' });

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(formData);
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyComponent;

在上面的例子中，FormData接口定义了表单数据的类型，handleSubmit函数处理表单提交事件，handleChange函数处理表单输入框的change事件。

8.2 使用`useRef`获取表单元素

import React, { useRef } from 'react';

const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (inputRef.current) {
      console.log(inputRef.current.value);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" ref={inputRef} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyComponent;

在上面的例子中，inputRef是一个useRef引用，用于获取输入框的DOM元素。handleSubmit函数在表单提交时获取输入框的值。

9. 自定义Hook

自定义Hook是React中用于复用逻辑的一种技术。使用TypeScript时，我们可以为自定义Hook指定类型。

9.1 创建自定义Hook

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
}

const useUsers = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data: User[]) => setUsers(data));
  }, []);

  return users;
};

export default useUsers;

在上面的例子中，useUsers是一个自定义Hook，用于获取用户数据。User接口定义了用户数据的类型。

9.2 使用自定义Hook

import React from 'react';
import useUsers from './useUsers';

const MyComponent: React.FC = () => {
  const users = useUsers();

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

在上面的例子中，useUsers自定义Hook用于获取用户数据，并在组件中渲染用户列表。

10. 类型断言

在TypeScript中，类型断言是一种告诉编译器某个值的类型的方式。在React中，我们有时需要使用类型断言来处理某些特殊情况。

10.1 使用`as`进行类型断言

import React from 'react';

const MyComponent: React.FC = () => {
  const inputRef = React.useRef<HTMLInputElement>(null);

  const handleClick = () => {
    if (inputRef.current) {
      (inputRef.current as HTMLInputElement).focus();
    }
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

在上面的例子中，(inputRef.current as HTMLInputElement)使用as关键字进行类型断言，告诉编译器inputRef.current的类型为HTMLInputElement。

10.2 使用`!`进行非空断言

import React from 'react';

const MyComponent: React.FC = () => {
  const inputRef = React.useRef<HTMLInputElement>(null);

  const handleClick = () => {
    inputRef.current!.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

在上面的例子中，inputRef.current!.focus()使用!进行非空断言，告诉编译器inputRef.current不为null。

11. 泛型组件

泛型组件是React中一种高级的组件类型，它允许我们在组件中使用泛型类型。使用TypeScript时，我们可以为泛型组件指定类型。

11.1 创建泛型组件

”`typescript import React from ‘react’;

interface ListProps { items: T[]; render