sandra-larsson
Educator Fullstack Developer Javascript at Chas Academy
Typescript
Ännu mer av
Repetition
- Types vs Interfaces
- Objekt med dynamic keys (index signatures)
- Enums
Agenda
- Generics
- Utility types
- Narrowing & Type Guards
Generics
Hur kan vi ange en typ som för varje returtyp motsvarar samma input-typ?? Utan union( string | number) eller any??
function convertToArray(input: string): string[] {
return [input]
}
convertToArray("hello world")
convertToArray(1) // Error: Argument of type '1'
// is not assignable to parameter of type 'string'.Svar: Genom att använda en s.k generisk typ
Generics
En generisk typ är som ett funktionsargument fast för typer.
T är en konvention, kan egentligen heta vad som helst.
T härleds till att i första fallet vare en string och andra fallet till en number
function convertToArray<T>(input: T): T[] {
return [input]
}
convertToArray("hello world") //Ok!
convertToArray(1) // Ok!Generics
... man kan också använda sig av fler generiska typer på en och samma gång
function createArrayPair<T,K>(input1: T, input2: K): [T, K]{
return [input1, input2];
}
createArrayPair(1, "a"); // [1, "a"]Generics
Kan också användas i interfaces.
interface Burger<T> {
size: T
price: number
}
const meal: Burger<string> = {
size: "small",
price: 50
}Generics
... och i klasser
class Burger<T> {
size: T
price: number
constructor(size: T, price: number) {
this.size = size
this.price = price
}
}
const burger1 = new Burger("small", 50)
const burger2 = new Burger(3, 50)Generics
... man kan också "begränsa" en generic med extends
function convertToArray<T extends number | string >(input: T): T[] {
return [input]
}
convertToArray("hello world")
convertToArray(1)Generics
... så vad är det bra med generics, egentligen?
- Skapa typer som är flexibla och anpassningsbara
- Återanvändbarhet!
Utility Types
Vi kan skapa typer från andra typer. Exempelvis:
// Kombinera typer
type typeC = typeA & typeC
// Eller med interface ...
Men hur kan vi ta bort eller flexibelt ändra till nya typer?
Här finns en uppsättning s.k utility types att använda
Utility Types
Vanliga utility types är:
men det finns många fler...
- Partial<Type>
- Required<Type>
- Omit<Type, Keys>
- Pick<Type, Keys>
Narrowing
Narrowing är processen där typen av en variabel avgörs till en mer specifik typ. Ett sätt att göra detta är att använda typeof, d.v.s att använda en Typeguard.
function example(value: string | number) {
if (typeof value === 'string') {
return value.toUpperCase());
} else {
console.log(value.toFixed(2));
}
}
Narrowing
Men man kan "smala" ner på fler sätt. Exempelvis använda truthy/falsy values, in operatorn, instanceOf, equality ===
Vi följer exempel på Typescript dokumentationen!
Typescript - Generics, Utility types, Narrowing
By sandra-larsson
