Hvad er TypeScript?

TypeScript-oversigt

Så som du sandsynligvis er opmærksom på, udvider JavaScript sit fodaftryk hver dag. Det er både overvældende og forbløffende, hvad du kan gøre med sproget i dag.

Men da flere store projekter begynder at bruge JavaScript, bliver processen med at gøre koden lettere at skrive og mere vedligeholdelig mere og mere vanskelig.

Dette er et problem, Microsoft genkendte tidligt, og de kom op med en løsning: TypeScript Den første version blev udgivet den 1. oktober 2012.

JavaScript vs TypeScript

Okay så nu, hvor vi har en generel fornemmelse af, hvad TypeScript er, lad os spille et hurtigt spil Hvor er Waldo .

I ovenstående skærmbillede kan du se forskellene mellem JavaScript& TypeScripti dette meget enkle multiplikationsprogram, der bare udskriver produktet af to tal, jeg har foruddefineret.

Hvad er disse forskelle dog? ? ️

De er typer !

Så JavaScripthar dynamisk skrivning, at en variabel, der er deklareret som et tal, kan omdannes til en streng, hvor det samme gælder TypeScriptstatisk skrivning, hvilket betyder, at du på forhånd erklærer, hvilken type værdi variablen har, og den ændrer sig ikke.

I den multiplication.tsfil erklærer jeg, at alle disse variabler er tal, så de ikke kan ændres til noget andet.

I det væsentlige forsøger TypeScript at hjælpe JavaScript med at nå nye højder og blive meget skalerbar. Det kan fremhæves af følgende funktioner:

• gratis og open source programmeringssprog udviklet og vedligeholdt af Microsoft
• strengt syntaktisk supersæt af JavaScript, der kompileres til almindeligt JavaScript
• letter udviklingen af ​​store applikationer skrevet i JavaScript
• udvider JavaScript ved at tilføje statiske typer, klasser, moduler, grænseflader og generiske

? FUN FACT TypeScript blev 7 år den 1. oktober 2019.

Version

Seneste stabile version tilgængelig er TypeScript 3.7 (fra begyndelsen af ​​2020).

Sådan installeres TypeScript

For at komme i gang selv er de to ting, du har brug for, TypeScript-kompilatoren og en editor, der understøtter TypeScript.

I ovenstående skærmbillede installerer jeg både compileren og TSLint (som ligner ESLint) ved hjælp af npmi Visual Studio Codes integrerede terminal.

Installation af TypeScript

Denne kommando installerer TypeScript-pakken som en afhængighed i dit projekt, der bruger npmen populær pakkehåndtering.

npm i typescript

At bemærke Der er flere muligheder, der npmgiver, afhængigt af hvor du vil have TypeScript installeret.

• npm i -g typescript for at installere TypeScript-pakken globalt
• npm i -D typescript at installere TypeScript-pakken som en dev-afhængighed

Kompilering af en enkelt fil ned til JavaScript

tsc multiplication.ts

At bemærke Du kan konfigurere denne TypeScript-kompileringsproces som et brugerdefineret npm-script i din package.json.

Konfigurationsindstillinger

touch tsconfig.json

Der er også mulighed for at oprette en tsconfig.jsonfil, der specificerer rodfiler og kompilatorindstillinger.

I din tsconfig.jsonfil kan du for eksempel angive, at du vil have TypeScript til at kompilere ned til ES5 i stedet for ES6.

Hurtigt eksempel

I skærmbilledet ovenfor kan du se to filer - multiplication.jsog multiplication.ts.

Dette program udskriver bare produktet af to numre, jeg har foruddefineret.

multiplication.ts

let a: number = 10; let b: number = 2; function showProduct(first: number, second: number): void { console.info("Mathematical! The result is " + first * second + "."); } showProduct(a, b); // Mathematical! The result is 20.

Når jeg er færdig med at oprette multiplication.ts, kan jeg kompilere det ned til JavaScript ved hjælp af tsckommandoen, der står for TypeScript-kompilering.

multiplication.js

var a = 10; var b = 2; function showProduct(first, second) { console.info("Mathematical! The result is " + first * second + "."); } showProduct(a, b); // Mathematical! The result is 20.

Bam - vi har lige udarbejdet TypeScript til JavaScript!

TSLint

En linter er et værktøj, der registrerer og markerer fejl på programmeringssprog, herunder stilistiske fejl.

For TypeScript er TSLint den mest populære linter-mulighed.

TSLint er et udvideligt statisk analyseværktøj, der kontrollerer TypeScript-kode for læsbarheds-, vedligeholdelses- og funktionalitetsfejl.

Det understøttes bredt på tværs af moderne redaktører og build-systemer og kan tilpasses med dine egne fnugregler, konfigurationer og formatere.

Installation af TSLint

Denne kommando installerer TSLintpakken globalt ved hjælp af npmen populær pakkehåndtering.

npm i -g tslint

Legeplads

Hvis du vil prøve TypeScript uden at installere det, skal du besøge TypeScript Playground.

Legepladsen har indbygget automatisk færdiggørelse og muligheden for direkte at se det udsendte JavaScript.

Andre ressourcer

For at lære mere om installation, se installationsbilaget.

Hvis du kun har brug for en typekontrol og ikke ønsker at kompilere dit program, skal du læse om Flux.

• Hurtig start
• Dokumentation
• Kildekode