Intro Typescript

Agenda

  • Vad är och varför Typescript?
  • Setup i vanilla Typescript 
  • Primitiva typer + typen any
  • Objekt med Type eller Interface
  • Arrayer
  • Funktioner
  • Unions

Dynamisk typning

Javascript intepreteraren (eller JIT) tilldelar värdet en datatyp vid runtime. En "10" blir en string och 10 blir ett Number. Och programmeraren kan sedan typomvandla vid behov.

Motsvarigheten heter statisk typning och där måste programmeraren explicit ange datatyp som string, int, osv. Så är fallet i programmeringspråk som C++, C#, Java, etc

Vad är Typescript? 

  • Ett programmeringspråk som kompileras till Javascript
  • Open source-projekt som handhålls av Microsoft. 
  • Lanserades 2012

https://www.typescriptlang.org/

Vad är Typescript? 

"typat syntaxtiskt superset"

Användning av Typescript

Varför Typescript?

 1. Flytta felen från runtime till  compile time, vilket minskar risken att skicka ut felen i "verkligheten". Exempelvis upptäcka "undefined" vid utveckling istället för körning av applikationen. 

Varför Typescript?

 2. Mer kontroll i utvecklingsmiljön. D.v.s genom att ange typer får vi direkt feedback om vi skriver fel i vår kod. TS har bättre autocomplete där typer angetts. 

Varför Typescript?

 3. Bättre "dokumentation" eftersom det lämnar intentionerna i koden mer tydligt. 


  function add(a, b) {
    return a + b
  }

Nästa utvecklare tar vid och undrar är det string, number eller båda?

Varför Typescript?

 3. Bättre "dokumentation" eftersom det lämnar intentionerna i koden mer tydligt. 


  function add(a: number, b: number): number {
    return a + b;
  }

  add(3, "4") // Fel

Nackdelar med Typescript?

  • Man behöver skriva mer kod för samma funktionalitet i JS
  • Ett extra steg att köra koden

Setup av ett Typescript-projekt

npm init
npm install typescript --save-dev
npx tsc --init // skapar tsconfig.json
npx tsc // bygger om .ts => .js
  • Ny mapp :-)
  • En index.ts för att skriva TS-kod

Man behöver inte köra npx, utan kan köra endast tsc men då pekar den på den globala versionen. Olika projekt kan behöva olika versioner. https://www.typescriptlang.org/download

TS projektet


package.json   # Package manifest
tsconfig.json  # TypeScript kompileringsinställningar
src/index.ts   # "programmet"
{
  "name": "hello-ts",
  "license": "NOLICENSE",
  "devDependencies": {
    "typescript": "^5.0.4"
  },
  "scripts": {
    "dev": "tsc --watch --preserveWatchOutput"
  }
}

TS-config-filen 😱


{
  "compilerOptions": {
    "outDir": "dist", // where to put the TS files
    "target": "es2016" // which level of JS support to target
  },
  "include": ["src/**/*"], // which files to compile
}

Du ska inte behöva ändra så mycket, just nu kan du ändra detta. Om du vill.

Inbyggda typer

  • Genom att köra typeof får vi fram de olika datatyperna i Javascript.  Primitiverna av dessa är de enkla typerna i Typescript.
  • string         // "", "hej", "123"
  • number     // 0, 2.1, -4 ...
  • boolean    // true eller false
  • object
  • undefined
  • null
  • bigInt
  • Symbol

DEMO TS SETUP

any - "som normal JS fungerar"

Kan användas när man konverterar JS till TS, men undvikas till slutproduktion

 

En TS variabel "föds" när den får en type, tills dess är den av typ any

 

I motsats finns never och unknown (vi kommer till det längre fram i kursen)

Objekt

  
  const car: {
      make: string
      model: string
      year: number
    }

  car = { make: 'Volvo', model: 'V70', year: 2011 }

  function printCar(car: {
      make: string
      model: string
      year: number
    }) {
      console.log(`${car.make} ${car.model} (${car.year})`)
  }

Jobbigt att skriva varje gång

Objekt

Med hjälp av Typescript kan vi specifiera hur vi vill att exempelvis ett objekt ska se ut genom att använda oss av type eller interface (vi går in på skillnader senare i kursen)

Man kan specifiera vilka properties som accepteras, ex nummer eller string, etc

En parameter kan vara optional med  ? - bra att hantera undefined

Objekt med Type aliases


  type Car =  {
      make: string
      model: string
      year: number
      color?: string
    }

  const car = { make: 'Volvo', model: 'V70', year: 2011 }

  function printCar(car: Car) {
      console.log(`${car.make} ${car.model} (${car.year})`)
  }

Objekt med Interface

 
  interface Car  {
      make: string
      model: string
      year: number
      color?: string
    }

  const car = { make: 'Volvo', model: 'V70', year: 2011 }

  function printCar(car: Car) {
      console.log(`${car.make} ${car.model} (${car.year})`)
  }

Array

Att typa arrayer kan göras med [] eller Array<typ>.  Den senare varianten kallas generics  och vi återkommer om det (Reactkursen)

  
  const names: string[] = ["Olle", "Kalle", "Nisse"]
  names.push("Harlald")

  const fruits: Array<string> = ["apple", "banana", "orange"]
  fruits.push("pear")

Funktioner

Specifiera vilka typer en funktion tar in som argument och skickar tillbaka. När inget returneras används void. Returtypen kan utelämnas men visuellt kan det vara tydligare.

  
 function echo(message: string): void {
    console.log(message.toUpperCase());
 }
  
 function echo(message: string): string {
    return `The message is ${message}`;
 }

Union types

Klassisk setteori:  OR eller AND. Antingen en frukt eller något surt.

Union types

Union types kan beskrivas i Typescript med | (pipe-operator). den associerade typen kan vara av en eller flera andra typer.

  
  
  function flipCoin(): "heads" | "tails" {
    if (Math.random() > 0.5) return "heads"
    return "tails"
  }

  const outcome = flipCoin()
// Funktionen tar inte antingen en sträng ELLER ett nummer
function displayMessage(message: string | number): void {
  if (typeof message === "string") {
    console.log(`Message: ${message}`);
  } else {
    console.log(`Message as a number: ${message}`);
  }
}

displayMessage("Hello, TypeScript!"); 
displayMessage(133); 
# PRESENTING CODE

Union types

Intersections types (inte lika vanlig som union)

Klassisk setteori:  OR eller AND

Intersection types kan beskrivas i Typescript med & (ampersand-operator)

En type som kombinerar en eller flera typer

// Definerar en User type
type User = {
  id: number;
  username: string;
};

// Definierar en Role type
type Role = {
  role: string;
  permissions: string[];
};

// Skapar en typ som kombinerar både User och Role (intersection)
type UserProfile = User & Role;

// Skapar en användarprofil objekt av type UserProfile
const userProfile: UserProfile = {
  id: 1,
  username: "john doe",
  role: "admin",
  permissions: ["read", "write", "delete"],
};

// Få tag i properties av objektet userProfile
console.log(`User ID: ${userProfile.id}`);
console.log(`Username: ${userProfile.username}`);
console.log(`Role: ${userProfile.role}`);
console.log(`Permissions: ${userProfile.permissions.join(", ")}`);

Intersections types exempel

Intersections types exempel



  type Shape = Shape2D & Shape3D;


  let shape: Shape= {
      shape: 'Square',
      color: 'Red',
      noEdges: 4,
      volume: 0   
  };

DEMO

Bra att veta

  • Typescript är endast språket när ni skriver vår kod. Det som körs i webbläsaren eller servern är alltid den kompilerade js-koden. 
  • När applikationen körs så kommer den inte bry sig om huruvida variablerna som en funktion tar emot är av rätt typer. Exempelvis vi hämtar från ett API, om utvecklaren har ändrat på API:et, exempelvis att en property är string istället för number.

VS Code Extensions