每个 Angular 开发人员都需要知道的 TypeScript 功能

BigInt

数字分隔符 _

私有字段

运算符

如果您是 Angular 开发人员，如果您没有使用高级 TypeScript 功能来帮助您构建更好的代码，那么您就错过了。

而且这一切都是值得的：TypeScript 有一些很棒的功能，可以让你成为更强大的 Angular 开发人员。💪

BigInt

BigInt 允许您表示大于²⁵³的数字。当您需要对非常大的整数执行数学运算时，这非常有用。并且您可以直接使用大整数 ID 和高精度时间戳。

您可以bigint通过两种方式创建原始内容：

const n0 = 1n;
const n1 = new BigInt(1);

bigint和原语之间没有互操作性number，但可以进行比较。

注意：BigInt 支持仅适用于esnext目标。

数字分隔符 _

数字分隔符非常有助于提高可读性。它们不会改变实际数值的解释方式。

 // which one is more readable?
const someNumber = 1782540173;
const anotherNumber = 1_782_540_173;
console.log(someNumber === anotherNumber); // true

请记住，数字不能以分隔符开头或结尾。此外，也不能连续使用两个分隔符。

私有字段

TypeScript 有一个private关键字，在转译为 JavaScript 时会被删除。如果您在运行时需要私有属性，JavaScript 的私有字段可以帮您解决。与 TypeScript 的 private 关键字不同，私有字段以 # 字符开头，即使在运行时也是私有的。

如果您在运行时需要私有属性，那么现在这就是在现代 JavaScript 中实现它的方法。

注意：如果您的目标至少是 ECMAScript 2015（ES6），TypeScript 将优雅地为旧版浏览器实现此功能。

class Person {
 #age = 30;
 constructor(public name: string) {}
}
const someone = new Person('John');
console.log(someone.#age); // Property '#age' is not accessible outside class 'Person' because it has a private identifier.
console.log(someone['#age']); // Property '#age' does not exist on type 'Person'

运算符

空值合并？？

===在 JavaScript 中，nullish 指的是严格等于（ ）null或 的值undefined。

当我们想要一个默认值时，JavaScript 中常用的一个模式是使用 OR 运算符||。

function timeout(callback: Function, milliseconds: number): void {
 const wait = milliseconds || 100;
 setTimeout(callback, wait);
}

以这种方式使用 OR 运算符可能会导致问题。由于我们在上面的示例中处理的是数字，因此 的值0将是有效值milliseconds。
然而，0是假值，因此默认值100将被赋给wait。

区分虚假值（false、0、空字符串“”和null/undefined）和空值（null/undefined）非常重要。空值是虚假值的子集。

空值合并运算符是指当第一个操作数为空时，返回默认值（第二个操作数）的运算符。如果第一个操作数不为空，则返回其值。

听起来很复杂，但这是一个简单的例子。

考虑a ?? b：

• a如果a不同于null并且则返回undefined
• 将返回b如果a等于null或undefined

let coffee: boolean | null | undefined;
const awaken = coffee ?? false;

awaken将被分配以下coffee之一false：

• 如果coffee不为空，awaken则将被分配coffee
• 如果coffee为空，则将分配 awakenfalse

可选链式调用?

您曾经见过（或写过）这样的代码吗？

if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) {
 // do something
}

可选链改变了对象、属性和方法的访问方式。如果它们为空，它不会抛出错误，而是短路并返回undefined。可选链也使你的代码更具可读性。

我们可以用可选链重写上面的代码：

if (obj?.prop1?.prop2?.prop3) {
 // do something
}

非空断言!

有时，TypeScript 无法识别某些操作数是否为空。!在这种情况下，非空断言运算符就派上用场了。当你想告诉 TypeScript 在代码中的特定位置，操作数绝对不为空且非 undefined 时，你可能会使用它。

// imagine you have a state that represents an API response
interface State {
 status: 'pending' | 'complete';
 response: string | undefined;
};
let state: State = {
 status: 'complete',
 response: 'some text',
}
// we know that when status is 'complete' we must have a response
if (state.status === 'complete') {
 console.log(state.response.length); // Object is possibly 'undefined'.
 console.log(state.response!.length) // this works
}

查看Jennifer Wadella的这篇文章，了解有关 Angular 中的非空断言运算符的更多信息。

指数运算**

在 2 **3 中，将第一个操作数提升2为第二个操作数的幂3，相当于 2 ³。

与 Math.pow() 相反，指数运算符**适用于新的 BigInt 值。

console.log(2 ** 3);
console.log(Math.pow(2, 3)); // the old way

赋值运算符**=, &&=, ||=,??=

赋值运算符是常见赋值运算的简写。例如，a += 1相当于a = a + 1。

赋值运算符将运算符应用于两个参数，然后将结果赋值给左操作数。

此外，&&=，运算符将短路，这意味着如果运算结果为假，则不会发生赋值||=。??=

a = a ** b; // a **= b, exponentiation
a = a && (a = b); // a &&= b, logical AND
a = a || (a = b); // a ||= b, logical OR
a = a ?? (a = b); // a ??= b, nullish coalescing
// a &&= b, also equivalent to:
if (a) {
 a = b;
}
// a ||= b, also equivalent to:
if (!a) {
 a = b;
}
// a ??= b, also equivalent to:
if (a === null || a === undefined) {
 a = b;
}

这些 TypeScript 技术可以帮助您处理空值、提高代码可读性、操作更大的整数等等。希望这些 TypeScript 功能能够帮助您编写 Angular 代码！

要了解有关 Angular 和 TypeScript 的更多信息，请查看Bitovi Academy。

最初发表于Bitovi 博客