Avancerede TypeScript-typer Cheat Sheet (med eksempler)

TypeScript er et indtastet sprog, der giver dig mulighed for at specificere typen af ​​variabler, funktionsparametre, returnerede værdier og objektegenskaber.

Her er et avanceret TypeScript-typer snydeark med eksempler.

Lad os dykke ind.

  • Krydsningstyper
  • Unionstyper
  • Generiske typer
  • Hjælpeprogrammer
  • Delvis
  • Påkrævet
  • Læs kun
  • Plukke
  • Udelade
  • Uddrag
  • Udelukke
  • Optage
  • Kan ikke ophæves
  • Kortlagte typer
  • Skriv vagter
  • Betingede typer

Krydsningstyper

En krydsningstype er en måde at kombinere flere typer til en. Dette betyder, at du kan flette en given type A med en type B eller mere og få tilbage en enkelt type med alle egenskaber.

type LeftType = { id: number left: string } type RightType = { id: number right: string } type IntersectionType = LeftType & RightType function showType(args: IntersectionType) { console.log(args) } showType({ id: 1, left: "test", right: "test" }) // Output: {id: 1, left: "test", right: "test"} 

Som du kan se, IntersectionTypekombinerer to typer - LeftTypeog RightTypeog bruger &tegn til at konstruere skæringspunktet type.

Unionstyper

Unionstyper giver dig mulighed for at have forskellige typer annoteringer inden for en given variabel.

type UnionType = string | number function showType(arg: UnionType) { console.log(arg) } showType("test") // Output: test showType(7) // Output: 7 

Funktionen showTypeer en unionstype, der accepterer både strenge og tal som parameter.

Generiske typer

En generisk type er en måde at genbruge en del af en given type på. Det hjælper med at fange den type, der er Tsendt ind som parameter.

function showType(args: T) { console.log(args) } showType("test") // Output: "test" showType(1) // Output: 1 

For at konstruere en generisk type skal du bruge parenteser og videregive Tsom parameter.

Her bruger jeg T(navnet er op til dig) og kalder derefter funktionen showTypeto gange med forskellige typebemærkninger, fordi den er generisk - den kan genbruges.

interface GenericType { id: number name: T } function showType(args: GenericType) { console.log(args) } showType({ id: 1, name: "test" }) // Output: {id: 1, name: "test"} function showTypeTwo(args: GenericType) { console.log(args) } showTypeTwo({ id: 1, name: 4 }) // Output: {id: 1, name: 4} 

Her har vi et andet eksempel, der har en grænseflade, GenericTypeder modtager en generisk type T. Og da det kan genbruges, kan vi kalde det først med en streng og derefter et nummer.

interface GenericType { id: T name: U } function showType(args: GenericType) { console.log(args) } showType({ id: 1, name: "test" }) // Output: {id: 1, name: "test"} function showTypeTwo(args: GenericType) { console.log(args) } showTypeTwo({ id: "001", name: ["This", "is", "a", "Test"] }) // Output: {id: "001", name: Array["This", "is", "a", "Test"]} 

En generisk type kan modtage flere argumenter. Her videregiver vi to parametre: Tog Uog bruger dem derefter som typebetegnelser for egenskaberne. Når det er sagt, kan vi nu bruge grænsefladen og give forskellige typer som argumenter.

Hjælpeprogrammer

TypeScript tilbyder praktiske indbyggede værktøjer, der hjælper med at manipulere typer let. For at bruge dem skal du gå ind i den type, du vil transformere.

Delvis

  • Partial

Delvis giver dig mulighed for at gøre alle egenskaber af typen Tvalgfri. Det tilføjer et ?mærke ud for hvert felt.

interface PartialType { id: number firstName: string lastName: string } function showType(args: Partial) { console.log(args) } showType({ id: 1 }) // Output: {id: 1} showType({ firstName: "John", lastName: "Doe" }) // Output: {firstName: "John", lastName: "Doe"} 

Som du kan se, har vi en grænseflade, PartialTypeder bruges som typebetegnelse for de parametre, der modtages af funktionen showType(). Og for at gøre egenskaberne valgfri skal vi bruge Partialnøgleordet og videregive typen PartialTypesom et argument. Når det er sagt, bliver alle felter nu valgfri.

Påkrævet

  • Required

I modsætning Partialtil Requiredgør værktøjet alle egenskaber af den Tkrævede type .

interface RequiredType { id: number firstName?: string lastName?: string } function showType(args: Required) { console.log(args) } showType({ id: 1, firstName: "John", lastName: "Doe" }) // Output: { id: 1, firstName: "John", lastName: "Doe" } showType({ id: 1 }) // Error: Type '{ id: number: }' is missing the following properties from type 'Required': firstName, lastName 

Den Requirednytte vil gøre alle ejendomme krævede selvom vi gør dem valgfri først, før du bruger værktøjet. Og hvis en ejendom udelades, vil TypeScript kaste en fejl.

Læs kun

  • Readonly

Denne værktøjstype transformerer alle egenskaber af typen Tfor at gøre dem ikke tildeles igen med en ny værdi.

interface ReadonlyType { id: number name: string } function showType(args: Readonly) { args.id = 4 console.log(args) } showType({ id: 1, name: "Doe" }) // Error: Cannot assign to 'id' because it is a read-only property. 

Her bruger vi værktøjet Readonlytil at gøre egenskaberne for ReadonlyTypeikke omfordelt. Når det er sagt, hvis du forsøger at give en ny værdi til et af disse felter, kastes en fejl.

Derudover kan du også bruge nøgleordet readonlyforan en ejendom for at gøre det ikke omfordelt.

interface ReadonlyType { readonly id: number name: string } 

Plukke

  • Pick

Det giver dig mulighed for at oprette en ny type fra en eksisterende model Tved at vælge nogle egenskaber Kaf den type.

interface PickType { id: number firstName: string lastName: string } function showType(args: Pick) { console.log(args) } showType({ firstName: "John", lastName: "Doe" }) // Output: {firstName: "John"} showType({ id: 3 }) // Error: Object literal may only specify known properties, and 'id' does not exist in type 'Pick' 

Picker lidt anderledes end de tidligere hjælpeprogrammer, vi allerede har set. Det forventer to parametre - Ter den type, du vil vælge elementer fra, og Ker den egenskab, du vil vælge. Du kan også vælge flere felter ved at adskille dem med et rør ( |) symbol.

Udelade

  • Omit

The Omit utility is the opposite of the Pick type. And instead of selecting elements, it will remove K properties from the type T.

interface PickType { id: number firstName: string lastName: string } function showType(args: Omit) { console.log(args) } showType({ id: 7 }) // Output: {id: 7} showType({ firstName: "John" }) // Error: Object literal may only specify known properties, and 'firstName' does not exist in type 'Pick' 

This utility is similar to the way Pick works. It expects the type and the properties to omit from that type.

Extract

  • Extract

Extract allows you to construct a type by picking properties that are present in two different types. The utility will extract from T all properties that are assignable to U.

interface FirstType { id: number firstName: string lastName: string } interface SecondType { id: number address: string city: string } type ExtractType = Extract // Output: "id" 

Here, we have two types that have in common the property id. And hence by using the Extract keyword, we get back the field id since it's present in both interfaces. And if you have more than one shared field, the utility will extract all similar properties.

Exclude

Unlike Extract, the Exclude utility will construct a type by excluding properties that are already present in two different types. It excludes from T all fields that are assignable to U.

interface FirstType { id: number firstName: string lastName: string } interface SecondType { id: number address: string city: string } type ExcludeType = Exclude // Output; "firstName" | "lastName" 

As you can see here, the properties firstName and lastName are assignable to the SecondType type since they are not present there. And by using the Extract keyword, we get back these fields as expected.

Record

  • Record

This utility helps you to construct a type with a set of properties K of a given type T. Record is really handy when it comes to mapping the properties of a type to another one.

interface EmployeeType { id: number fullname: string role: string } let employees: Record = { 0: { id: 1, fullname: "John Doe", role: "Designer" }, 1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" }, 2: { id: 3, fullname: "Sara Duckson", role: "Developer" }, } // 0: { id: 1, fullname: "John Doe", role: "Designer" }, // 1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" }, // 2: { id: 3, fullname: "Sara Duckson", role: "Developer" } 

The way Record works is relatively simple. Here, it expects a number as a type which is why we have 0, 1, and 2 as keys for the employees variable. And if you try to use a string as a property, an error will be thrown. Next, the set of properties is given by EmployeeType hence the object with the fields id, fullName, and role.

NonNullable

  • NonNullable

It allows you to remove null and undefined from the type T.

type NonNullableType = string | number | null | undefined function showType(args: NonNullable) { console.log(args) } showType("test") // Output: "test" showType(1) // Output: 1 showType(null) // Error: Argument of type 'null' is not assignable to parameter of type 'string | number'. showType(undefined) // Error: Argument of type 'undefined' is not assignable to parameter of type 'string | number'. 

Here, we pass the type NonNullableType as an argument to the NonNullable utility which constructs a new type by excluding null and undefined from that type. That said, if you pass a nullable value, TypeScript will throw an error.

By the way, if you add the --strictNullChecks flag to the tsconfig file, TypeScript will apply non-nullability rules.

Mapped types

Mapped types allow you to take an existing model and transform each of its properties into a new type. Note that some utility types covered earlier are also mapped types.

type StringMap = { [P in keyof T]: string } function showType(arg: StringMap) { console.log(arg) } showType({ id: 1, name: "Test" }) // Error: Type 'number' is not assignable to type 'string'. showType({ id: "testId", name: "This is a Test" }) // Output: {id: "testId", name: "This is a Test"} 

StringMap will transform whatever types that passed in into a string. That said, if we use it in the function showType(), the parameters received must be a string - otherwise, an error will be thrown by TypeScript.

Type Guards

Type Guards allow you to check the type of a variable or an object with an operator. It's a conditional block that returns a type using typeof, instanceof, or in.

  • typeof
function showType(x: number | string) { if (typeof x === "number") { return `The result is ${x + x}` } throw new Error(`This operation can't be done on a ${typeof x}`) } showType("I'm not a number") // Error: This operation can't be done on a string showType(7) // Output: The result is 14 

As you can see, we have a normal JavaScript conditional block that checks the type of the argument received with typeof. With that in place, you can now guard your type with this condition.

  • instanceof
class Foo { bar() { return "Hello World" } } class Bar { baz = "123" } function showType(arg: Foo | Bar) { if (arg instanceof Foo) { console.log(arg.bar()) return arg.bar() } throw new Error("The type is not supported") } showType(new Foo()) // Output: Hello World showType(new Bar()) // Error: The type is not supported 

Som det foregående eksempel er denne også en typebeskyttelse, der kontrollerer, om den modtagne parameter er en del af Fooklassen eller ikke og håndterer den derfor.

  • in
interface FirstType { x: number } interface SecondType { y: string } function showType(arg: FirstType | SecondType) { if ("x" in arg) { console.log(`The property ${arg.x} exists`) return `The property ${arg.x} exists` } throw new Error("This type is not expected") } showType({ x: 7 }) // Output: The property 7 exists showType({ y: "ccc" }) // Error: This type is not expected 

Den inOperatøren giver dig mulighed for at kontrollere, om en ejendom xeksisterer eller ej på det modtagne gode som en parameter.

Betingede typer

Betingede typer tester to typer, og vælg en af ​​dem afhængigt af resultatet af testen.

type NonNullable = T extends null | undefined ? never : T 

Dette eksempel på NonNullablehjælpeprogrammet kontrollerer, om typen er nul eller ej, og håndterer det afhængigt af det. Og som du kan bemærke, bruger den JavaScript-ternær operator.

Tak for læsningen.

Du kan finde andet godt indhold som dette på min blog eller følge mig på Twitter for at få besked.