20 个编写清晰高效的 TypeScript 代码的技巧

2023年 8月 1日 37.1k 0

编写干净、清晰且高效的 TypeScript 代码对于维护可扩展和可维护的代码库至关重要。

今天这篇文章将与您分享20个实用技巧的代码示例,以帮助您提高 TypeScript 开发技能并生成高质量的代码。

1.使用显式类型而不是“any”

尽可能避免使用 any 类型,因为它会破坏 TypeScript 的优势。相反,显式定义变量、函数和参数的类型。

这样做:

function add(a: number, b: number): number { return a + b;}

而不是这个:

function add(a: any, b: any): any { return a + b;}

2. 在 tsconfig.json 中启用“严格”模式

启用“严格”模式可确保 TypeScript 执行广泛的类型检查,从而在开发过程的早期捕获潜在的错误。

{ “compilerOptions”: { “strict”: true }}

3.使用只读数组

利用只读来防止对对象和数组的意外修改。

这样做:

const person: Readonly = { name: 
'Alice', age: 30 };person.age = 31; // Error: Cannot assign to 'age' because it 
is a read-only propertyconst numbers: ReadonlyArray = [1, 2, 
3];numbers.push(4); // Error: Property 'push' does not exist on type 'readonly 
number[]'

而不是这个:

const person = { name: 'Alice', age: 30 };person.age = 31; // Allowedconst 
numbers = [1, 2, 3];numbers.push(4); // Allowed

4. 使用解构来提取属性

解构可以使您的代码更简洁、更易于阅读。

这样做:

function printPersonDetails({ name, age }: { name: string; age: number }) { 
console.log(`Name: ${name}, Age: ${age}`);}

而不是这个:

function printPersonDetails(person: { name: string; age: number }) { 
console.log(`Name: ${person.name}, Age: ${person.age}`);}

5. 数组泛型优于类型转换

使用数组泛型来指定数组中元素的类型,而不是类型转换。

这样做:

const numbers: Array = [1, 2, 3];const firstNumber: number = 
numbers[0];

而不是这个:

const numbers: any[] = [1, 2, 3];const firstNumber: number = numbers[0] as 
number;

6. 使用枚举作为常量

使用枚举来表示一组相关常量,以提高代码的可读性和可维护性。

这样做:

enum Fruit { APPLE = 'apple', BANANA = 'banana', ORANGE = 'orange',}

而不是这个:

const FRUIT_APPLE = 'apple';const FRUIT_BANANA = 'banana';const FRUIT_ORANGE 
= 'orange';

7. 对于对象形状,优先选择接口而不是类型别名

在定义对象的形状时使用接口来利用其可扩展性。

这样做:

interface Person { name: string; age: number;}

而不是这个:

type Person = { name: string; age: number;};

8. 对可配置对象使用可选属性

在接口中使用可选属性可以在配置对象时实现灵活性。

👍这样做:

interface Person { name: string; age?: number;}

而不是这个:

interface Person { name: string; age?: number;}

9. 使用 TypeScript 的实用类型

利用 TypeScript 的内置实用程序类型(例如 Partial、Pick 和 Omit)来避免不必要的重复并简化代码。

interface Person { name: string; age: number; address: string;}type 
PartialPerson = Partial; // Makes all properties optionaltype PersonName 
= Pick; // Extracts a subset of propertiestype PersonWithoutAge 
= Omit; // Removes a property

10. 对多种可能的类型使用联合类型

使用联合类型指定一个变量可以保存多种类型的值。

这样做:

function formatInput(input: string | number) { return `Input: ${input}`;}

而不是这个:

function formatInput(input: string | number) { return `Input: ${input}`;}

11.利用交叉类型来组合类型

使用交集类型将多种类型合并为单一类型。

这样做:

interface Shape { color: string;}interface Circle { radius: number;}interface 
Rectangle { width: number; height: number;}type RedCircle = Shape & 
Circle;type RedRectangle = Shape & Rectangle;const redCircle: RedCircle = { 
color: 'red', radius: 5 };const redRectangle: RedRectangle = { color: 'red', 
width: 10, height: 20 };

而不是这个:

interface Employee { name: string; age: number;}interface Manager { teamSize: 
number;}type EmployeeManager = Employee & Manager;const employee: 
EmployeeManager = { name: 'John Doe', age: 30, teamSize: 5 };

12. 使用类型保护进行类型断言

使用类型保护来缩小条件块中变量的类型范围。

这样做:

function formatValue(value: string | number): string { if (typeof value === 
'number') { return value.toFixed(2); } else if (typeof value === 'string') { 
return value.toUpperCase(); } else { throw new Error('Invalid value'); }}

而不是这个:

function processValue(value: string | number): string { if (typeof value === 
'number') { return value.toFixed(2); } else { return value.toUpperCase(); }}

13.更喜欢函数式编程技术

利用函数式编程技术(例如不变性和纯函数)来提高代码清晰度并减少副作用。

这样做:

const sum = Array.from({ length: 10 }, (_, i) => i + 1).reduce((acc, val) 
=> acc + val, 0);

而不是这个:

let sum = 0;for (let i = 1; i

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论