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

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

toyiye 2024-06-21 12:26 8 浏览 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 提供的用于增强开发过程的功能和技术的几个示例。有了这些提示和辅助函数,您的代码将变得更干净、更安全、更易于维护。

相关推荐

Python 可视化工具包(python常见的可视化工具)

喜欢用Python做项目的小伙伴不免会遇到这种情况:做图表时,用哪种好看又实用的可视化工具包呢?本文将介绍一些常用的Python可视化包,包括这些包的优缺点以及分别适用于什么样的场景。这篇文章...

Python的GPU编程实例——近邻表计算

目录技术背景...

python算法体验-3.python实现欧式距离的三种方式

欧式距离也称欧几里得距离,是最常见的距离度量,衡量的是多维空间中两个点之间的绝对距离。欧式距离源自N维欧氏空间中两点...

python实现Lasso回归分析(特征筛选、建模预测)

实现功能:...

python语言检测模块langid、langdetect使用

本文首发地址:https://blog.csdn.net/Together_CZ/article/details/86678423欢迎关注我的博客【Together_CZ】,我是沂水寒城!之前使用数据...

7天学会Python最佳可视化工具Seaborn(一):可视化变量间的关系

众所周知,Seaborn“可能”是Python下最友好、易用的可视化工具了,可视化效果也非常好。但是截止目前,并没有一份中文教程供广大国内Python使用者查阅学习。怎么能因为语言的问题,让大家错过这...

在Python中使用K-Means聚类和PCA主成分分析进行图像压缩

各位读者好,在这篇文章中我们尝试使用sklearn库比较k-means聚类算法和主成分分析(PCA)在图像压缩上的实现和结果。压缩图像的效果通过占用的减少比例以及和原始图像的差异大小来评估。图像压...

OpenCV-Python 相机校准 | 四十九

目标在本节中,我们将学习由相机引起的失真类型,如何找到相机的固有和非固有特性如何根据这些特性使图像不失真基础一些针孔相机会给图像带来明显的失真。两种主要的变形是径向变形和切向变形。径向变形会导致直线出...

python数据预处理技术(python 数据预处理)

在真实世界中,经常需要处理大量的原始数据,这些原始数据是机器学习算法无法理解的。为了让机器学习算法理解原始数据,需要对数据进行预处理。我们运行anaconda集成环境下的“jupyternotebo...

【Python可视化系列】一文教你绘制不同类型散点图(理论+源码)

这是...

OpenCV-Python 特征匹配 | 四十四

目标在本章中,我们将看到如何将一个图像中的特征与其他图像进行匹配。我们将在OpenCV中使用Brute-Force匹配器和FLANN匹配器Brute-Force匹配器的基础蛮力匹配器很简单。它使用第一...

实战python中Random模块使用(python中的random模块)

一、random模块简介Python标准库中的random函数,可以生成随机浮点数、整数、字符串,甚至帮助你随机选择列表序列中的一个元素,打乱一组数据等。要在Python中使用random模块,只需要...

Python随机模块22个函数详解(python随机函数的应用)

随机数可以用于数学,游戏,安全等领域中,还经常被嵌入到算法中,用以提高算法效率,并提高程序的安全性。平时数据分析各种分布的数据构造也会用到。random模块,用于生成伪随机数,之所以称之为伪随机数,是...

说冲A就冲A,这个宝藏男孩冯俊杰我pick了

爱奇艺新上架了一部网剧叫《最后一个女神》。有个惊人的发现,剧里男三居然是《青春有你》的训练生冯俊杰。剧组穷,戏服没几件,冯俊杰几乎靠一件背背佳撑起了整部剧。冯俊杰快速了解一下。四川人,来自觉醒东方,人...

唐山打人嫌犯陈继志去医院就医的背后,隐藏着三个精心设计的步骤

种种迹象表明,陈继志这帮人对处理打人之后的善后工作是轻车驾熟的,他们想实施的计划应该是这样的:首先第一步与伤者进同一家医院做伤情鉴定,鉴定级别最好要比对方严重,于是两位女伤者被鉴定为轻伤,他们就要求医...

取消回复欢迎 发表评论:

请填写验证码