LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

20 个 TypeScript 技巧改变你的代码!

admin
2024年11月13日 19:35 本文热度 417

TypeScript 以类型安全及强大特性强化了 JavaScript,然而众多开发者仅运用其基础功能。在此为您呈现一份涵盖 20 个高级 TypeScript 技巧的指南,这些技巧有助于提升生产力、代码可维护性,利于提高代码效率与可读性。每个技巧均佐以实用代码示例加以阐释。

1. NonNullable:剔除 null 与 undefined 类型

type User = { name: string; age?: number | null };
const userAge: NonNullable<User['age']> = 30// No null or undefinedÏ

2. Partial:使所有属性变为可选属性

interface User {
  name: string;
  age: number;
  email: string;
}
const updateUser = (user: Partial<User>) => ({ ...user, updatedAt: new Date() });
updateUser({ name: 'John' });

3. Readonly:强制实现只读属性

const config: Readonly<{ apiUrl: string; retries: number }> = {
  apiUrl: 'https://api.com',
  retries: 5,
};
config.apiUrl = 'https://newapi.com'// Error

4. Mapped Types:动态地转换现有类型

type Status = 'loading' | 'success' | 'error';
type ApiResponse<T> = { [K in Status]: T };
const response: ApiResponse<string> = { loading: 'Loading...', success: 'Done', error: 'Error' };

5. Optional Tuple Elements:使用变形 tuple 类型。

type UserTuple = [stringnumber?, boolean?];
const user1: UserTuple = ['Rob']; // Only name

6. Union Exhaustiveness:确保所有情况都被处理

type Status = 'open' | 'closed' | 'pending';
function handleStatus(status: Status{
  switch (status) {
    case 'open':
      return 'Opened';
    case 'closed':
      return 'Closed';
    case 'pending':
      return 'Pending';
    default:
      const exhaustiveCheck: never = status;
      return exhaustiveCheck;
  }
}

7. Omit:从类型中移除属性

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
type TodoPreview = Omit<Todo, 'description'>;
const todo: TodoPreview = { title: 'Learn TypeScript', completed: false };

8. Type Narrowing:使用 in 和 instanceof 来缩小类型

function processInput(input: string | number | { title: string }{
  if (typeof input === 'string'return input.toUpperCase();
  if ('title' in input) return input.title.toUpperCase();
}

9. Conditional Types:应用条件逻辑

type IsString<T> = T extends string ? true : false;
type CheckString = IsString<'Hello'>; // true

10. 使用 as const 创建字面类型

const COLORS = ['red''green''blue'as const;
type Color = (typeof COLORS)[number]; // 'red' | 'green' | 'blue'

11. Extract and Exclude:过滤联合类型

type T = 'a' | 'b' | 'c';
type OnlyAOrB = Extract<T, 'a' | 'b'>; // 'a' | 'b'

12. 自定义类型守卫

function isString(input: any): input is string {
  return typeof input === 'string';
}

13. Record:动态对象类型

type Role = 'admin' | 'user' | 'guest';
const permissions: Record<Role, string[]> = { admin: ['write'], user: ['read'], guest: ['view'] };

14. Index Signatures:添加动态属性

class DynamicObject {
  [key: string]: any;
}
const obj = new DynamicObject();
obj.name = 'Rob';

15. Never Type:用于详尽的检查

function assertNever(value: never): never {
  throw new Error(`Unexpected: ${value}`);
}

16. Optional Chaining:使用可选链

const user = { profile: { name: 'John' } };
const userName = user?.profile?.name; // 'John'

17. Null 合并操作符

const input: string | null = null;
const defaultValue = input ?? 'Default'// 'Default'

18. ReturnType:推导函数返回类型。

function getUser() {
  return { name: 'John', age: 30 };
}
type UserReturn = ReturnType<typeof getUser>;

19. Generics:可变函数类型。

function identity<T>(value: T): T {
  return value;
}
identity<string>('Hello'); // 'Hello'

20. Intersection Types:组合多个类型。

type Admin = { privileges: string[] };
type User = { name: string };
type AdminUser = Admin & User;

总结

这些技巧中的每一个都突出了编写更简洁、更可靠的 TypeScript 代码的方法。使用这些技巧,你可以充分利用 TypeScript 的完整类型系统,实现更安全、更易于维护的开发。


该文章在 2024/11/14 11:38:35 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved