什么是TS呢它的大概作用是什么TS 带类型的 JSTS JS 的 “安全检查官 自动提示器”。在 React 里TS 就是给组件、Props、Hooks、状态加类型防止写错、防止乱传值JS 写法不安全function sum(a, b) { return a b } sum(10, 20) // 返回 1020 // 你代码跑起来才发现错了TS 写法安全function sum(a: number, b: number) { return a b } sum(10, 20) // 直接报错 // 还没运行编辑器就告诉你不能传字符串TS 的作用提前发现错误不让烂代码跑起来。为什么 React 开发极其需要 TS1、痛点一组件地狱Props 盲盒JS 时代你看到同事写了一个组件UserProfile组件使用它需要传参。 UserProfile data{user} /。你想复用它但你不知道 data 里面究竟需要传什么是传 id还是传 name你只能被迫点进组件源码一行行看逻辑。TS 时代组件会定义一个“合同”Interface / Type。codeTypeScriptinterface UserProps { name: string; age: number; isVIP?: boolean; // 加个问号代表可选 }你只要把鼠标悬停在 UserProfile / 上编辑器会秒弹提示智能补全清楚地告诉你需要传什么参数。少传了、类型传错了直接标红报错提醒2、痛点二重构时的心惊胆战JS 时代老板说“把用户数据的 username 字段全部改成 nickname”。你在全局搜索替换极大概率会漏改某个隐蔽的组件导致线上 P0 级事故。TS 时代你只需要把 TS 接口里的 username 改成 nickname全项目所有用到这个变量的地方会瞬间全部爆红。你只需要像打地鼠一样把红色的地方全改掉就能100% 保证重构绝对安全。3、痛点三彻底消灭低级拼写错误在 React 中写事件监听时以前经常因为拼错 event.target.value 里的某个字母找半天 Bug。用了 TS 标注 e: React.ChangeEventHTMLInputElement 后敲下 e. 的瞬间所有可用的属性都会弹出来让你选根本不可能拼错。你只需要加一个类型标注function handleChange(e: React.ChangeEventHTMLInputElement) { // 当你敲下 e. }奇迹发生了编辑器立刻弹出所有合法属性targetcurrentTargetpreventDefaultstopPropagation…… 几十条interface接口和 type类型别名有什么区别你在开发中是怎么选择的相同点都可以用来定义对象或函数的形状都支持继承扩展。不同点核心考点扩展方式不同interface 用 extends 继承type 用 交叉类型来合并。适用范围不同type 更强大因为它可以 1. 定义【基本类型别名】如 type UserId number 2. 定义【联合类型】如 type ID string | number 3. 定义【元组】如 type Point [number, number] 而 interface 只能定义对象结构不能做上面三件事。声明合并Declaration Merging如果你写了两个同名的 interfaceTS 会自动把它们合并成一个但如果你写两个同名的 type直接报错。“在实际 React 开发中我的原则是定义组件的 Props 和 State或者定义对外暴露的 API 结构时优先使用 interface因为它的报错提示更清晰且利于扩展当需要使用联合类型A | B、交叉类型A B或者写复杂的类型体操提取函数返回值等时只能使用 type。泛型Generics是什么泛型相当于是函数组件类型的“形参”就像函数可以接受变量作为参数一样泛型接受的是“类型”作为参数通常用大写字母T表示type泛型的 T —— 传类型// T 是类型形参先不定义具体类型使用时再传 interface ListPropsT { data: T[] renderItem: (item: T) ... }T占位用使用时才传具体类型使用时传什么类型组件里就是什么类型ListUser ... / // 这里就像给 T 传了个实参User 类型
关于TS的一些见解
什么是TS呢它的大概作用是什么TS 带类型的 JSTS JS 的 “安全检查官 自动提示器”。在 React 里TS 就是给组件、Props、Hooks、状态加类型防止写错、防止乱传值JS 写法不安全function sum(a, b) { return a b } sum(10, 20) // 返回 1020 // 你代码跑起来才发现错了TS 写法安全function sum(a: number, b: number) { return a b } sum(10, 20) // 直接报错 // 还没运行编辑器就告诉你不能传字符串TS 的作用提前发现错误不让烂代码跑起来。为什么 React 开发极其需要 TS1、痛点一组件地狱Props 盲盒JS 时代你看到同事写了一个组件UserProfile组件使用它需要传参。 UserProfile data{user} /。你想复用它但你不知道 data 里面究竟需要传什么是传 id还是传 name你只能被迫点进组件源码一行行看逻辑。TS 时代组件会定义一个“合同”Interface / Type。codeTypeScriptinterface UserProps { name: string; age: number; isVIP?: boolean; // 加个问号代表可选 }你只要把鼠标悬停在 UserProfile / 上编辑器会秒弹提示智能补全清楚地告诉你需要传什么参数。少传了、类型传错了直接标红报错提醒2、痛点二重构时的心惊胆战JS 时代老板说“把用户数据的 username 字段全部改成 nickname”。你在全局搜索替换极大概率会漏改某个隐蔽的组件导致线上 P0 级事故。TS 时代你只需要把 TS 接口里的 username 改成 nickname全项目所有用到这个变量的地方会瞬间全部爆红。你只需要像打地鼠一样把红色的地方全改掉就能100% 保证重构绝对安全。3、痛点三彻底消灭低级拼写错误在 React 中写事件监听时以前经常因为拼错 event.target.value 里的某个字母找半天 Bug。用了 TS 标注 e: React.ChangeEventHTMLInputElement 后敲下 e. 的瞬间所有可用的属性都会弹出来让你选根本不可能拼错。你只需要加一个类型标注function handleChange(e: React.ChangeEventHTMLInputElement) { // 当你敲下 e. }奇迹发生了编辑器立刻弹出所有合法属性targetcurrentTargetpreventDefaultstopPropagation…… 几十条interface接口和 type类型别名有什么区别你在开发中是怎么选择的相同点都可以用来定义对象或函数的形状都支持继承扩展。不同点核心考点扩展方式不同interface 用 extends 继承type 用 交叉类型来合并。适用范围不同type 更强大因为它可以 1. 定义【基本类型别名】如 type UserId number 2. 定义【联合类型】如 type ID string | number 3. 定义【元组】如 type Point [number, number] 而 interface 只能定义对象结构不能做上面三件事。声明合并Declaration Merging如果你写了两个同名的 interfaceTS 会自动把它们合并成一个但如果你写两个同名的 type直接报错。“在实际 React 开发中我的原则是定义组件的 Props 和 State或者定义对外暴露的 API 结构时优先使用 interface因为它的报错提示更清晰且利于扩展当需要使用联合类型A | B、交叉类型A B或者写复杂的类型体操提取函数返回值等时只能使用 type。泛型Generics是什么泛型相当于是函数组件类型的“形参”就像函数可以接受变量作为参数一样泛型接受的是“类型”作为参数通常用大写字母T表示type泛型的 T —— 传类型// T 是类型形参先不定义具体类型使用时再传 interface ListPropsT { data: T[] renderItem: (item: T) ... }T占位用使用时才传具体类型使用时传什么类型组件里就是什么类型ListUser ... / // 这里就像给 T 传了个实参User 类型
