10 个关于 TypeScript 的小技巧-技术圈

英文 | https://www.sangle7.com/

1、 TypeScript 和 DOM

当你开始使用 TypeScript 时，你会发现在浏览器环境中使用它，你需要非常了解它。假设我想在页面搜索框里找到一个元素：


const textEl = document.querySelector('inpot');console.log(textEl.value);// ? Property 'value' does not exist on type 'Element'.

Oops…… 抛出了一个错误，因为我把 ‘input’ 打成了 ‘inpot’

它怎么知道的？答案在于 lib.dom.d.ts 文件，该文件是 TypeScript 库的一部分，并且基本上描述了浏览器中发生的所有事情（对象，函数，事件）。

该定义的一部分是在 querySelector 方法的输入中使用的接口，并将特定的字符串文字（例如’div’, ‘table’或’input’）映射到相应的 HTML 元素类型：


interface HTMLElementTagNameMap {  a: HTMLAnchorElement;  abbr: HTMLElement;  address: HTMLElement;  applet: HTMLAppletElement;  area: HTMLAreaElement;  article: HTMLElement;  /* ... */  input: HTMLInputElement;  /* ... */}

这不是一个完美的解决方案，因为它仅适用于基本元素选择器，但总比没有好，对吧？

这种’智能’TypeScript 行为的另一个示例是在处理浏览器事件时：


textEl.addEventListener('click', (e) => {  console.log(e.clientX);});

上面的示例中的.clientX 在任何给定事件上都不可用-仅在 MouseEvent 上可用。然后 TypeScript 根据作为 addEventListener 方法中第一个参数的“click”文字确定事件的类型。

2、期望泛型

因此，如果您使用其他任何东西而不是元素选择器：


document.querySelector（'input.action'）

那么 HTMLELementTagNameMap 将不再有用，TypeScript 只会返回一个相当基本的 Element 类型。

与 querySelector 一样，函数通常可以返回各种不同的结构，而 TypeScript 不可能确定将是哪种结构。在那种情况下，您可以非常期待，该函数也是通用的，并且可以使用方便的通用语法提供该返回类型：


textEl = document.querySelector < HTMLInputElement > 'input.action';console.log(textEl.value);// ? 'value' is available because we've instructed TS// about the type the 'querySelector' function works with.

3、“我们真的找到了吗？”

该 document.querySelector（…）方法实际上并不总是返回一个对象，是吗？与选择器匹配的元素可能不在页面上-函数将返回 null 而不是对象。因此，默认情况下，访问.value 属性可能不会保存所有内容。

默认情况下，类型检查器认为 null 和 undefined 可分配给任何类型。您可以通过在 tsconfig.json 中添加严格的 null 检查来使其更加安全并限制这种行为：


{  "compilerOptions": {    "strictNullChecks": true  }}

使用该设置后，如果您尝试访问可能为 null 的对象上的属性，TypeScript 将会报错，并且你将不得不确保该对象的存在，例如通过用 if（textEl）{...} 条件包装该部分。

除了 querySelector 之外，另一个流行的例子是 Array.find 方法，其结果可能是不确定的。

您并非总能找到想要的东西:-)

4、“TS，我告诉你，在这里！”

正如我们已经确定的那样，通过严格的 null 检查，TypeScript 将更加怀疑我们的价值观。另一方面，有时您仅从外部就知道将设置该值。在这种特殊情况下，您可以使用“后缀表达式运算符”：


const textEl = document.querySelector('input');console.log(textEl!.value);// ? with "!" we assure TypeScript// that 'textEl' is not null/undefined

5、当迁移到 TS…

通常，当您具有要迁移到 TypeScript 的旧版代码库时，更大的麻烦之一就是使 id 遵守您的 TSLint 规则。您可以做的是通过添加以下内容来编辑所有这些文件


// tslint:disable

在每个文件的第一行中，这样 TSLint 不会真正检查它们。然后，仅当开发人员处理旧文件时，他才会删除此注释并仅修复该文件中的所有掉毛错误。这样一来，我们就不会进行革命，而只会进行进化-代码库会逐渐但安全地得到改善。

至于将实际类型添加到旧的 JavaScript 代码中，实际上通常可以不这样做。只有在您有一些令人讨厌的代码（例如，为同一变量分配不同类型的值，您可能会遇到问题。如果重构不是一个小问题，您可以使用这个方法解决问题：


let mything = 2;mything = 'hi';// ? Type '"hi"' is not assignable to type 'number'mything = 'hi' as any;// ? if you say "any", TypeScript says ¯\_(ツ)_/¯

但是真的，真的，真的将其用作最后的手段。我们不喜欢TypeScript中的 any。

6、更多限制

有时TypeScript无法推断类型。最常见的情况是一个函数参数：


function fn(param) {    console.log(param);}

在内部，它需要在此处为param分配某种类型，因此它可以分配任何类型。由于我们希望将any限制为绝对最小值，因此通常建议使用另一个tsconfig.json设置来限制该行为：


{    "compilerOptions": {        "noImplicitAny": true    }}

不幸的是，我们不能在函数返回类型上使用这种安全带（需要明确输入）。因此，如果改为使用函数fn（param）：string {我会忘记该类型（函数fn（param）{），TypeScript将不会关注我返回的内容，即使我从该函数返回了任何内容。更准确地说：它将根据您退回或未退回的商品推断出退货价值。

幸运的是，TSLint可以为您提供帮助。使用typedef规则，您可以使返回类型成为必需：


{    "rules": {        "typedef": [            true,            "call-signature"        ]    }}

这看起来是个好主意！

7、类型保护

当值具有多种类型时，必须在算法中将其考虑在内，以区分一种类型与另一种类型。关于TypeScript的事情是它了解这种逻辑。


type BookId = number | string;function returnFormatterId(id: BookId) {    return id.toUpperCase();    // ? 'toUpperCase' does not exist on type 'number'.}function returnFormatterId(id: BookId) {    if (typeof id === 'string') {        // we've made sure it's a string:        return id.toUpperCase(); // so it's ?    }    // ? TS also understands that it    // has to be a number here:    return id.toFixed(2)}

8、再谈泛型

假设我们具有这种相当通用的结构：


interface Bookmark {    id: string;}class BookmarksService {    items: Bookmark[] = [];}

您想在不同的应用程序中使用它，例如用于存储书籍或电影。

在这样的应用程序中，您可以执行以下操作：


interface Movie {    id: string;    name: string;}class SearchPageComponent {    movie: Movie;    constructor(private bs: BookmarksService) {}    getFirstMovie() {        // ? types are not assignable        this.movie = this.bs.items[0];        // ? so you have to manually assert type:        this.movie = this.bs.items[0] as Movie;    }    getSecondMovie() {        this.movie = this.bs.items[1] as Movie;    }}

在该类中可能需要多次这种类型声明。

我们可以做的是将 BookmarksService 类定义为通用类：


class BookmarksService {    items: T[] = [];}

好吧，不过现在它太通用了……我们要确保此类使用的类型能够满足Bookmark接口（即具有id：string属性）。这是改进的声明：


class BookmarksService {    items: T[] = [];}

现在，在我们的SearchPageComponent中，我们只需指定一次类型：


class SearchPageComponent {    movie: Movie;    constructor(private bs: BookmarksService) {}    getFirstMovie() {        this.movie = this.bs.items[0]; // ?    }    getSecondMovie() {        this.movie = this.bs.items[1]; // ?    }}

对于该通用类，还有一项可能是有用的改进-如果您以这种通用身份在其他地方使用它，而又不想编写BookmarksService 的话。

您可以在泛型的定义中提供默认类型：


class BookmarksService {    items: T[] = [];}const bs = new BookmarksService();// I don't have to provide the type for the generic now// - in that case 'bs' will be of that default type 'Bookmark'

9、路由参数


export interface DashboardRouteParams {  countryId: string;  deviceId: string;}
const routes: Routes = [{  path: 'country/:countryId/device/:deviceId/dashboard'}]

10、根据 API 响应创建 Interface

如果您收到来自API的大量嵌套响应，那么手动键入相应的接口确实很麻烦。这是应该由机器处理的任务！?

有两种选择:

http://www.json2ts.com
http://www.jsontots.com

是其中的一些，但是坦率地说，它们的服务器通常不可用。由于URL的记忆力很强，我通常只是从它们开始：-)为了获得最佳结果和一些其他选项，请使用

https://app.quicktype.io/

它还提供了一个方便的Visual Studio Code插件~

- END -

分享前端好文，点亮 在看