清洁代码的 6 个高级 TypeScript 技巧

1 — 高级类型
TypeScript 中的高级类型（例如映射类型和条件类型）允许您基于现有类型创建新类型。这些类型可以帮助您以强大的方式转换和操作类型，从而提高代码的灵活性和可维护性。

映射类型
映射类型迭代现有类型的属性并应用转换来创建新类型。一个常见的用例是创建一个类型的只读版本。

type Readonly = {
readonly [P in keyof T]: T[P];
};

接口 点{
x :数字;
y：数字；
}

type ReadonlyPoint = Readonly ; _
在此示例中，我们定义了一个名为 的映射类型Readonly，它将一个类型T作为泛型参数并将其所有属性设置为只读。ReadonlyPoint然后我们基于接口创建一个类型Point，其中所有属性都是只读的。

条件类型
条件类型允许您根据条件创建新类型。语法类似于三元运算符，使用extends关键字作为类型约束。

类型 NonNullable = T extends null | 未定义？从不：T；
在此示例中，我们定义了一个名为 的条件类型NonNullable，它接受一个类型T并检查它是否扩展nullor undefined。如果是，则结果类型为never，否则为原始类型T。

让我们扩展高级类型示例以包含更多可用性和输出。

接口 点{
x :数字;
y：数字；
}

type ReadonlyPoint = Readonly ; _

const regularPoint : Point = {
x : 5 ,
y : 10
};

const readonlyPoint : ReadonlyPoint = {
x : 20 ,
y : 30
};

常规点。x = 15 ;// 这是因为 ‘x’ 在 ‘Point’ 界面
控制台中是可变的。日志（常规点）；// 输出：{ x: 15, y: 10 }

// readonlyPoint.x = 25; // 错误：无法分配给 ‘x’，因为它是只读属性
console。日志（只读点）；// 输出：{ x: 20, y: 30 }

function movePoint ( p: Point, dx: number , dy: number ): Point {
return { x : p. x + dx, y : p。y + dy };
}

常量movedRegularPoint = movePoint(regularPoint, 3 , 4 );
控制台。日志（movedRegularPoint）；// 输出：{ x: 18, y: 14 }

// const movedReadonlyPoint = movePoint(readonlyPoint, 3, 4); // 错误：“ReadonlyPoint”类型的参数不可分配给“Point”类型的参数
在此示例中，我们演示了映射类型的用法Readonly以及它如何强制执行不变性。我们创建一个可变Point对象和一个只读ReadonlyPoint对象。我们展示了尝试修改只读属性会导致编译时错误。我们还说明了只读类型不能用于预期可变类型的地方，以防止在我们的代码中产生意外的副作用。

2 — 装饰器
TypeScript 中的装饰器是一项强大的功能，允许您添加元数据、修改或扩展类、方法、属性和参数的行为。它们是高阶函数，可用于观察、修改或替换类定义、方法定义、访问器定义、属性定义或参数定义。

类装饰器
类装饰器应用于类的构造函数，可用于修改或扩展类定义。

函数 LogClass（目标：函数）{
控制台。日志（定义了类${target.name} 。` ）；
}

@LogClass
类 MyClass {
构造函数( ) {}
}
在此示例中，我们定义了一个名为 的类装饰器LogClass，它在定义时记录装饰类的名称。MyClass然后我们使用语法将装饰器应用于类@。

方法装饰器
方法装饰器应用于类的方法，可用于修改或扩展方法定义。

函数 LogMethod（目标：任意，键：字符串，描述符：PropertyDescriptor）{
控制台。日志（方法${key}被调用。）；
}

类 MyClass {
@LogMethod
myMethod ( ) {
控制台。日志（“在我的方法里面。”）；
}
}

const实例 = new MyClass ();
实例。我的方法（）；
在此示例中，我们定义了一个名为 的方法装饰器LogMethod，它会在调用时记录装饰方法的名称。然后我们使用语法将装饰器应用于类myMethod的方法。MyClass@

财产装饰者
属性装饰器应用于类的属性，可用于修改或扩展属性定义。

function DefaultValue ( value: any ) {
return ( target: any , key: string ) => {
target[key] = value;
};
}

class MyClass {
@DefaultValue ( 42 )
myProperty : number ;
}

const instance = new MyClass ();
控制台。日志（实例。myProperty）；// 输出：42
在这个例子中，我们定义了一个名为 的属性装饰器DefaultValue，它为被装饰的属性设置了一个默认值。然后我们使用语法将装饰器应用于类myProperty的属性。MyClass@

参数装饰器
参数装饰器应用于方法或构造函数的参数，可用于修改或扩展参数定义。

function LogParameter ( target: any , key: string , parameterIndex: number ) {
控制台。日志（调用了方法$key的索引${parameterIndex}处的参数。`）;
}

类 MyClass {
myMethod（@LogParameter值：数字）{
控制台。日志（在 myMethod 中，值为${value}。）；
}
}

常量实例 =新 我的类();
实例。我的方法（5）；
在这个例子中，我们定义了一个名为 的参数装饰器LogParameter，它在调用方法时记录装饰参数的索引和名称。然后我们使用语法将装饰器应用于类方法value的参数。myMethodMyClass@

3 — 命名空间
TypeScript 中的命名空间是一种组织和分组相关代码的方式。它们帮助您避免命名冲突，并通过封装属于一起的代码来促进模块化。命名空间可以包含类、接口、函数、变量和其他命名空间。

定义命名空间
要定义命名空间，请使用namespace关键字后跟命名空间名称。然后，您可以在花括号内添加任何相关代码。

namespace MyNamespace {
export class MyClass {
constructor ( public value: number ) {}

displayValue ( ) { 
  console . log ( `值为: ${ this .value} ` ); 
} } 

}
在这个例子中，我们定义了一个名称空间 calledMyNamespace并MyClass在其中添加了一个类。请注意，我们使用export关键字使类可以在命名空间之外访问。

使用命名空间
要使用命名空间中的代码，您可以使用完全限定名称或使用命名空间导入来导入代码。

// 使用完全限定名称
const instance1 = new MyNamespace . 我的班级（5）；
实例 1。显示值（）；// 输出：值为：5

// 使用命名空间 import
import MyClass = MyNamespace . 我的班级；

const instance2 = new MyClass ( 10 );
实例2。显示值（）；// 输出：值为：10
在此示例中，我们演示了两种使用命名空间MyClass中的类的方法MyNamespace。首先，我们使用完全限定名称MyNamespace.MyClass。其次，我们使用命名空间导入语句导入MyClass类并使用更短的名称。

嵌套命名空间
可以嵌套命名空间以创建层次结构并进一步组织您的代码。

namespace OuterNamespace {
export namespace InnerNamespace {
export class MyClass {
constructor ( public value: number ) {}

  displayValue ( ) { 
    console . log ( `值为: ${ this .value} ` ); 
  } 
} 

}
}

// 使用完全限定名称
const instance = new OuterNamespace . 内部命名空间。我的班级（15 );
实例。显示值（）；// 输出：值为：15
在这个例子中，我们定义了一个InnerNamespace在OuterNamespace. 然后，我们在嵌套命名空间中定义一个类MyClass，并将其与完全限定名称一起使用OuterNamespace.InnerNamespace.MyClass。

4 — 混合
TypeScript 中的混合是一种从多个较小的部分组成类的方法，称为混合类。它们允许您在不同类之间重用和共享行为，促进模块化和代码可重用性。

定义混合
要定义混合类，请创建一个类，该类使用构造函数签名扩展泛型类型参数。这允许 mixin 类与其他类组合。

class TimestampMixin < TBase extends new (… args : any []) => any >( Base : TBase ) {
constructor ( …args: any [] ) {
super (…args);
}

getTimestamp ( ) {
返回 新 日期();
}
}
在此示例中，我们定义了一个名为 mixin 的类，它TimestampMixin添加了一个getTimestamp返回当前日期和时间的方法。mixin 类TBase使用构造函数签名扩展泛型类型参数，以允许它与其他类组合。

使用混合
要使用 mixin 类，定义一个基类并使用关键字将 mixin 类应用于它extends。

类 MyBaseClass {
构造函数（公共值：数字）{}

displayValue（）{
控制台。log ( 值为: ${ this .value} );
}
}

class MyMixedClass extends TimestampMixin ( MyBaseClass ) {
constructor ( value: number ) {
super (value);
}
}
MyBaseClass在这个例子中，我们定义了一个用方法调用的基类displayValue。然后我们创建一个名为的新类MyMixedClass，它扩展基类并将TimestampMixin混合类应用于它。

让我们演示 mixin 类在实践中是如何工作的。

const instance = new MyMixedClass ( 42 );
实例。显示值（）；// 输出：值为：42
const timestamp = instance. 获取时间戳（）；
控制台。log ( 时间戳是：${timestamp} ); // 输出：时间戳为：[当前日期和时间]
在此示例中，我们创建了该类的一个实例MyMixedClass，其中包括displayValue来自 的方法MyBaseClass和getTimestamp来自TimestampMixinmixin 类的方法。然后我们调用这两种方法并显示它们的输出。

5 — 类型保护
TypeScript 中的类型保护是一种缩小特定代码块中变量或参数类型的方法。它们允许您区分不同的类型和访问特定于这些类型的属性或方法，从而促进类型安全并减少运行时错误的可能性。

定义类型保护
要定义类型保护，请创建一个接受变量或参数并返回类型谓词的函数。类型谓词是一个布尔表达式，用于缩小函数范围内参数的类型。

function isString ( value: any ): value is string {
return typeof value === “string” ;
}
在此示例中，我们定义了一个名为 type guard 的函数isString，用于检查给定值是否为 type string。该函数返回一个类型 predicate value is string，它缩小了value函数范围内参数的类型。

使用类型保护
要使用类型保护，只需在条件语句中调用类型保护函数，例如语句if或switch语句。

function processValue ( value: string | number ) {
if ( isString (value)) {
console . log ( 字符串的长度为：${value.length} );
}其他{
控制台。log ( 数字的平方是：${value * value} );
}
}
processValue在这个例子中，我们定义了一个名为 type 的函数string | number。我们使用isString类型保护函数来检查值是否为字符串。如果是，我们访问length特定于该string类型的属性。否则，我们假设该值为 anumber并计算其平方。

让我们演示类型保护在实践中是如何工作的。

过程值（“你好”）; // 输出：字符串的长度为：5
processValue ( 42 ); // 输出：数字的平方是：1764
在此示例中，我们processValue使用字符串和数字调用该函数。类型保护功能isString确保为每种类型执行适当的代码块，使我们能够访问特定于类型的属性和方法而不会出现任何类型错误。

6 — 实用程序类型
TypeScript 中的实用类型提供了一种将现有类型转换为新类型的便捷方式。它们允许您创建更复杂和灵活的类型，而无需从头开始定义它们，从而提高代码的可重用性和类型安全性。

使用实用程序类型
要使用实用程序类型，请使用尖括号语法将实用程序类型应用于现有类型。TypeScript 提供了多种内置实用程序类型，例如Partial、Readonly、Pick和Omit。

接口 人{
名称：字符串;
年龄：人数；
电子邮件：字符串；
}

类型 PartialPerson = Partial ; _
类型 ReadonlyPerson = Readonly < Person >;
输入 NameAndAge = Pick < Person , “name” | “年龄” >;
输入 WithoutEmail =省略< Person , “email”>;
在此示例中，我们定义了一个调用的接口，该接口Person具有三个属性：name、age和email。然后我们使用各种内置的实用程序类型来创建基于Person接口的新类型。

让我们演示实用程序类型在实践中是如何工作的。

部分的：

const partialPerson : PartialPerson = {
name : “John Doe” ,
};
在这个例子中，我们创建了一个partialPerson类型的对象PartialPerson。实用类型Partial使接口的所有属性Person都是可选的，允许我们创建一个只有一个name属性的部分人。

只读：

const readonlyPerson : ReadonlyPerson = {
name : “Jane Doe” ,
age : 30 ,
email : “jane@example.com” ,
};

// readonlyPerson.age = 31; // 错误：无法分配给 ‘age’ 因为它是只读属性
在这个例子中，我们创建了一个readonlyPerson类型的对象ReadonlyPerson。utilityReadonly类型让Person接口的所有属性都变成只读的，防止我们修改age属性。

挑选：

const nameAndAge : NameAndAge = {
name : “John Smith” ,
age : 25 ,
};

// 名字和年龄.email; // 错误：属性 ‘email’ 在类型 ‘Pick<Person, “name” 上不存在 | “年龄”>’
在这个例子中，我们创建了一个nameAndAge类型的对象NameAndAge。实用程序类型Pick创建一个新类型，该类型仅具有接口的指定属性Person，在本例中name为 和age。

忽略：

const withoutEmail : WithoutEmail = {
name : “Jane Smith” ,
age : 28 ,
};

// withoutEmail.email; // 错误：‘Omit<Person, “email”>’ 类型不存在属性 ‘email’
在这个例子中，我们创建了一个withoutEmail类型的对象WithoutEmail。实用程序Omit类型通过从接口中删除指定的属性来创建新类型Person，在本例中为email.

总之，本文探讨了各种高级 TypeScript 主题，例如命名空间、高级类型、装饰器、混合、类型保护和实用程序类型。通过理解和利用这些特性，您可以创建更加模块化、可重用和可维护的代码，这些代码遵循最佳实践并减少运行时错误的可能性。

通过利用这些高级 TypeScript 功能，您可以编写更清晰、更有条理且可维护的代码，从而充分利用 TypeScript 强大的类型系统和语言功能。