网站开发 q3687474,工作室是个体户还是公司,上海资讯,服装平台网站有哪些TypeScript 为 React 开发带来了强大的类型安全保障#xff0c;这里解析常见的一些TS写法#xff1a;
一、组件基础类型
1. 函数组件定义
// 显式声明 Props 类型并标注返回值
interface WelcomeProps {name: string;age?: number; // 可选属性
}const Welcome: React.FC…TypeScript 为 React 开发带来了强大的类型安全保障这里解析常见的一些TS写法
一、组件基础类型
1. 函数组件定义
// 显式声明 Props 类型并标注返回值
interface WelcomeProps {name: string;age?: number; // 可选属性
}const Welcome: React.FCWelcomeProps ({ name, age 18 }) (divHello {name}, 年龄 {age}/div
);// React 18 需要显式声明 children如果用到
interface CardProps {children: React.ReactNode;
}const Card: React.FCCardProps ({ children }) (div classNamecard{children}/div
)2. 类组件写法
type CounterState { count: number };class Counter extends React.Component{}, CounterState {state: CounterState { count: 0 };handleClick () {this.setState(prev ({ count: prev.count 1 }));};render() {return button onClick{this.handleClick}点击次数{this.state.count}/button;}
}二、Props 高级用法
1. 联合类型与类型守卫
type User { id: number;type: admin | user;email?: string;accessLevel?: number;
};const UserProfile ({ user }: { user: User }) {if (user.type admin) {return div管理员权限{user.accessLevel}/div;}return div用户邮箱{user.email}/div;
};2. 默认值与类型推断
interface ButtonProps {type?: primary | dashed; // 可选类型自动包含 undefinedsize?: large | medium;
}const MyButton ({ type primary, size medium }: ButtonProps) (button className{${type} ${size}}按钮/button
);三、Hooks 类型实战
1. useState 精确控制
const [user, setUser] useStateUser | null(null); // 联合类型处理异步数据// 明确数组项类型
const [todos, setTodos] useState{ id: string; text: string }[]([]);2. useRef 双重用法
// 操作 DOM
const inputRef useRefHTMLInputElement(null);useEffect(() {if (inputRef.current) {inputRef.current.focus(); // 需要非空校验}
});// 保存可变值
const timerRef useRefnumber();
timerRef.current setInterval(() {});3. useContext 类型安全
type Theme light | dark;
const ThemeContext createContextTheme(light);const App () (ThemeContext.Provider valuedarkChild //ThemeContext.Provider
);const Child () {const theme useContext(ThemeContext); // 自动推断为 Theme 类型return div className{theme}当前主题/div;
}四、事件处理与泛型组件
1. 表单事件精准捕获
const handleChange (e: React.ChangeEventHTMLInputElement) {console.log(e.target.value);
};input onChange{handleChange} /// 鼠标事件
const handleClick (e: React.MouseEventHTMLButtonElement) {e.preventDefault();const rect e.currentTarget.getBoundingClientRect(); // 正确访问 DOM 属性
};2. 让组件更灵活泛型组件
interface ListPropsT {data: T[];renderItem: (item: T) React.ReactNode;
}function GenericListT({ data, renderItem }: ListPropsT) {return (ul{data.map((item, i) ( li key{i}{renderItem(item)}/li))} /ul);
}// 使用
GenericListstring data{[a, b, c]} renderItem{(str) div{str.toUpperCase()}/div}
/五、常见类型问题速查
// 1. 类型断言谨慎使用
const element document.getElementById(root) as HTMLElement;// 2. 处理可能未初始化的 ref
const videoRef useRefHTMLVideoElement(null!); // 初始化后使用可使用非空断言// 3. 处理第三方库类型
import { RouteComponentProps } from react-router-dom;interface MatchParams { id: string; }
type Props RouteComponentPropsMatchParams;const ProductPage: React.FCProps ({ match }) (div商品ID{match.params.id}/div
);
