TypeScript Samouczek
Rozpoczęcie pracy z TypeScript

Uwagi

Wersje

Instalacja i konfiguracja

tło

TypeScript to typowy nadzbiór JavaScript, który kompiluje się bezpośrednio do kodu JavaScript. Pliki TypeScript zwykle używają rozszerzenia .ts . Wiele IDE obsługuje TypeScript bez żadnej dodatkowej konfiguracji, ale TypeScript można również skompilować z pakietem TypeScript Node.JS z wiersza poleceń.

IDE

Visual Studio

• Visual Studio 2015 zawiera TypeScript.
• Visual Studio 2013 Update 2 lub nowsza zawiera TypeScript, lub można pobrać TypeScript dla wcześniejszych wersji .

Kod Visual Studio

• Visual Studio Code (vscode) zapewnia kontekstowe autouzupełnianie, a także narzędzia do refaktoryzacji i debugowania dla TypeScript. vscode jest sam w sobie zaimplementowany w TypeScript. Dostępne dla Mac OS X, Windows i Linux.

WebStorm

• WebStorm 2016.2 jest wyposażony w TypeScript i wbudowany kompilator. [Webstorm nie jest darmowy]

IntelliJ IDEA

• IntelliJ IDEA 2016.2 obsługuje obsługę IntelliJ IDEA 2016.2 i kompilatora za pośrednictwem wtyczki obsługiwanej przez zespół Jetbrains. [IntelliJ nie jest darmowy]

Atom i atom-maszynopis

• Atom obsługuje TypeScript z pakietem atom-maszynopis .

Wzniosły tekst

• Sublime Text obsługuje TypeScript z pakietem maszynopisu .

Instalowanie interfejsu wiersza poleceń

Zainstaluj Node.js

Zainstaluj pakiet npm globalnie

Możesz zainstalować TypeScript globalnie, aby mieć do niego dostęp z dowolnego katalogu.

npm install -g typescript

lub

Zainstaluj pakiet npm lokalnie

Możesz zainstalować TypeScript lokalnie i zapisać w pliku package.json, aby ograniczyć się do katalogu.

npm install typescript --save-dev

Kanały instalacyjne

Możesz zainstalować z:

• Kanał stabilny: npm install typescript
• Kanał beta: npm install typescript@beta
• Kanał npm install typescript@next : npm install typescript@next

Kompilowanie kodu TypeScript

tsc kompilacji tsc typescript , którego można użyć do kompilacji kodu.

tsc my-code.ts

Spowoduje to my-code.js pliku my-code.js .

Skompiluj używając tsconfig.json

Możesz także podać opcje kompilacji, które podróżują z twoim kodem poprzez plik tsconfig.json . Aby rozpocząć nowy projekt TypeScript, cd do katalogu głównego swojego projektu w oknie terminala i uruchom tsc --init . To polecenie wygeneruje plik tsconfig.json z minimalnymi opcjami konfiguracji, podobnie jak poniżej.

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

Po umieszczeniu pliku tsconfig.json w katalogu głównym projektu TypeScript można użyć komendy tsc aby uruchomić kompilację.

Witaj świecie

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

Tutaj mamy klasę Greeter , która ma constructor i metodę greet . Możemy skonstruować instancję klasy za pomocą new słowa kluczowego i przekazać ciąg znaków, który ma być greet do konsoli przez metodę greet . Instancja naszej klasy Greeter jest przechowywana w zmiennej greeter , którą następnie nazywamy metodą greet .

Podstawowa składnia

TypeScript jest typowym nadzbiorem JavaScript, co oznacza, że cały kod JavaScript jest prawidłowym kodem TypeScript. Oprócz tego TypeScript dodaje wiele nowych funkcji.

TypeScript sprawia, że JavaScript przypomina bardziej silnie typowy, obiektowy język podobny do C # i Java. Oznacza to, że kod TypeScript jest zwykle łatwiejszy w użyciu dla dużych projektów, a kod jest łatwiejszy do zrozumienia i utrzymania. Silne pisanie oznacza także, że język może (i jest) wstępnie skompilowany i że zmiennym nie można przypisywać wartości, które są poza zadeklarowanym zakresem. Na przykład, gdy zmienna TypeScript jest zadeklarowana jako liczba, nie można jej przypisać wartości tekstowej.

To mocne pisanie i orientacja obiektowa ułatwia debugowanie i obsługę TypeScript, a były to dwa najsłabsze punkty standardowego JavaScript.

Wpisz deklaracje

Możesz dodawać deklaracje typu do zmiennych, parametrów funkcji i typów zwracanych funkcji. Typ jest zapisywany po dwukropku po nazwie zmiennej, jak poniżej: var num: number = 5; Kompilator sprawdzi następnie typy (jeśli to możliwe) podczas kompilacji i zgłosi błędy typu.

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

Podstawowe typy to:

• number (zarówno liczby całkowite, jak i liczby zmiennoprzecinkowe)
• string
• boolean
• Array Możesz określić typy elementów tablicy. Istnieją dwa równoważne sposoby definiowania typów tablic: Array<T> i T[] . Na przykład:
  • number[] - tablica liczb
  • Array<string> - tablica ciągów
• Krotki Krotki mają stałą liczbę elementów o określonych typach.
  • [boolean, string] - krotka, w której pierwszy element to boolean, a drugi to łańcuch.
  • [number, number, number] - krotka z trzech liczb.
• {} - obiekt, możesz zdefiniować jego właściwości lub indeksator
  • {name: string, age: number} - obiekt z atrybutami nazwy i wieku
  • {[key: string]: number} - słownik liczb indeksowanych według ciągu
• enum - { Red = 0, Blue, Green } - wyliczenie odwzorowane na liczby
• Funkcjonować. Podajesz typy parametrów i zwracasz wartość:
  • (param: number) => string - funkcja przyjmująca jeden parametr liczbowy zwracający string
  • () => number - funkcja bez parametrów zwracająca liczbę.
  • (a: string, b?: boolean) => void - funkcja przyjmująca ciąg i opcjonalnie boolean bez wartości zwracanej.
• any - Zezwala na dowolny typ. Wyrażenia obejmujące any nie są sprawdzane pod względem typu.
• void - reprezentuje „nic”, może być użyte jako wartość zwracana przez funkcję. Tylko null i undefined są częścią typu void .
• never
  • let foo: never; -Jak typ zmiennych pod osłonami typów, które nigdy nie są prawdziwe.
  • function error(message: string): never { throw new Error(message); } - Jako typ zwracanych funkcji, które nigdy nie zwracają.

• null - wpisz wartość null . null jest domyślnie częścią każdego typu, chyba że włączone są ścisłe kontrole null.

Odlew

Możesz wykonać jawne rzutowanie za pomocą nawiasów kątowych, na przykład:

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

Ten przykład pokazuje klasę derived która jest traktowana przez kompilator jako MyInterface . Bez rzutowania w drugim wierszu kompilator someSpecificMethod() wyjątek, ponieważ nie rozumie someSpecificMethod() , ale rzutowanie za pomocą <ImplementingClass>derived sugeruje kompilatorowi, co należy zrobić.

Innym sposobem rzutowania w Typescript jest użycie słowa kluczowego as :

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

Od Typescript 1.6 domyślnie jest używane słowo kluczowe as , ponieważ użycie <> jest niejednoznaczne w plikach .jsx . Jest to wspomniane w oficjalnej dokumentacji maszynopisu .

Klasy

Klasy mogą być definiowane i używane w kodzie TypeScript. Aby dowiedzieć się więcej o klasach, zobacz stronę dokumentacji klas .

TypeScript REPL w Node.js

Do używania TypeScript REPL w Node.js można użyć pakietu tsun

Zainstaluj go globalnie za pomocą

npm install -g tsun

i uruchom w terminalu lub wierszu polecenia za tsun polecenia tsun

Przykład użycia:

$ 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

Uruchamianie TypeScript za pomocą ts-node

ts-node to pakiet npm, który pozwala użytkownikowi na bezpośrednie uruchamianie plików maszynopisu, bez potrzeby tsc kompilacji za pomocą tsc . Zapewnia również REPL .

Zainstaluj ts-node globalnie, używając

npm install -g ts-node

ts-node nie zawiera kompilatora maszynopisu, więc może być konieczne jego zainstalowanie.

npm install -g typescript

Wykonywanie skryptu

Aby wykonać skrypt o nazwie main.ts , uruchom

ts-node main.ts

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

Przykładowe użycie

$ ts-node main.ts
Hello world

Uruchamianie REPL

Aby uruchomić REPL, uruchom polecenie ts-node

Przykładowe użycie

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

Aby wyjść z REPL, użyj polecenia .exit lub naciśnij dwukrotnie CTRL+C