TypeScript Tutorial
Iniziare con TypeScript

Osservazioni

Versioni

Installazione e configurazione

sfondo

TypeScript è un superset tipizzato di JavaScript che viene compilato direttamente nel codice JavaScript. I file TypeScript comunemente usano l'estensione .ts . Molti IDE supportano TypeScript senza altre impostazioni richieste, ma TypeScript può anche essere compilato con il pacchetto Node.JS di TypeScript dalla riga di comando.

IDE

Visual Studio

• Visual Studio 2015 include TypeScript.
• Visual Studio 2013 Update 2 o versioni successive include TypeScript oppure è possibile scaricare TypeScript per versioni precedenti .

Codice di Visual Studio

• Codice di Visual Studio (vscode) fornisce il completamento automatico contestuale e strumenti di refactoring e debug per TypeScript. vscode è esso stesso implementato in TypeScript. Disponibile per Mac OS X, Windows e Linux.

WebStorm

• WebStorm 2016.2 viene fornito con TypeScript e un compilatore incorporato. [Webstorm non è gratuito]

IntelliJ IDEA

• IntelliJ IDEA 2016.2 ha il supporto per Typescript e un compilatore tramite un plugin gestito dal team Jetbrains. [IntelliJ non è gratuito]

Atom & atom-typescript

• Atom supporta TypeScript con il pacchetto atom-typescript .

Testo sublime

• Sublime Text supporta TypeScript con il pacchetto dattiloscritto .

Installazione dell'interfaccia della riga di comando

Installa Node.js

Installa il pacchetto npm a livello globale

Puoi installare TypeScript a livello globale per avere accesso ad esso da qualsiasi directory.

npm install -g typescript

o

Installa il pacchetto npm localmente

È possibile installare localmente TypeScript e salvare in package.json per limitare a una directory.

npm install typescript --save-dev

Canali di installazione

È possibile installare da:

• Canale stabile: npm install typescript
• Canale Beta: npm install typescript@beta
• Dev channel: npm install typescript@next

Compilazione del codice TypeScript

Il comando di compilazione tsc viene fornito con typescript , che può essere utilizzato per compilare il codice.

tsc my-code.ts

Questo crea un file my-code.js .

Compilare usando tsconfig.json

Puoi anche fornire opzioni di compilazione che viaggiano con il tuo codice tramite un file tsconfig.json . Per avviare un nuovo progetto TypeScript, inserire cd nella directory root del progetto in una finestra di terminale ed eseguire tsc --init . Questo comando genererà un file tsconfig.json con opzioni di configurazione minime, simili a quelle di seguito.

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

Con un file tsconfig.json inserito nella radice del progetto TypeScript, è possibile utilizzare il comando tsc per eseguire la compilation.

Ciao mondo

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());

Qui abbiamo una classe, Greeter , che ha un metodo di constructor e greet . Possiamo costruire un'istanza della classe usando la new parola chiave e passare una stringa che vogliamo che il metodo di greet venga inviato alla console. L'istanza della nostra classe Greeter è memorizzata nella variabile greeter che chiameremo quindi il metodo greet .

Sintassi di base

TypeScript è un superset tipizzato di JavaScript, il che significa che tutto il codice JavaScript è un codice TypeScript valido. TypeScript aggiunge molte nuove funzionalità.

TypeScript rende JavaScript più simile a un linguaggio fortemente tipizzato orientato agli oggetti simile a C # e Java. Ciò significa che il codice TypeScript tende ad essere più facile da usare per progetti di grandi dimensioni e che il codice tende ad essere più facile da capire e mantenere. La forte tipizzazione significa anche che la lingua può (ed è) precompilata e che alle variabili non possono essere assegnati valori che sono fuori dal loro intervallo dichiarato. Ad esempio, quando una variabile TypeScript viene dichiarata come numero, non è possibile assegnarvi un valore di testo.

Questa forte tipizzazione e orientamento degli oggetti rende più facile il debug e il mantenimento di TypeScript, e questi erano due dei punti più deboli del JavaScript standard.

Digitare dichiarazioni

È possibile aggiungere dichiarazioni di tipo a variabili, parametri di funzione e tipi di ritorno funzione. Il tipo viene scritto dopo i due punti seguenti il ​​nome della variabile, in questo modo: var num: number = 5; Il compilatore verificherà i tipi (ove possibile) durante la compilazione e segnalerà errori di tipo.

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

I tipi base sono:

• number (sia numeri interi che numeri in virgola mobile)
• string
• boolean
• Array . È possibile specificare i tipi di elementi di un array. Esistono due modi equivalenti per definire i tipi di array: Array<T> e T[] . Per esempio:
  • number[] - matrice di numeri
  • Array<string> - array di stringhe
• Tuple. Le tuple hanno un numero fisso di elementi con tipi specifici.
  • [boolean, string] - tuple dove il primo elemento è un booleano e il secondo è una stringa.
  • [number, number, number] - tupla di tre numeri.
• {} - oggetto, puoi definirne le proprietà o l'indicizzatore
  • {name: string, age: number} - oggetto con il nome e gli attributi di età
  • {[key: string]: number} - un dizionario di numeri indicizzati per stringa
• enum - { Red = 0, Blue, Green } - enumerazione mappata ai numeri
• Funzione. Specificare i tipi per i parametri e il valore restituito:
  • (param: number) => string - funzione che accetta un parametro numerico che restituisce una stringa
  • () => number - funzione senza parametri che restituiscono un numero.
  • (a: string, b?: boolean) => void - funzione che accetta una stringa e opzionalmente un valore booleano senza valore di ritorno.
• any - Permette qualsiasi tipo. Le espressioni che coinvolgono any non sono controllate.
• void - rappresenta "nothing", può essere utilizzato come valore restituito dalla funzione. Solo null e undefined fanno parte del tipo void .
• never
  • let foo: never; -Come il tipo di variabili sotto type guards che non sono mai vere.
  • function error(message: string): never { throw new Error(message); } - Come tipo di ritorno di funzioni che non ritornano mai.

• null - tipo per il valore null . null è implicitamente parte di ogni tipo, a meno che non siano abilitati i controlli nulli severi.

getto

È possibile eseguire il cast esplicito attraverso parentesi angolari, ad esempio:

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

Questo esempio mostra una classe derived che viene trattata dal compilatore come MyInterface . Senza il cast sulla seconda riga il compilatore genererebbe un'eccezione in quanto non comprende someSpecificMethod() , ma il cast attraverso <ImplementingClass>derived suggerisce al compilatore cosa fare.

Un altro modo di lanciare in Typescript è usare la parola chiave as :

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

Dal Typescript 1.6, l'impostazione predefinita utilizza la parola chiave as , perché l'utilizzo di <> è ambiguo nei file .jsx . Questo è menzionato nella documentazione ufficiale di Typescript .

Classi

Le classi possono essere definite e utilizzate nel codice TypeScript. Per saperne di più sulle classi, consultare la pagina della documentazione Classi .

TypeScript REPL in Node.js

Per utilizzare TypeScript REPL in Node.js è possibile utilizzare il pacchetto tsun

Installalo globalmente con

npm install -g tsun

ed esegui nel tuo terminale o prompt dei comandi con il comando tsun

Esempio di utilizzo:

$ 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

Esecuzione di TypeScript usando ts-node

ts-node è un pacchetto npm che consente all'utente di eseguire direttamente i file dattiloscritti, senza la necessità di precompilare usando tsc . Fornisce anche REPL .

Installa il nodo ts globalmente usando

npm install -g ts-node

ts-node non raggruppa il compilatore typescript, quindi potrebbe essere necessario installarlo.

npm install -g typescript

Esecuzione di script

Per eseguire uno script chiamato main.ts , eseguire

ts-node main.ts

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

Esempio di utilizzo

$ ts-node main.ts
Hello world

Esecuzione REPL

Per eseguire REPL eseguire il comando ts-node

Esempio di utilizzo

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

Per uscire da REPL usare command .exit o premere CTRL+C due volte.