5 个有用的 TypeScript 技巧

英文 | https://medium.com/@scotthickmann/5-helpful-shorthands-in-typescript-a38cfec6f6a7

TypeScript 最近已成为一种非常流行的编程语言。JavaScript 现在被用于各种各样的开发中。

随着越来越多的大型项目使用 JavaScript，许多人现在已经转而使用 TypeScript 编写代码，TypeScript 通过编译提供类型和向后兼容性。

在这篇文章中，我想强调几个我希望我在开始编写现代 JavaScript 和 TypeScript 代码时就知道的技巧。本文主要针对那些已经了解 TypeScript 并希望改进其编码风格的人。

前几点适用于 TypeScript 和现代 JavaScript，而后面的几点是特定于 TypeScript 的。话虽如此，让我们开始吧。

01、空合并运算符

如果想在变量为空或未定义的情况下恢复默认值，则可以使用空合并运算符。

const name: string | null = null;
const displayName = name ?? 'Anonymous';      

上面的代码会将 displayName 设置为“匿名”，因为 name 为空。另一种方法是使用条件运算符，它更冗长：

const displayName = name === null ? 'Anonymous' : name;      

02、Maps和Sets

需要时使用maps和sets！他们可以让你的生活更轻松。如果你需要检查一个项目是否包含在一个集合中，我们可以简单地编写：

const language = new Set(['hello', 'world']);
const hasHello = language.has('hello');      

这不仅比使用带有 .includes 的数组更简洁，而且更高效，也更易于审阅者理解。

03、泛型

尽可能避免使用 unknown 或 any as 类型。有一种更好的方法来处理可以采用多种类型的数据：泛型。例如，假设我需要使用一个将数据嵌套到响应对象中的函数。我可以执行以下操作并保持类型安全：

function createResponse<T extends Record<string, unknown>>(data: T) {
  return {
    success: true,
    data
  };
}      

根据需要，返回值将具有以下类型：

{
    success: boolean;
    data: T;
}      

04、在构造函数中分配实例属性

当我们编写一个类时，我们经常需要根据传递给构造函数的参数来设置属性。幸运的是，在 typescript 中有一种速记方法可以做到这一点。 

而不是这样做：

class User {
  public name: string;
  private age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}      

而是我们可以这样写：

class User {
  constructor(public name: string, private age: number) {}
}      

05、枚举

枚举肯定被低估了。之前，当我创建一个事件监听器时，我曾经这样做：

import EventEmitter from 'events';


const eventEmitter = new EventEmitter();


eventEmitter.on('user', (user) => {
  console.log(user);
})


eventEmitter.emit('user', { name: 'John', age: 30 });      

但是，如果你希望重命名你正在收听的事件，现在最好像下面那样做。 

如果你试图将事件名称“用户”更改为“帐户”，你可以放心，你的代码仍然可以工作，并且你不会忘记将更改复制粘贴到某处。

import EventEmitter from 'events';


enum EventName {
  User = 'user',
  Post = 'post'
}


const eventEmitter = new EventEmitter();


eventEmitter.on(EventName.User, (user) => {
  console.log(user);
});


eventEmitter.emit(EventName.User, { name: 'John', age: 30 });      

总结

以上就是我想跟大家分享的5个关于TypeScript 的开发小技巧，希望对你有用，感谢你的阅读，祝编程愉快！

学习更多技能

请点击下方公众号

​