9个提升TS编码能力的技巧【干货】🔥！

2022-12-07 116

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前言大家好，我是HoMeTown前段时间用TS做了一个线上标准的项目，也都提测了，最近可以抽时间来整理一下项目中用到的技术栈，（我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】。今天聊一聊TypeScript。

前言

大家好，我是HoMeTown

前段时间用TS做了一个线上标准的项目，也都提测了，最近可以抽时间来整理一下项目中用到的技术栈，（我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】。今天聊一聊TypeScript。

背景

因为是一个EPR系统，项目中包含了大量的计算与字段 & 秉持着操手前端最新技术栈的目标，果断选择了TypeScript，接下来，我就聊一下通过这个项目，我得到了哪些经验。

TypeScript

这个东西是什么，我就不过多阐述了，直接上干货！

构建一个类型的属性，书写类型要保持一致

举个🌰

// bad
type UppercaseRole = 'ADMIN' | 'User' | 'guest'
// good
type UppercaseRole = 'ADMIN' | 'USER' | 'GUEST'
type UppercaseRole = 'Admin' | 'User' | 'Guest'
type UppercaseRole = 'admin' | 'user' | 'guest'
复制代码

泛型

不要重复的创建类型，提升泛型的复用性，举个🌰

type Add<T> = (a: T, b: T) => T
const addNumbers: Add(number) = (a, b) => a + b
const addStrings: Add(string) = (a, b) => a + b
复制代码

在上述的🌰中，我们通过泛型，定义一个类型，传入不同的类型即可，不需要给每一个函数都写一个类型，节省精力，简化代码。

实用类型

Pick<Type, Keys>

Pick可以从现有的Type中挑选属性的集合 keys来创建一个新的类型，keys可以是一个字符串字面或者一个联合字符串。需要注意的是，Keys的值必须是Type的键。举个🌰

type UserInfo = {
    username: string;
    age: number;
    realname: string;
    email: string;
    phone: number;
    password: string;
}
// 使用Pick对你想提取的部分进行提取即可
type UserAccount = Pick<UserInfo, 'username' | 'password'>
复制代码

Omit<Type, Keys>

Omit与Pick相反，你传入的Keys变成了你想要去掉哪些属性。举个🌰

type UserInfo = {
    username: string;
    age: number;
    realname: string;
    email: string;
    phone: string;
    password: string;
}
// 使用Omit对你不想要的属性进行剔除
type UserDescInfo = Pick<UserInfo, 'username' | 'password'>
复制代码

Partial< Type>

Partial可以构造一个全都是可选属性的类型，具体的使用场景比如一些后端返回的无法具体确认的数据，举个栗子。

type OrderRowInfo = {
    orderId: number;
    orderCn: string;
    orderEn: string;
    orderDecs: string;
    remark: string;
}
type PartialOrderRowInfo = Partial<Type>
// 它其实返回之后就是 orderId?: number; orderCn: string; ...
复制代码

Required< Type>

Required与Partial相反，举个栗子

type PartialOrderInfo = {
    orderId: number;
    orderCn: string;
    orderEn?: string;
    orderDesc?: string;
    remark?: string;
}
type RequireOrderInfo = Required(PArtialOrderInfo)
复制代码

Readonly< Type>

你可以理解 Readonly是定义变量时的const，只不过他是定义类型的。举个🌰

type User = {
    username: string;
}
type ReadOnlyUser = ReadOnly<User>
const user: ReadOnlyUser = {
    username: 'HoMeTown'
}
user.username = 'handsome boy' 
// Cannot assign to 'username' because it is a read-only property
复制代码

操作符

可选链 ?.

可选链的出现让我感觉是真的太香了，终于不用再做 && 这种操作了，有时候我们会处理一些深层及的obj，光做非空 !undefiend的判断就得写一堆堆，有了?.，妈妈再也不用担心我写不好了。

举个🌰

type DeptMember {
    memberName: string;
}
type UserInfo = {
    username: string;
    dept: {
        deptname: string;
        deptMembers: DeptMember[]
    }
}
const res = await fetchGetUserInfo(userId)
// before bad
if(res && res.data && res.data.userInfo && res.data.userInfo.dept && res.data.userInfo.dept.deptMembers) {
 // do something...
}
// now good
if(res?.data?.userInfo?.dept?.deptMembers) {
    // do something
}
复制代码

空值合并 ??

当左侧操作数为 null 或 undefined 时，其返回右侧的操作数。否则返回左侧的操作数，与逻辑或|| 操作符不同，逻辑或会在左操作数为 falsy 值时返回右侧操作数。也就是说，如果你使用 || 来为某些变量设置默认的值时，你可能会遇到意料之外的行为。比如为 falsy 值（’’、NaN 或 0）时，举个🌰

// 使用 ??
const tem = 0 ?? '---'; 
console.log(tem); // 输出：0
// 使用 ||
const tem = 0 || '---';
console.log(tem); // 输出：'---'
复制代码

假设我们在一个table组件中有某些数字类型的值需要展示，用||的话如果API返回的是0，那就展示错了。

逻辑空赋值 ??=

其实就是在进行 ?? 操作后，进行一个赋值的动作

userInfo.age ??= 26
复制代码

这些就是我在开发的过程中比较常用到的，可能还有一点，以后想起来再补充。