百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

学习TypeScript的必备技巧:五个小窍门帮你快速掌握

toyiye 2024-07-09 22:44 11 浏览 0 评论

对于 TypeScript 开发人员来说,小的增强功能和辅助函数可以显着提高代码的可读性和可维护性。这篇博文致力于为您提供五个基本的 TypeScript 技巧和帮助函数,旨在轻松复制并粘贴到您的代码库中。让我们深入了解一下。

1. 使用 Nullish 合并运算符引发内联错误

很多时候,如果特定值为 null 或未定义,我们发现自己需要抛出错误。TypeScript 提供了一种使用空合并运算符 (??) 和一个简单的辅助函数来内联此过程的方法,而不是手动检查此过程。

const raise = (err: string) : never => { throw new Error(err);};

这个“raise”函数与 nullish 合并运算符结合使用,可以让您编写更具可读性和简洁性的代码。

const Page = (props: { params: { id?: string }}) => {
  const id = props.params.id ?? raise('No id provided');
};

向 TypeScript Wizard 本人Matt Pocock和@HeyImMapleLeaf (最初发布)表示感谢,感谢他们提供了这个令人惊叹的提示。

2. 使用映射类型

映射类型是一个强大的 TypeScript 功能,允许您基于现有类型创建新类型。它们可以帮助您保持类型干燥,减少重复并提高可维护性。

只读

映射类型的一个常见示例是Readonly<T>。这使得所有属性都是T只读的:

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

type ReadonlyUser = Readonly<IUser>;

现在, 的所有属性ReadonlyUser都是只读的。

部分的

另一个方便的映射类型是Partial<T>,它使所有属性都是T可选的:

type PartialUser = Partial<IUser>;

PartialUser是现在{ name?: string, age?: number }

记录

映射Record<K,T>类型可用于创建对象类型,其中属性键KT

type UserRecord = Record<string, IUser>;

UserRecord现在是一个对象类型,它将接受任何字符串作为键,并且任何值都必须是 类型IUser

创建您自己的映射类型

您不仅限于 TypeScript 提供的映射类型。您还可以创建自己的:

type Nullable<T> = { [P in keyof T]: T[P] | null };

Nullable<T>类型采用现有类型T,并生成一个新类型,其中每个属性都可为空。

映射类型可帮助您基于现有类型创建复杂类型,从而减少代码重复并增强类型安全性。

3. 类型保护

TypeScript 支持用户定义的类型保护,以缩小条件块内对象的类型范围。这是通过使用返回布尔值的函数来实现的,该布尔值指示对象是否属于特定类型。

function isString(test: any): test is string {
  return typeof test === "string";
}

function printLength(input: string | any[]) {
  if (isString(input)) {
    console.log(input.length);
  } else {
    console.log(input.length);
  }
}

在此示例中,isString是一个类型保护,确保input将其视为 if 块中的字符串。

4. 强类型事件发射器

在需要使用事件驱动架构的情况下,您可能需要使用事件发射器。JavaScript 内置事件发射器的缺点是它不是强类型的。但不用担心,TypeScript 可以拯救世界。

import { EventEmitter } from "events";

interface MyEvents {
  event1: (param1: string, param2: number) => void;
  event2: () => void;
}

class MyEventEmitter extends EventEmitter {
  public emit<T extends keyof MyEvents>(
    event: T,
    ...args: Parameters<MyEvents[T]>
  ) {
    return super.emit(event, ...args);
  }

  public on<T extends keyof MyEvents>(
    event: T,
    listener: MyEvents[T]
  ): this {
    return super.on(event, listener);
  }
}

const myEmitter = new MyEventEmitter();
myEmitter.on('event1', (param1, param2) => {
  // Type-safe parameters!
});

使用此代码,您可以享受完全类型安全的事件发射器!

5. 强制只读属性

TypeScript 具有readonly修饰符,可以轻松创建设置后无法更改的属性。这对于创建具有永远不应更改的属性的对象特别有用。

interface Config {
  readonly apiUrl: string;
  readonly defaultTimeout: number;
}

const config: Config = {
  apiUrl: "https://myapi.com",
  defaultTimeout: 5000,
};

config.apiUrl = "https://anotherapi.com"; // Error!

在此示例中,任何更改apiUrl或 的尝试defaultTimeout都会导致 TypeScript 错误。

这些只是 TypeScript 提供的用于增强开发过程的功能和技术的几个示例。有了这些提示和辅助函数,您的代码将变得更干净、更安全、更易于维护。

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码