TypeScript Zelfstudie
Aan de slag met TypeScript

Opmerkingen

versies

Installatie en configuratie

Achtergrond

TypeScript is een getypte superset van JavaScript die rechtstreeks naar JavaScript-code wordt gecompileerd. TypeScript-bestanden gebruiken meestal de extensie .ts . Veel IDE's ondersteunen TypeScript zonder dat andere instellingen vereist zijn, maar TypeScript kan ook worden gecompileerd met het TypeScript Node.JS-pakket vanaf de opdrachtregel.

Ides

Visuele studio

• Visual Studio 2015 bevat TypeScript.
• Visual Studio 2013 Update 2 of hoger bevat TypeScript, of u kunt TypeScript voor eerdere versies downloaden .

Visual Studio Code

• Visual Studio Code (vscode) biedt contextuele autocomplete evenals refactoring en debugging tools voor TypeScript. vscode is zelf geïmplementeerd in TypeScript. Beschikbaar voor Mac OS X, Windows en Linux.

WebStorm

• WebStorm 2016.2 geleverd met TypeScript en een ingebouwde compiler. [Webstorm is niet gratis]

IntelliJ IDEE

• IntelliJ IDEA 2016.2 ondersteuning voor Typescript en een compiler via een plug-in die wordt beheerd door het Jetbrains-team. [IntelliJ is niet gratis]

Atoom- en atoomtypescript

• Atom ondersteunt TypeScript met het atom-typescript- pakket.

Sublieme tekst

• Sublime Text ondersteunt TypeScript met het typescript- pakket.

De opdrachtregelinterface installeren

Installeer Node.js

Installeer het npm-pakket wereldwijd

U kunt TypeScript wereldwijd installeren om er vanuit elke map toegang toe te hebben.

npm install -g typescript

of

Installeer het npm-pakket lokaal

U kunt TypeScript lokaal installeren en opslaan in package.json om te beperken tot een map.

npm install typescript --save-dev

Installatiekanalen

U kunt installeren vanaf:

• Stabiel kanaal: npm install typescript
• Bètakanaal: npm install typescript@beta
• Dev-kanaal: npm install typescript@next

Compileren van TypeScript-code

De opdracht tsc compilatie wordt geleverd met typescript , dat kan worden gebruikt om code te compileren.

tsc my-code.ts

Hiermee wordt een my-code.js bestand gemaakt.

Compileren met tsconfig.json

U kunt ook compilatieopties bieden die met uw code reizen via een tsconfig.json bestand. Om een nieuw TypeScript-project te starten, cd je in de terminalmap van je project in een terminalvenster en voer je tsc --init . Deze opdracht genereert een tsconfig.json bestand met minimale configuratie-opties, vergelijkbaar met hieronder.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

Met een tsconfig.json bestand in de root van uw TypeScript-project, kunt u de opdracht tsc gebruiken om de compilatie uit te voeren.

Hallo Wereld

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

Hier hebben we een klasse, Greeter , die een constructor en een greet . We kunnen een instantie van de klasse construeren met het new trefwoord en een string doorgeven die we de greet naar de console willen laten uitvoeren. De instantie van onze Greeter klasse wordt opgeslagen in de greeter variabele die we ons dan de greet noemen.

Basissyntaxis

TypeScript is een getypte superset van JavaScript, wat betekent dat alle JavaScript-code geldige TypeScript-code is. TypeScript voegt daar nog veel nieuwe functies aan toe.

TypeScript maakt JavaScript meer een sterk getypeerde, objectgeoriënteerde taal verwant aan C # en Java. Dit betekent dat TypeScript-code meestal gemakkelijker te gebruiken is voor grote projecten en dat code vaak gemakkelijker te begrijpen en te onderhouden is. Het sterke typen betekent ook dat de taal vooraf kan worden gecompileerd en dat aan variabelen geen waarden kunnen worden toegewezen die buiten het opgegeven bereik vallen. Wanneer een TypeScript-variabele bijvoorbeeld als een getal wordt gedeclareerd, kunt u er geen tekstwaarde aan toewijzen.

Deze sterke typ- en objectoriëntatie maakt TypeScript gemakkelijker te debuggen en te onderhouden, en dat waren twee van de zwakste punten van standaard JavaScript.

Typ aangiften

U kunt typedeclaraties toevoegen aan variabelen, functieparameters en functieretourtypen. Het type wordt geschreven achter een dubbele punt na de naam van de variabele, zoals deze: var num: number = 5; De compiler controleert vervolgens de typen (waar mogelijk) tijdens de compilatie en rapporteert typefouten.

var num: number = 5;
num = "this is a string";  // error: Type 'string' is not assignable to type 'number'.

De basistypen zijn:

• number (zowel gehele getallen als getallen met drijvende komma)
• string
• boolean
• Array . U kunt de typen elementen van een array opgeven. Er zijn twee equivalente manieren om arraytypen te definiëren: Array<T> en T[] . Bijvoorbeeld:
  • number[] - reeks getallen
  • Array<string> - array van tekenreeksen
• Tuples. Tuples hebben een vast aantal elementen met specifieke typen.
  • [boolean, string] - tuple waarbij het eerste element een boolean is en het tweede een string.
  • [number, number, number] - tuple van drie nummers.
• {} - object, u kunt de eigenschappen of indexer ervan definiëren
  • {name: string, age: number} - object met naam en leeftijdkenmerken
  • {[key: string]: number} - een woordenboek van getallen geïndexeerd door string
• enum - { Red = 0, Blue, Green } - opsomming toegewezen aan getallen
• Functie. U geeft typen op voor de parameters en retourwaarde:
  • (param: number) => string - functie die één nummerparameter retourneert, string
  • () => number - functie zonder parameters die een nummer retourneren.
  • (a: string, b?: boolean) => void - functie neemt een string en optioneel een boolean zonder retourwaarde.
• any - Staat elk type toe. Uitdrukkingen waarbij any worden niet op type gecontroleerd.
• void - vertegenwoordigt "niets", kan worden gebruikt als een functie-retourwaarde. Alleen null en undefined maken deel uit van het void type.
• never
  • let foo: never; - Als het type variabelen onder typebeschermers die nooit waar zijn.
  • function error(message: string): never { throw new Error(message); } - Als het retourtype van functies die nooit terugkeren.

• null - typ de waarde null . null is impliciet onderdeel van elk type, tenzij strikte nulcontroles zijn ingeschakeld.

Gieten

U kunt expliciet casten door punthaken, bijvoorbeeld:

var derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod();

Dit voorbeeld toont een derived klasse die door de compiler wordt behandeld als een MyInterface . Zonder de cast op de tweede regel zou de compiler een uitzondering someSpecificMethod() omdat hij someSpecificMethod() niet begrijpt, maar het casten via <ImplementingClass>derived suggereert de compiler wat te doen.

Een andere manier om te typen in Typescript is het gebruik van het sleutelwoord as :

var derived: MyInterface;
(derived as ImplementingClass).someSpecificMethod();

Sinds Typescript 1.6 gebruikt standaard het sleutelwoord as , omdat het gebruik van <> dubbelzinnig is in .jsx- bestanden. Dit wordt vermeld in de officiële typescript-documentatie .

Klassen

Klassen kunnen worden gedefinieerd en gebruikt in TypeScript-code. Raadpleeg de documentatiepagina Klassen voor meer informatie over klassen.

TypeScript REPL in Node.js

Voor gebruik van TypeScript REPL in Node.js kunt u het tsun-pakket gebruiken

Installeer het wereldwijd met

npm install -g tsun

en voer het uit in uw terminal of opdrachtprompt met tsun commando

Gebruiksvoorbeeld:

$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl
$ function multiply(x, y) {
..return x * y;
..}
undefined
$ multiply(3, 4)
12

TypeScript uitvoeren met behulp van ts-node

ts-node is een npm-pakket waarmee de gebruiker typescript-bestanden rechtstreeks kan uitvoeren, zonder dat voorcompilatie met tsc . Het biedt ook REPL .

Installeer ts-node wereldwijd met

npm install -g ts-node

ts-node bundelt geen typescript-compiler, dus u moet het mogelijk installeren.

npm install -g typescript

Script wordt uitgevoerd

Voer een script uit met de naam main.ts

ts-node main.ts

// main.ts
console.log("Hello world");

Voorbeeld gebruik

$ ts-node main.ts
Hello world

REPL wordt uitgevoerd

Voer de opdracht ts-node om REPL uit te voeren

Voorbeeld gebruik

$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2, 2)
4
> .exit

Gebruik de opdracht .exit om REPL af te sluiten of druk tweemaal op CTRL+C