Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Getting started with TypeScript-generics

2025-03-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Network Security >

Share

Shulou(Shulou.com)06/01 Report--

Generics

To create a reusable component, the data types in it must be compatible with many types, so how to be compatible? TypeScript provides a good way: generics.

Hello World

To be compatible with multiple data formats, one may think of any, that is

Function identify (arg: any): any {return arg;}

There is a problem with using any. It is possible that the value passed in is not the same as the value returned, for example, pass in a number, but are not sure what value is returned

To solve this problem, we need to introduce a type variable-a special variable that is used only to represent a type but not a value

Function identity (arg: t): t {return arg;}

A type variable T is added to identify to capture the type of the input value, and then set the type of the return value to T, thus realizing the requirement that the input value and the return value are of the same type.

We call the function identify generic because it applies to all types and there is no problem with the any type.

There are two ways to use generics:

1. Pass in all parameters, including type parameters

Let output = identify ('qwe')

2. using type inference-that is, the compiler will automatically help us determine the type of T based on the passed parameters.

Let output = identify ('qwe'); generic variable

In generics, we should use the generic variable T reasonably and correctly, keeping in mind that T represents any type.

Misuse:

Function identify (arg: t): t {console.log (arg.length); / / Error: T doesn't have .length return arg;}

We use the length attribute in generics, but T represents any type, so it could be number, while number has no length attribute, so an error will be reported.

If we want to use the length property, we can create an array

Function identify (arg: t []): t [] {console.log (arg.length); / / Error: T doesn't have .length return arg;} generic type

The type of a generic function is no different from that of a non-generic function, except that there is a type parameter first, just like a function declaration:

Function identify (arg: t): t {return arg;} let myIdentify: (arg: U) = > U = identify

As you can see from the above code, different generic parameter names can also be used, as long as they correspond in quantity and usage.

Of course, you can also use generic parameters as parameters of an interface, so that you can know which type the interface is using.

Interface GenericIdnetify {(arg: t): t;} function identity (arg: t): t {return arg;} let myGenericidentify: GenericIdnetify = identity

Generic class

Generic classes look similar to generic interfaces. Generic classes use () to enclose generic types, followed by the class name.

Class GenericNumber {zeroValue: t; add: (x: t, y: t) = > T;} let myGenericNumber = new GenericNumber (); myGenericNumber.zeroValue = 0 GenericNumber.add = function (x, y) {return x + y;}

Generic constraint

A problem encountered in the previous generic variable is that when a parameter's length is called in a generic type, an error will be reported if the parameter does not have a Length attribute, and using a generic constraint means that the generic type can be used only if certain conditions are met.

To do this, we define an interface to describe the constraints. Create an interface that contains the .length attribute, and use this interface and the extends keyword to implement the constraint:

Interface lengthwise {length: number;} function identity (arg: t): t {console.log (arg.length); return arg;} identity (123); / / erroridentity ('qwe'); / / true

When 123 is passed and there is no length attribute, an error is reported, while the string qwe is exactly correct

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Network Security

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report