优雅使用ts,解放双手

1. 善用类型推断,减少手动定义

TS 的类型推断能力很强,很多时候无需显式声明:

TypeScript 复制代码
// 无需写 let age: number

let age = 28;

// 函数返回值可自动推断

function add(a: number, b: number) {

return a + b; // 自动推断返回number

}

2. 合理组织类型文件

将类型定义与业务代码分离,例如:

TypeScript 复制代码
src/

types/ // 集中存放类型定义

user.ts

order.ts

components/ // 业务组件

utils/ // 工具函数

3.避免过度类型化

无需为每个变量都定义类型,优先用推断:

TypeScript 复制代码
// 不必写成 const list: number[] = [1,2,3]

const list = [1, 2, 3];

4.利用工具简化类型工作

  • 使用typeof提取已有变量类型:
TypeScript 复制代码
const defaultUser = { name: "admin", age: 30 };

type User = typeof defaultUser; // 自动获得 { name: string; age: number }
  • 用Partial、Pick等工具类型减少重复定义:
TypeScript 复制代码
interface User { id: number; name: string; age: number }

type UserWithoutId = Pick<User, "name" | "age">; // 提取部分属性

5.巧用类型守卫简化分支逻辑

当处理联合类型时,自定义类型守卫可以替代冗长的typeof或instanceof判断,让类型判断更直观:

TypeScript 复制代码
// 定义联合类型

type Admin = { role: 'admin'; permissions: string[] };

type User = { role: 'user'; name: string };

type Person = Admin | User;

// 自定义类型守卫

function isAdmin(person: Person): person is Admin {

return person.role === 'admin';

}

// 使用时自动缩小类型范围

function handlePerson(person: Person) {

if (isAdmin(person)) {

// TS自动推断为Admin类型,可直接访问permissions

console.log(person.permissions);

} else {

// 自动推断为User类型

console.log(person.name);

}

}

非空断言与可选链减少冗余判断

合理使用!(非空断言)和?.(可选链),替代繁琐的if (xxx)判断:

TypeScript 复制代码
interface Data {

user?: {

name?: string;

};

}

const data: Data = {};

// 传统写法:多层判断

if (data.user && data.user.name) {

console.log(data.user.name);

}

// 优雅写法:可选链 + 非空断言(确保存在时使用)

console.log(data.user?.name); // 安全访问,不存在时返回undefined
相关推荐
咩咩啃树皮15 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构
java·前端·架构
阳光是sunny15 小时前
LangGraph中的Reducer是什么
前端·人工智能·后端
触底反弹15 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
阳光是sunny15 小时前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
小林ixn16 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker16 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
এ慕ོ冬℘゜16 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
武子康17 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端
一点一木17 小时前
从60首歌到1个网站:输入你的故事,还你一首歌
前端·github
IT_陈寒18 小时前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端