Typescript

Mer av

Repetition

Varför Typescript?
Vilka inbyggda typer finns det?
Hur kan man typa objekt?
Arrayer?
Funktioner?
Vad är unions?

Agenda

Types vs Interfaces
Objekt med dynamic keys (index signatures)
Enums
Generics

Type aliases vs interfaces

Vi kan specifiera hur t.e.x ett objekt ska se ut med type eller interface. Objekttypen får ett tydligare namn och konventionen är att börja med stor bokstav.
Oftast kan vi använda oss av antingen type eller interface, men det finns skillnader.

Type aliases vs Interfaces

  // I många fall helt utbytbara

  type Poet = { 
    born: number | string ; 
    name: string;
    dead?: number
  };


  interface Poet { 
    born: number | string ; 
    name: string;
    dead?: number;
  }

Typescript Playground - Interfaces or Type aliasis

Interfaces

Kan "extendas" från andra interfaces
Keyword extends


 interface BaseAdress { 
    fullname: string;
    street: string;
    city: string;
    country: string;
  } 

 interface AdressWithPhoneNumber extends BaseAdress {
    phone: number;
 }

Interfaces

Kan användas i klasser (class)
Keyword implements

  interface IUser {
      id: number;
      name: string;
      displayInfo(): void;
  }


  class User implements IUser {
      id: number;
      name: string;

      constructor(id: number, name: string) {
          this.id = id;
          this.name = name;
      }

      displayInfo(): void {
          console.log(`ID: ${this.id}, Name: ${this.name}`);
      }
  }

  const user = new User(1, 'Alice');
  user.displayInfo();

Interfaces

Interfaces är "öppna". Mer heuristiska.

  
  interface Person {
      name: string;
  }

  interface Person {
      age: number;
  }

  let person: Person = {
      name: 'John',
      age: 25
  };

Type aliasis

Objekt med type kan använda unions/intersections

// En typ är antingen en typen eller den andra
 type User = SuperUser | Admin;

// Kombinerar "ärver" typer
 type SpecialDate = Date & { getReason(): string }

Type alias eller interface?

Om du vill använda union eller intersection på objekt => använd type
Om du vill att dina objekt ska kunna ärva eller kunna mergas eller implementeras till klasser=> använd interface
Om ditt objekt ska konsumeras och utvidgas till andra delar av din kodbas eller utanför (API) => använd interfaces
Enligt TS-teamet är interfaces något snabbare. Men det gäller ju endast under kompileringsfasen
Interfaces ger tydligare felmeddelanden
Däremot ger Type ett tydligare innehåll när man hovrar över

Type alias eller interface?

"For the most part, you can choose based on personal preference, and TypeScript will tell you if it needs something to be the other kind of declaration. If you would like a heuristic, use interface until you need to use features from type." - se TS-dokumentation

Matt Pocock - Types vs Interfaces

Type alias eller interface?

Var konsekvent , tills du stöter på skillnader
Finns säkert en konvention hos LIA-anordnare - var bekant med skillnaderna
På provet kommer båda accepteras så länge tsc-kompilatorn inte klagar

Index Signatures



  interface StringDictionary {
      [index: string]: string;
  }

  const myDict: StringDictionary = {
      prop1: "value1",
      prop2: "value2"
  };

  myDict["prop3"] = "value3";

  console.log(myDict.prop3); // Output: value3

Spara properties med dynamiska nycklar (keys)

Enums

  
  enum CardSuit {
      Clubs,
      Diamonds,
      Hearts,
      Spades
  }

  // Sample usage
  const card = CardSuit.Clubs;

  // Safety
  card = "not a member of card suit"; // Error : string is not assignable to type `CardSuit`

Ett sätt att organisera relaterad data.

Enums

  
  enum Color {
      Red,     // 0
      Green,   // 1
      Blue     // 2
  }

  enum Color {
      DarkRed = 3,  // 3
      DarkGreen,    // 4
      DarkBlue      // 5
  }

Har ett number associerat, men går också att ändra.

Enums

  
  enum Color {
      Red,     // 0
      Green,   // 1
      Blue     // 2
  }

  
  interface Shape {
      type: string;
      color: Color[];
  }

  const chape : Shape = {
      type: "circle",
      color:  [Color.Red, Color.Green, Color.Blue]
  }

Kan exempelvis användas som uppräkning i interface

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!