🧗 👨‍👨‍👧‍👧 🤽 新的TypeScript功能可增强可用性 👩🏿‍🤝‍👨🏼 🙅🏻 🖖🏾

从许多方面来看，TypeScript不再像一种编程语言，而是一种用于整理和记录代码的强大工具，可帮助您编写更好的JavaScript程序。

TypeScript最显着的优势之一是它对ECMAScript规范中描述的一些最新功能的支持。当开发人员升级到新版本的TypeScript时，意味着他具有新的JavaScript功能。而且，使用这些功能并不意味着潜在的兼容性问题。 TypeScript除了引入了最新的JavaScript功能外，还值得注意的是，该语言的创建者不断向TS程序员社区展示旨在提高可用性的新内容。例如，这包括用于代码重构的辅助工具，用于实体重命名以及用于查找程序中使用它们的位置的工具。

我们今天发布的翻译材料将讨论TypeScript的一些有趣的新功能。有关TypeScript创新的完整列表，请在此处查看。

不可变的对象和数组

为了使在编译期间以普通变量和函数参数的形式使用不可变数组，在TypeScript中，可以使用辅助类型Readonly和ReadonlyArray。但是，它们的使用会在类型注释中引起异质感，尤其是[]在指定类型后使用字符声明数组时。TypeScript 3.4引入了一种标记只读数组参数的新方法。随即出现了一种新的声明变量的方法，该变量应该是不变的。

通过只读参数提高可用性

现在，当声明需要作为只读数组使用的函数的参数时，可以使用关键字readonly。在下面的示例中，两种方法的签名相同：

function foo(s: ReadonlyArray<string>) { /* ... */ }
 
function foo(s: readonly string[]) { /* ... */ }

在这两种情况下，任何尝试修改数组的尝试（例如，使用其方法push）都将导致错误。这项创新消除了对辅助泛型类型的需求，这意味着代码更易于阅读。对象类型也可以标记为只读实体，但它们仍需要一个helper类型Readonly。

使用as const构造提高不可变变量的可用性

使用关键字声明的变量的类型const不能更改。这个概念存在于JavaScript中。为了组织更严格的类型工作，TypeScript中也采用了它。但是，当使用对象数据类型（例如对象或数组）时，事实证明此类结构并不是真正不变的。使用关键字const意味着在使用常量时，对象或数组的特定实例将保持不变，但是可以轻松更改该对象或数组的内容。例如，在不违反使用const实体的规则的情况下，您可以使用方法将新值添加到数组中push，也可以更改对象属性的值。

使用Readonly和ReadonlyArray您可以告诉TypeScript系统应该将实体视为真正不可变的实体。这意味着每次在代码中尝试更改此类实体时，都会发出错误消息。

interface Person { 
  name: string; 
}
 
const person = { 
  name: 'Will' 
} as Readonly<Person>;
person.name = 'Diana'; // !

在TypeScript 3.4中，除其他创新外，出现了const断言（constant语句）的概念，该概念规定了构造的使用as const。这是用于声明包含不可变对象和数组的常量的简化方法。此类声明是通过as const在声明末尾添加常量来构建的。此方法还有一个优点，那就是使用它时，无需在statement中显式指定类型as const。

const person = { 
        name: 'Will' 
} as const;
 
person.name = 'Diana'; // !
 
//      as const
const array = [1, 2, 3] as const; 
array.push(4); // !

助手类型省略

TypeScript中有几种帮助程序类型，可以轻松地将现有类型映射到新的类型，或根据其他类型有条件地设置类型。

辅助类型Partial允许将对象的所有属性标记为可选。事实证明，在TypeScript 3.5发行之前，我一直在项目中使用一种有趣的机制。这与现在允许使用的辅助类型相同Omit。顾名思义，此类型允许您从其他类型中排除某些内容。Omit接受键的类型和组合，然后返回一个新的类型，从中排除键所描述的属性。我不得不将Pick其Exclude用于功能的独立实现的日子已经一去不复返了Omit。

//     TypeScript 3.5
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
interface A { 
    propA?: string; 
    propB?: string; 
    propC?: string; 
}
 
type B = Omit<A, 'propA' | 'propC'>; 
const b: B = { propA: 'hi' }; // ;

TypeScript支持的新JavaScript功能

当有关JavaScript新功能的建议到达协调的第4阶段时，它们将被视为该语言下一版本的一部分。的确，这并不意味着可以在JavaScript中立即使用这些功能，因为它们的支持应该在适当的环境中实现。该应用程序应该在应该正常运行的任何地方都可以使用这些机会。

定期向TypeScript编译器添加对新JavaScript功能的支持。通常，可将实现这些功能的代码转换为与支持支持中指定的项目构建目标的所有浏览器兼容的JavaScript代码tsconfig.json。

▍检查null和undefined

JavaScript开发人员熟悉真理和虚假的概念。当真相检查可识别6个值，它总是假的：0，null，undefined，«»，NaN，，当然，false。通常，开发人员只需要确定值是true还是false，但是在某些情况下，您只需要确定要调查的值是真实值null还是undefined。例如，如果有必要区分代码0和undefined：

//  ||     ,  index  0
const getValueOrOne = (x?: number) => index || 1; 
getValueOrOne(0); // 1 <--

该代码将通过设置x写入的值来工作index，在所有情况下（值index相等时除外）0。为了使此代码在任何情况下都能正常工作，需要使用更复杂的测试方案将其重写以找出真正的价值类型。

//   ,    
const getValueOrOne = (x?: number) => index !== null && index !== undefined ? : 1; 
getValueOrOne(0); // 0

现在，代码可以使用了，但是它需要使用更复杂的检查。用于检查on null和undefined（看起来像两个问号- ??）上的值的新运算符通过返回位于其左侧部分的值（如果它不等于null和）来简化这种检查undefined。否则，它将返回右侧的内容。

// !
const getValueOrOne = (x?: number) => index ?? 1; 
getValueOrOne(0); // 0
getValueOrOne(2); // 2
getValueOrOne(); // 1

▍可选顺序

TypeScript 3.7中另一个可用的JavaScript新功能是用于组织可选序列（?.）的运算符。我首先用Groovy编程语言遇到了这样的运算符。从那时起，我希望它也出现在JavaScript中。此运算符使您可以组织对对象的嵌入属性的访问，而无需不断检查它们的存在。如果在访问属性时此运算符遇到一个值undefined，则它将仅返回该值而不会引发error TypeError。

//    
const value = foo && foo.bar && foo.bar.baz;
 
//    
const value = foo?.bar?.baz;

可选的序列操作者与上检查的值的运算符组合null，并undefined给出了显影剂甚至更多的可能性，允许，例如，写入到可变任一所述物体的一些嵌套属性的值，或者，如果这样的属性不存在，一些标准值。看起来是这样的：

const value = foo?.bar?.baz ?? 'default value';

▍私人课

自从这种语言问世以来，TypeScript就具有使用access修饰符声明的私有类字段的概念private。这个概念甚至在ECMAScript标准中描述类之前就已经出现在TypeScript中。但是在TypeScript中，此概念是指在代码编译期间起作用的机制。如果不从类自己的方法访问类的私有字段，则编译器将引发错误。现在，在JavaScript中，有机会声明一个类的私有属性和方法。但是，此功能在语义和语法上都与TypeScript中仍然存在的功能不同。

JavaScript中的私有字段未使用access修饰符声明private。而是通过在名称的开头放置符号来声明它们#。

class Fan { 
    #on = false; 
    private name = 'fan';
 
    turnOn() { 
        this.#on = true; 
    }
   isTurnedOn() { 
        return this.#on; 
    }
}
 
const fan = new Fan(); 
fan.isTurnedOn(); // false  
fan.turnOn(); 
fan.isTurnedOn(); // true
 
fan.on; //  
fan.#on; // 
fan.name; //   ,    JS

JavaScript现在支持私有字段，私有方法的提议处于批准的第三阶段。当前，修饰符private和#字段名称中的字符不能一起使用。两种方法都可以在开发过程中派上用场，哪种方法取决于程序员。这是一个播客，讨论了声明私有字段的新语法。

code在代码顶层使用await关键字

异步编程机制极大地扩展了JavaScript和TypeScript的功能。最初，在这个领域出现了诺言，然后- async/await允许您编写更简洁的异步代码的设计。

不使用promise的情况之一async/await是异步函数外部的异步方法调用。例如，在模块或应用程序代码的顶层。作为这种情况下的解决方法，您可以建议创建一个立即调用的异步函数表达式（IIFE，即刻调用的函数表达式），并在该表达式内执行异步代码。

(async () => { 
    const response = await fetch('https://api.github.com/users/sitepen'); 
    const data = await response.json(); 
    console.log(`Check out the blog at ${data.blog}`); 
})();

TypeScript现在支持JavaScript await在代码的最高级别使用关键字的功能。这意味着await可以在用关键字声明的函数之外使用async。这非常擅长编写紧凑清晰的代码。的确，await代码顶层的表达式被批评是因为它们会减慢模块的加载速度，并导致某些模块会减慢整个应用程序的加载速度，因为系统必须等待异步操作完成，然后执行模块的所有代码。

const response = await fetch('https://api.github.com/users/sitepen'); 
const data = await response.json();
 
export default { ...data };

增强的TypeScript实验环境

这不能称为TypeScript的新功能，但是鉴于我们正在谈论TypeScript作为一种工具，因此可以将TypeScript Playground称为一种有效的工具，用于快速检查任何TypeScript构造并查看这些构造所转换为的JavaScript代码。这里的大多数示例都是在TypeScript Playground中经过专门测试的。现在，此环境支持选择特定版本的TypeScript的能力（包括对beta版本的支持）。它包括几个示例，可以帮助初学者入门TypeScript。

摘要

TypeScript是一个工具，可以帮助您编写更好，更具表现力的JavaScript代码。使用TypeScript帮助程序工具可以轻松解决复杂的任务，例如重构和重命名实体，而这在普通JavaScript中要复杂得多。TypeScript不断引入新的机制，例如Omit和as const。用这种语言，可以观察到对复杂类型的支持的不断改进。TypeScript快速实现了最新的JavaScript功能。这就是为什么许多人选择TypeScript并将其视为一种工具，语言和生态系统的原因。

亲爱的读者们！您发现最有趣的TypeScript新功能是什么？

新的TypeScript功能可增强可用性