TypeScript x React基本概念

React和TypeScript的搭配是一个强大的组合，可以使应用程序的开发更安全和更易于维护。TypeScript为JavaScript添加了静态类型检查，为开发人员提供了更高质量和可靠性的代码。以下是关于如何使用 TypeScript 和 React 的基本方法的指南。

1. 项目的初始化

首先，我们可以使用Create React App来简单地设置一个结合了TypeScript和React的项目。

npx create-react-app my-ts-react-app --template typescript
cd my-ts-react-app

使用上述命令，将创建一个使用TypeScript模板的React项目。

2. 组件的创建

在src文件夹内创建一个名为components的文件夹。

使用TypeScript可以为组件定义类型。例如，可以像下面这样为函数组件的props指定类型。

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;

如果在接口中逐一指定感到麻烦的话，还有其他的写法可供选择！
（但是，在大多数情况下，您可以创建一个types文件夹，在那里指定并导入每个组件所使用的类型，并使用这些类型。）

import React from "react";

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

export default MyComponent;

import "./App.css";
import React from "react";
import MyComponent from "./components/MyComponent";

const App: React.FC = () => {
  return (
    <div className="App">
      <MyComponent name="Naoya_pro" age={22} />
    </div>
  );
};

export default App;

3. State的管理。

在使用class组件来管理状态时，您也可以使用类型来定义状态的形状。

import React, { useState } from "react";

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

  const increment = () => {
    setCount(count + 1);
  };

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

export default Counter;

4. 路由设计

使用React Router在应用程序中管理页面跳转时，也可以利用类型。

# npmの場合
npm i react-router-dom@6

# yarnの場合
yarn add react-router-dom@6

import "./App.css";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import MyComponent from "./components/MyComponent";
import Counter from "./components/Counter";

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/my-component" element={<MyComponent name="Naoya_pro" age={22} />} />
        <Route path="/counter" element={<Counter />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

利用这些技术，可以将TypeScript与React结合起来，使应用程序的开发更加类型安全且易于维护。通过利用类型补全和编辑器的支持，我们可以提高开发效率。

在这篇文章中，我们提供了一个针对初学者大学生理解React Next的输出资料。期待您的评论、修改或意见！