Intro Typescript

Agenda

  • Vad är och varför Typescript?
  • Setup Typescript Node.js
  • Grunder i Typescript

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

 

Minskar risken att skicka ut felen när applikationen körs. 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 av kod


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

Varför Typescript?

 3. Bättre dokumentation av kod


  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

# Installera TypeScript 
npm install -D typescript

# Valfritt 
npm install -D tsx # köra Typescrict utan kompileringssteg

# Initial setup
mkdir my-typescript-project
cd my-typescript-project
npm init

Konfigurera Typescript

# Skapa en tsconfig.json-fil eller kör:
npx tsc --init

Vi inspekterar filen tsconfig.json filen!

Bra startkonfiguration

{
  "extends": "@tsconfig/node20/tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    
    // Module Settings
    "module": "nodenext",
    "target": "esnext",
    "moduleDetection": "force",
    "isolatedModules": true,
    
    // Output Options
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    
    // Type Checking
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    
    // Interop & Compatibility
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    
    // Optimization
    "types": []
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Projektstruktur


  my-typescript-project/
  ├── src/
  │   └── index.ts
  ├── dist/           (genererad)
  ├── node_modules/   (genererad)
  ├── package.json
  └── tsconfig.json

Uppdatera scripts i package.json

{
  "scripts": {
    "build": "tsc",
    "dev": "tsx watch src/index.ts",
    "start": "node dist/index.js"
  }
}

Text


npm run build # Kompilerar ts-filerna
npm run dev # Kör utvecklingsmiljön
npm run stat # Kör den kompilerade JS-applikationen

Javascripts 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
let message = "Hello World"

console.log(typeof message) // string

DEMO TS SETUP

Ange typer med Typescript

Det enklaste sättet att ange en typ i TypeScript är med ett kolon (:) efter variabelnamnet


let name: string = "Anna";
let age: number = 25;
let isStudent: boolean = true;
let lista: number[] = [1, 2, 3];    // Lista med nummer
let anything: any = "vad som helst"; // Vilken typ som helst (undvik!)

Ange typer med Typescript

För funktioner


// Ange typ för parametrar och returvärde
function add(a: number, b: number): number {
  return a + b;
}

function greet(name: string): void {  // void = returnerar inget
  console.log("Hej " + name);
}

Typescript härleder types (infers)


let name = "Anna";  // TypeScript vet att detta är en string
let age = 25;       // TypeScript vet att detta är en number

// Men för funktionsparametrar MÅSTE du ange typen:
function greet(name: string) {  // Måste skriva ': string'
  console.log("Hej " + name);
}

VS Code Extensions

Introduktion till Typescript

By sandra-larsson

Introduktion till Typescript

  • 36

More from sandra-larsson