#22 使用Vite创建React+Typescript项目
使用Vite创建一个React和TypeScript项目是一个快速且现代的方法，以充分利用Vite提供的极速开发体验和React的灵活性。这里有一个简单的步骤教程，指导你从零开始创建一个新项目：
创建新项目
打开你的命令行工具（例如终端、命令提示符或PowerShell），然后运行以下命令以创建一个新的Vite项目：
npm create vite@latest my-react-app -- --template react-ts
这里my-react-app是你的项目名称，你可以根据自己的需要更改它。该命令创建一个新的文件夹，包含使用TypeScript配置的React模板。
useState类型标注示例
在React和TypeScript项目中使用useState钩子可以以多种方式管理组件状态。以下是扩展您的基础App组件的一些示例，展示如何使用useState来管理不同类型的状态，包括字符串、数字、布尔值、对象和数组。每个示例都附有注释，解释了其用途和工作方式。
import React, { useState } from 'react';
function App() {
// 字符串状态示例
const [name, setName] = useState('John Doe');
// 数字状态示例
const [age, setAge] = useState(30);
// 布尔值状态示例
const [isStudent, setIsStudent] = useState(false);
// 对象状态示例
const [profile, setProfile] = useState<{ email: string; phone: number }>({
email: '[email protected]',
phone: 1234567890,
});
// 数组状态示例
const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);
// 更新状态的函数示例
const updateAge = () => setAge(age + 1);
const toggleStudentStatus = () => setIsStudent(!isStudent);
const updateEmail = () => setProfile({ ...profile, email: '[email protected]' });
const addItem = () => setItems([...items, 'Dragonfruit']);
return (
<>
This is App!
{/* 展示各种状态 */}
Name: {name}
Age: {age}
Is Student: {isStudent ? 'Yes' : 'No'}
Email: {profile.email}
Phone: {profile.phone}
{items.map((item, index) => (
- {item}
))}
{/* 操作状态的按钮 */}
);
}
export default App;
这段代码演示了useState的基本使用方法，包括初始化状态、更新状态，以及如何在组件中使用状态。每个useState调用返回一个状态变量（如name, age等）和一个允许你更新该状态的函数（如setName, setAge等）。此外，这个示例还展示了如何管理对象和数组类型的状态，以及如何在用户交互时更新状态。
简化类型
为了使类型标注更简洁和可维护，您可以使用TypeScript的类型别名（type）或接口（interface）来定义状态的形状。这样，您可以在声明useState时重用这些类型定义，使代码更加整洁。
下面是如何使用类型别名和接口重构原来的示例代码：
使用类型别名
import React, { useState } from 'react';
// 定义类型别名
type Profile = {
email: string;
phone: number;
};
type ItemList = string[];
function App() {
// 使用类型别名来标注useState
const [profile, setProfile] = useState({
email: '[email protected]',
phone: 1234567890,
});
const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);
// 示例代码略...
}
使用接口
import React, { useState } from 'react';
// 使用接口定义类型
interface Profile {
email: string;
phone: number;
}
interface ItemList extends Array {}
function App() {
// 使用接口来标注useState
const [profile, setProfile] = useState({
email: '[email protected]',
phone: 1234567890,
});
const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);
// 示例代码略...
}
这两种方法（类型别名和接口）都能达到相同的目的，即提供一个清晰、简洁的方式来定义和使用类型注解。选择哪一种取决于个人偏好和具体情况。类型别名更适合于定义简单的类型或联合类型，而接口更适合于定义复杂的对象类型，它们还可以被扩展或实现。
导出类型
如果您打算在同一个项目的多个文件中重用这些类型（比如Profile或ItemList），那么确实需要将它们导出。这样做可以帮助您保持代码的干净和一致性，避免在不同文件中重复定义相同的类型。
导出类型别名或接口
您可以在定义类型别名或接口的地方使用export关键字来导出它们。然后，在其他需要使用这些类型的文件中，使用import语句来导入。
示例：定义并导出类型别名
// types.ts
export type Profile = {
email: string;
phone: number;
};
export type ItemList = string[];
示例：定义并导出接口
// types.ts
export interface Profile {
email: string;
phone: number;
}
export interface ItemList extends Array {}
在其他组件中使用导入的类型
一旦类型被导出，您就可以在其他组件中导入并使用这些类型。
示例：导入并使用类型
// App.tsx
import React, { useState } from 'react';
import { Profile, ItemList } from './types'; // 假设类型定义在types.ts文件中
function App() {
const [profile, setProfile] = useState({
email: '[email protected]',
phone: 1234567890,
});
const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);
// 示例代码略...
}
通过这种方式，您可以在整个项目中复用类型定义，从而提高代码的可维护性和可读性。
标记可空类型
在TypeScript中，如果您想标记一个类型为可空（即它可以是其指定的类型或null），您可以使用| null来实现这一点。对于Profile类型，这意味着Profile实例可以是Profile类型的对象，也可以是null。下面是几种不同的写法来实现这一点：
直接在useState中使用| null
您可以直接在useState的类型参数中使用| null来标记状态可以是null。
const [profile, setProfile] = useState(null);
这种方式直接明了，适用于简单的场景，其中状态可能最初是null，或者在某个时点可以被设置为null。
使用类型别名
如果您使用类型别名来定义Profile，可以在定义另一个类型别名时添加| null。
type Profile = {
email: string;
phone: number;
};
type NullableProfile = Profile | null;
const [profile, setProfile] = useState(null);
这种方法让您可以在多处重用NullableProfile，保持类型使用的一致性。
使用接口和联合类型
虽然接口本身不直接支持联合类型（如与null的联合），您仍然可以在使用useState时将接口与null联合。
interface Profile {
email: string;
phone: number;
}
const [profile, setProfile] = useState(null);
或者，如同类型别名的做法，您可以定义一个新的类型别名来组合接口和null。
interface Profile {
email: string;
phone: number;
}
type NullableProfile = Profile | null;
const [profile, setProfile] = useState(null);
使用TypeScript的Nullable工具类型（假设存在）
虽然TypeScript标准库中没有直接提供名为Nullable的工具类型，但您可以自己定义一个。这种方法较少用，但为了完整性这里提一下。
type Nullable = T | null;
const [profile, setProfile] = useState>(null);
以上各种方法都可以让您标记Profile类型为可空。选择哪一种取决于您的个人偏好和项目的具体需求。
使用可空类型示例
使用可空类型（null）的一个常见场景是在组件中管理可能还未加载或者可以被重置的数据。下面的示例展示了如何在React组件中使用可空类型来管理用户的个人资料信息，这里的Profile类型可以是具体的个人资料对象或者null，表示个人资料尚未加载或已被清空。
定义Profile类型和组件
首先，定义Profile接口和一个使用可空Profile状态的React组件。
import React, { useState } from 'react';
// 定义Profile接口
interface Profile {
email: string;
phone: number;
}
// 可空类型示例组件
function ProfileComponent() {
// Profile的状态可以是Profile类型的对象或者null
const [profile, setProfile] = useState(null);
// 模拟加载Profile
const loadProfile = () => {
setProfile({
email: '[email protected]',
phone: 1234567890,
});
};
// 清除Profile
const clearProfile = () => {
setProfile(null);
};
return (
User Profile
{profile ? (
Email: {profile.email}
Phone: {profile.phone}
) : (
No profile loaded.
)}
);
}
export default ProfileComponent;
在这个示例中：
useState初始化了一个可以是(null) Profile对象或null的状态。初始状态为null表示还没有加载任何个人资料。loadProfile函数模拟了异步加载个人资料的过程，加载后会设置profile状态为一个具体的Profile对象。clearProfile函数将profile状态重置为null，模拟了清除已加载个人资料的行为。- 在渲染部分，组件会检查
profile是否为null。如果不是null，则展示个人资料信息；如果是null，则显示“没有加载个人资料”的信息。 - 有两个按钮允许用户触发加载或清除个人资料的动作。
这个示例展示了如何在React中使用可空类型来灵活地管理组件状态，特别是在处理异步数据加载和清除操作时。