TypeScriptIniziare con TypeScript


Osservazioni

TypeScript mira a essere un superset di JavaScript che traspone in JavaScript. Generando codice compatibile con ECMAScript, TypeScript può introdurre nuove funzionalità linguistiche mantenendo la compatibilità con i motori JavaScript esistenti. ES3, ES5 ed ES6 sono attualmente obiettivi supportati.

I tipi opzionali sono una caratteristica primaria. I tipi consentono il controllo statico con l'obiettivo di trovare gli errori in anticipo e possono migliorare gli strumenti con funzioni come il refactoring del codice.

TypeScript è un linguaggio di programmazione open source e multipiattaforma sviluppato da Microsoft. Il codice sorgente è disponibile su GitHub .

Versioni

Versione Data di rilascio
2.4.1 2017/06/27
2.3.2 2017/04/28
2.3.1 2017/04/25
2.3.0 beta 2017/04/04
2.2.2 2017/03/13
2.2 2017/02/17
2.1.6 2017/02/07
2.2 beta 2017/02/02
2.1.5 2017/01/05
2.1.4 2016/12/05
2.0.8 2016/11/08
2.0.7 2016/11/03
2.0.6 2016/10/23
2.0.5 2016/09/22
2.0 Beta 2016/07/08
1.8.10 2016/04/09
1.8.9 2016/03/16
1.8.5 2016/03/02
1.8.2 2016/02/17
1.7.5 2015/12/14
1.7 2015/11/20
1.6 2015/09/11
1.5.4 2015/07/15
1.5 2015/07/15
1.4 2015/01/13
1.3 2014/10/28
1.1.0.1 2014/09/23

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 .

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 .

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

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

Testo sublime

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.

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.

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