Samouczek języka TypeScript: poznaj podstawy języka TypeScript

TypeScript jest silnie wpisanym nadzbiorem który kompiluje się do zwykłego JavaScript. Możesz używać tego języka do tworzenia aplikacji w języku JavaScript. Ponadto można go uruchomić w dowolnej przeglądarce, dowolnym hoście i dowolnym systemie operacyjnym. W tym samouczku języka TypeScript zagłębimy się w język TypeScript i zrozumiemy podstawy w następującej kolejności:

• Wprowadzenie do języka TypeScript
• Typy TypeScript
• Zmienne
• Operatorzy
• Pętle
• Funkcje
• Smyczki
• Tablice
• Interfejsy
• Zajęcia
• Obiekty
• Przykład użycia TypeScript

Wprowadzenie do języka TypeScript

TypeScript to nadzbiór typu JavaScript, który kompiluje się do zwykłego kodu JavaScript. TypeScript jest czysto obiektowy z klasami, interfejsami i statycznymi typami języków programowania, takimi jak C # lub . Wymaga kompilatora do skompilowania i wygenerowania w pliku JavaScript. Zasadniczo, TypeScript jest wersją JavaScript ES6 z kilkoma dodatkowymi funkcjami.

Kod TypeScript jest zapisywany w pliku z rozszerzeniem .ts rozszerzenie a następnie skompilowany do JavaScript za pomocą kompilatora. Możesz napisać plik w dowolnym edytorze kodu, a kompilator musi być zainstalowany na Twojej platformie. Po instalacji polecenie tsc .ts kompiluje kod TypeScript do zwykłego pliku JavaScript.

Składnia:

var message: string = 'Witaj w Edurece!' console.log (wiadomość)

Podczas kompilacji generuje następujący kod JavaScript:

// Wygenerowane przez maszynopis 1.8.10 var message = 'Witaj w Edurece!' console.log (wiadomość)

Funkcje języka TypeScript

• Międzyplatformowe: Kompilator TypeScript można zainstalować w dowolnym systemie operacyjnym, takim jak Windows, MacOS i Linux.

  
  
  

• Język zorientowany obiektowo : TypeScript udostępnia funkcje, takie jak Zajęcia , Interfejsy i moduły. W ten sposób może pisać kod zorientowany obiektowo do programowania zarówno po stronie klienta, jak i po stronie serwera.

• Statyczne sprawdzanie typu : TypeScript używa wpisywania statycznego i pomaga sprawdzać typ w czasie kompilacji. W ten sposób można znaleźć błędy podczas pisania kodu bez uruchamiania skryptu.

• Opcjonalne wpisywanie statyczne : TypeScript umożliwia również opcjonalne wpisywanie statyczne w przypadku korzystania z dynamicznego pisania w języku JavaScript.

• Manipulacja DOM : Możesz użyć TypeScript do manipulowania DOM w celu dodawania lub usuwania elementów.

• ES 6 Funkcje : TypeScript zawiera większość funkcji planowanego ECMAScript 2015 (ES 6, 7), takich jak klasa, interfejs, funkcje strzałek itp.

Zalety korzystania z języka TypeScript

• TypeScript to szybki, prosty, łatwy do nauczenia i działa w dowolnej przeglądarce lub silniku JavaScript.

• To jest podobny do JavaScript i używa tej samej składni i semantyki.

• Pomaga to programistom backendu pisać front-end kodować szybciej .

• Kod TypeScript można wywołać z pliku istniejący kod JavaScript . Ponadto działa z istniejącymi frameworkami i bibliotekami JavaScript bez żadnych problemów.

• Plik definicji z rozszerzeniem .d.ts zapewnia obsługę istniejących bibliotek JavaScript, takich jak Jquery, D3.js itd. Tak więc kod TypeScript może dodawać pliki Biblioteki JavaScript używanie definicji typów w celu skorzystania z zalet sprawdzania typów, autouzupełniania kodu i dokumentacji w istniejących dynamicznie typowanych bibliotekach JavaScript.

• Zawiera funkcje z ES6 i ES7 które mogą działać w silnikach JavaScript na poziomie ES5, takich jak Node.js .

Teraz, gdy zrozumiałeś już, czym jest TypeScript, przejdźmy do tego samouczka języka TypeScript i przyjrzyjmy się różnym typom.

Typy TypeScript

System typów reprezentuje różne typy wartości obsługiwane przez język. Sprawdza ważność dostarczonych wartości zanim zostaną zapisane lub zmodyfikowane przez program.

Można go podzielić na dwa typy, takie jak:

• Wbudowany : Obejmuje liczbę, ciąg, wartość logiczną, void, null i undefined.
• Określony przez użytkownika : Obejmuje wyliczenia (wyliczenia), klasy, interfejsy, tablice i krotkę.

Przejdźmy teraz do tego samouczka języka TypeScript i dowiedzmy się więcej o zmiennych.

Samouczek dotyczący języka TypeScript: zmienne

Zmienna to nazwana przestrzeń w pamięci, która służy do przechowywania wartości.

Składnia typu służąca do deklarowania zmiennej w języku TypeScript zawiera dwukropek (:) po nazwie zmiennej, po którym następuje jej typ. Podobnie jak w przypadku JavaScript, używamy rozszerzenia słowo kluczowe var zadeklarować zmienną.

Istnieją cztery opcje, gdy deklarujemy zmienną:

var [identyfikator]: [adnotacja typu] = wartość

var [identyfikator]: [adnotacja typu]

var [identyfikator] = wartość

var [zidentyfikuj]

Przykład:

var name: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('id pracownika' + empid)

Podczas kompilacji wygeneruje następujący kod JavaScript:

// Wygenerowane przez maszynopis 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('id pracownika:' + empid)

Wynik:

imię: Daisy
identyfikator pracownika: 1001

Przejdźmy teraz do następnego tematu naszego samouczka dotyczącego języka TypeScript.

Operatorzy

Operator służy do definiowania funkcji, które będą wykonywane na danych. Dane, na których pracują operatorzy, nazywane są operandami. Istnieją różne typy plików operatorzy w języku TypeScript, na przykład:

• Operatory arytmetyczne
• Operatory logiczne
• Operatorzy relacyjni
• Operatory bitowe
• Operatory przypisania

Operatory arytmetyczne

Przykład:

var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('Sum:' + res) res = num1 - num2 console.log ('Różnica:' + res) res = num1 * num2 console.log ('Produkt:' + res)

Wynik:

Suma: 12
Różnica: 8
Produkt: 20

Operatory logiczne

Przykład:

var avg: number = 20 var procent: number = 90 console.log ('Wartość średniej:' + avg + ', wartość procentu:' + procent) var res: boolean = ((średnio> 50) && (procent> 80 )) console.log ('(średnia> 50) && (procent> 80):', res)

Wynik:

Wartość średnia: 20, wartość procentowa: 90
(śr.> 50) && (procent> 80): fałsz

Operatorzy relacyjni

Przykład:

var num1: number = 10 var num2: number = 7 console.log ('Wartość num1:' + num1) console.log ('Wartość num2:' + num2) var res = num1> num2 console.log ('num1 większe niż num2: '+ res) res = num1
 Wynik: 
Wartość num1: 10 
 Wartość num2: 7 
 num1 większe niż num2: prawda 
 num1 mniejsze niż num2: false
 Operatory bitowe 
 Operatorzy 
 Opis 
 Bitowe AND (&) 
wykonuje operację logiczną AND na każdym bicie argumentów całkowitych.
 Bitowe LUB (|) 
Wykonuje operację logiczną OR na każdym bicie argumentów całkowitych.
 Bitowy XOR (^) 
Wykonuje logiczną operację OR na wyłączność na każdym bicie argumentów całkowitych.
 NIE (~) 
Jest to operator jednoargumentowy i działa poprzez odwrócenie wszystkich bitów w operandzie.
 Przesunięcie w lewo (<<) 
Przenosi wszystkie bity w pierwszym operandzie w lewo o liczbę miejsc określoną w drugim operandzie.
 Prawy Shift (>>) 
Wartość lewego operandu jest przesuwana w prawo o liczbę bitów określoną przez prawy operand.
 Prawy Shift z zerem (>>>) 
co to jest charat w java
Działa podobnie do operatora >>, z tym wyjątkiem, że bity przesunięte po lewej stronie są zawsze równe zero.
 Przykład: 
var a: number = 2 // prezentacja bitowa 10 var b: number = 3 // prezentacja bitowa 11 var result result = (a & b) console.log ('(a & b) =>', result) result = ( a | b) console.log ('(a | b) =>', wynik)
 Wynik: 
(a & b) => 2 
 (a | b) => 3
 Operatory przypisania 
 Operatorzy 
 Opis 
 Proste przypisanie (=) 
Przypisuje wartości z prawego operandu do lewego operandu
 Dodaj i przypisz (+ =) 
Dodaje prawy operand do lewego operandu i przypisuje wynik do lewego operandu.
 Odejmowanie i przypisywanie (- =) 
Odejmuje prawy operand od lewego operandu i przypisuje wynik lewemu operandowi.
 Mnożenie i przypisywanie (* =) 
Mnoży prawy operand przez lewy operand i przypisuje wynik lewemu operandowi.
 Dzielenie i przypisywanie (/ =) 
Dzieli lewy operand z prawym operandem i przypisuje wynik lewemu operandowi.
 Przykład: 
var a: number = 12 var b: number = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b console .log ('a- = b:' + a)
 Wynik: 
a = b: 10 
 a + = b: 20 
 a - = b: 10
To byli różni operatorzy. Przejdźmy teraz do naszego samouczka języka TypeScript i poznajmy pętle.
 Pętle 
Mogą wystąpić sytuacje, w których blok kodu będzie musiał zostać wykonany kilka razy. ZA pętla instrukcja umożliwia wielokrotne wykonanie instrukcji lub grupy instrukcji.
Pętle TypeScript można sklasyfikować jako:
 Dla pętli 
Plik dla pętli jest implementacją określonej pętli.
 Składnia: 
for (pierwsze wyrażenie drugie wyrażenie trzecie wyrażenie) {// instrukcje do powtarzania}
Tutaj pierwsze wyrażenie jest wykonywane przed rozpoczęciem pętli. Drugie wyrażenie jest warunkiem wykonania pętli. Trzecie wyrażenie jest wykonywane po wykonaniu każdego bloku kodu.
 Przykład: 
dla (niech i = 0 i<2 i++) { console.log ('Execute block statement' + i) }
 Wynik: 
Wykonaj instrukcję blokową 0 
Wykonaj instrukcję blokową 1
 While Loop 
Pętla while wykonuje instrukcje za każdym razem, gdy określony warunek przyjmuje wartość true.
 Składnia: 
while (wyrażenie warunku) {// blok kodu do wykonania}
 Przykład: 
niech i: liczba = 1 while (i<3) { console.log( 'Block statement execution no.' + i ) i++ }
 Wynik: 
Wykonanie instrukcji blokowej nr 1 
Wykonanie instrukcji blokowej nr 2
 Zrób ... Podczas Pętli 
Pętla do & hellipwhile jest podobna do pętli while, z tą różnicą, że nie ocenia warunku po pierwszym wykonaniu pętli.
 Składnia: 
do {// blok kodu do wykonania} while (wyrażenie warunku)
 Przykład: 
  
let i: number = 1 do {console.log ('Nr wykonania instrukcji blokowej' + i) i ++} while (i<3)
 Wynik: 
Wykonanie instrukcji blokowej nr 1 
Wykonanie instrukcji blokowej nr 2
Oprócz tego istnieją instrukcje break i continue w języku TypeScript, które są używane w pętli.
 Instrukcja Break 
Instrukcja break służy do przejęcia kontroli nad konstrukcją. Użycie instrukcji break w pętli pomaga programowi wyjść z pętli.
 Przykład: 
var i: number = 1 while (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop
 Wynik: 
Pierwsza wielokrotność 5 między 1 a 10 to: 5
 Instrukcja Continue 
Instrukcja continue pomija kolejne instrukcje w bieżącej iteracji i przenosi sterowanie z powrotem na początek pętli.
 Przykład: 
var num: number = 0 var count: number = 0 for (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)
 Wynik: 
Liczba nieparzystych wartości od 0 do 10 wynosi: 5
To były różne pętle w TypeScript. Przejdźmy teraz do naszego samouczka TypeScript i poznajmy funkcje.
 Funkcje 
W JavaScript, Funkcje są jedną z najważniejszych części, ponieważ jest to funkcjonalny język programowania. Funkcje zapewniają, że program jest możliwy do utrzymania i wielokrotnego użytku oraz zorganizowany w czytelne bloki. Chociaż TypeScript zapewnia koncepcję klas i modułów, funkcje nadal są integralną częścią języka.
 Nazwane funkcje 
Nazwana funkcja służy do deklarowania i wywoływania funkcji według jej podanej nazwy.
 Przykład: 
function display () {console.log ('Funkcja TypeScript')} display ()
 Wynik: 
Funkcja TypeScript
 Funkcja anonimowa 
Funkcja anonimowa to taka, która jest zdefiniowana jako wyrażenie. To wyrażenie jest przechowywane w zmiennej. Te funkcje są wywoływane przy użyciu nazwy zmiennej, w której jest przechowywana.
 Przykład: 
let greeting = function () {console.log ('TypeScript Function')} greeting ()
 Wynik: 
Funkcja TypeScript
 Funkcja strzałki 
Notacje grubych strzałek są używane dla funkcji anonimowych, tj. Dla wyrażeń funkcyjnych. W innych językach są one również nazywane funkcjami lambda.
 Składnia: 
(param1, param2, ..., paramN) => wyrażenie
Użycie grubej strzałki (=>) eliminuje potrzebę używania słowa kluczowego „funkcja”. Parametry są przekazywane w nawiasach kątowych, a wyrażenie funkcyjne jest zawarte w nawiasach klamrowych {}.
 Przykład: 
let sum = (x: liczba, y: liczba): liczba => {powrót x + y} sum (10, 30) // zwraca 40
 Przeciążanie funkcji 
Język TypeScript zapewnia koncepcję przeciążania funkcji. W ten sposób można mieć wiele funkcji o tej samej nazwie, ale o różnych typach parametrów i zwracanym typie.
 Przykład: 
function add (a: string, b: string): string function add (a: number, b: number): number return a + b} add ('Hello', 'Edureka') // zwraca 'Hello Edureka' add ( 10, 10) // zwraca 20
W powyższym przykładzie mamy tę samą funkcję add () z dwiema deklaracjami funkcji i jedną implementacją funkcji. Pierwsza sygnatura ma dwa parametry typu string, natomiast druga sygnatura ma dwa parametry typu numer.
To są różne typy funkcji. Przejdźmy teraz do naszego samouczka języka TypeScript i poznajmy ciągi znaków w języku TypeScript.
 Samouczek dotyczący języka TypeScript: ciągi 
Plik  to inny prymitywny typ danych używany do przechowywania danych tekstowych. Wartości ciągów są otoczone pojedynczymi cudzysłowami lub podwójnymi cudzysłowami.
 Składnia: 
var nazwa_zmiennej = nowy ciąg (ciąg)
Istnieją różne właściwości metod dostępnych w obiekcie String, takie jak:
 Budowniczy - Zwraca odniesienie do funkcji String, która utworzyła obiekt
 Długość - Zwraca długość ciągu
 Prototyp - Ta właściwość umożliwia dodawanie właściwości i metod do obiektu
 Przykład: 
let name = new String ('Witaj w Edureka!') console.log ('Wiadomość:' + nazwa) console.log ('Długość:' + nazwa.length)
 Wynik: 
Wiadomość: Witamy w Edurece! 
 Długość: 19
 Metody ciągów 
Lista metod w obiekcie String obejmuje:
 metoda 
 Opis 
 charAt () 
Zwraca znak o określonym indeksie
 charCodeAt () 
Zwraca liczbę wskazującą wartość Unicode znaku o podanym indeksie
 concat () 
Łączy tekst dwóch ciągów i zwraca nowy ciąg
 indeks() 
Zwraca indeks w wywołującym obiekcie String pierwszego wystąpienia określonej wartości
 lastIndexOf () 
Zwraca indeks w wywołującym obiekcie String ostatniego wystąpienia określonej wartości
 mecz() 
Służy do dopasowywania wyrażenia regularnego do ciągu
 localeCompare () 
Zwraca liczbę wskazującą, czy ciąg odniesienia występuje przed, czy po, czy jest taki sam jak podany ciąg w kolejności sortowania
 Szukaj() 
Spowoduje to wyszukanie dopasowania między wyrażeniem regularnym a określonym ciągiem
 zastąpić() 
Służy do znajdowania dopasowania między wyrażeniem regularnym a ciągiem znaków oraz do zastępowania dopasowanego podciągu nowym podciągiem
 plasterek() 
Wyodrębnia sekcję ciągu i zwraca nowy ciąg
 rozdzielać() 
Dzieli obiekt String na tablicę ciągów, rozdzielając ciąg na podciągi
 substr () 
Zwraca znaki w ciągu rozpoczynającym się w określonej lokalizacji przez określoną liczbę znaków
 podciąg () 
Zwraca znaki w ciągu między dwoma indeksami do ciągu
 toLocaleLowerCase () 
Znaki w ciągu są konwertowane na małe litery z poszanowaniem bieżącego ustawienia narodowego
 toLocaleUpperCase () 
Znaki w ciągu są konwertowane na duże litery z zachowaniem aktualnych ustawień regionalnych
 toLowerCase () 
Zwraca wartość ciągu wywołującego przekonwertowaną na małe litery
 toUpperCase () 
Zwraca wywołujący ciąg znaków przekonwertowany na wielkie litery
 toString () 
Zwraca ciąg znaków reprezentujący określony obiekt
 wartość() 
Zwraca pierwotną wartość określonego obiektu
 Przykład: 
let str: string = 'Witamy w Edureka' str.charAt (0) // zwraca 'w' str.charAt (2) // zwraca 'l' 'Witaj w Edureka'.charAt (2) zwraca' l 'let str1 : string = 'witamy' let str2: string = 'Edureka' str1.concat (str2) // zwraca 'welcomeEdureka' str1.concat ('', str2) // zwraca 'witamy Edureka' str1.concat ('' to ' ') // zwraca' witaj w '
Teraz, gdy wiesz już o łańcuchach, przejdźmy do tego samouczka języka TypeScript i poznaj tablice.
 Tablice w TypeScript 
Na szyk to specjalny typ danych, który przechowuje wiele wartości różnych typów danych sekwencyjnie przy użyciu specjalnej składni. Elementy tablicy są identyfikowane za pomocą unikatowej liczby całkowitej zwanej indeksem dolnym lub indeksem elementu.
 Składnia: 
var nazwa_tablicy [: typ_danych] // deklaracja nazwa_tablicy = [wart1, wart2, wart ..] // inicjalizacja
 Przykład: 
let names: Array names = ['John', 'Daisy', 'Rachel'] let ids: Array ids = [101, 700, 321]
 Metody tablicowe 
Oto lista różnych metod Array, które można wykorzystać do różnych celów:
 metoda 
 Opis 
 filtr() 
Tworzy nową tablicę ze wszystkimi elementami tej tablicy, dla których podana funkcja filtrująca zwraca wartość true
 każdy() 
Zwraca wartość true, jeśli każdy element w tej tablicy spełnia podaną funkcję testującą
 concat () 
Zwraca nową tablicę składającą się z tej tablicy połączonej z innymi tablicami
 indeks() 
Zwraca pierwszy lub najmniejszy indeks elementu w tablicy równy określonej wartości
 dla każdego() 
Wywołuje funkcję dla każdego elementu tablicy
 Przystąp() 
Łączy wszystkie elementy tablicy w ciąg
 lastIndexOf () 
Zwraca ostatni lub największy indeks elementu w tablicy, równy określonej wartości
 mapa() 
Tworzy nową tablicę z wynikami wywołania podanej funkcji dla każdego elementu w tej tablicy
 Pchać() 
Dodaje jeden lub więcej elementów na końcu tablicy i zwraca nową długość tablicy
 Muzyka pop () 
Usuwa ostatni element z tablicy i zwraca ten element
 zmniejszyć() 
Zastosuj funkcję jednocześnie do dwóch wartości tablicy od lewej do prawej, aby zredukować ją do jednej wartości
 redukujRight () 
Zastosuj funkcję jednocześnie do dwóch wartości tablicy od prawej do lewej, aby zredukować ją do jednej wartości
 odwrócić() 
Odwraca kolejność elementów tablicy
 Zmiana() 
Usuwa pierwszy element z tablicy i zwraca ten element
 plasterek() 
Wyodrębnia sekcję tablicy i zwraca nową tablicę
 trochę() 
Zwraca prawdę, jeśli co najmniej jeden element w tej tablicy spełnia podaną funkcję testującą
 sortować() 
Sortuje elementy tablicy
 toString () 
Zwraca ciąg znaków reprezentujący tablicę i jej elementy
 splatać() 
Dodaje i / lub usuwa elementy z tablicy
 unshift () 
Dodaje jeden lub więcej elementów na początek tablicy i zwraca nową długość tablicy
 Przykład: 
var name: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // output: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // output: Tara name.push ('Rachel') console.log (name) // output: ['John', 'Daisy', 'Rachel']
Przejdźmy teraz do tego samouczka języka TypeScript i poznajmy interfejsy.
 Interfejsy TypeScript 
Interfejs to struktura definiująca kontrakt w Twojej aplikacji. Definiuje składnię klas do naśladowania. Zawiera tylko deklarację członków, a definiowanie członków jest obowiązkiem klasy pochodnej.
 Przykład: 
interfejs Pracownik {empID: number empName: string getSalary: (number) => number // strzałka function getManagerName (number): string}
W powyższym przykładzie Pracownik interfejs zawiera dwie właściwości empID i empName . Zawiera również deklarację metody getSalaray za pomocą funkcja strzałki który zawiera jeden parametr liczbowy i typ zwracanej liczby. Plik getManagerName metoda jest deklarowana przy użyciu normalnej funkcji.
 Maszynopis  Zajęcia 
TypeScript wprowadził klasy, aby mogły korzystać z zalet technik zorientowanych obiektowo, takich jak hermetyzacja i abstrakcja. Klasa w TypeScript jest kompilowana do zwykłych funkcji JavaScript przez kompilator TypeScript do pracy na różnych platformach i przeglądarkach.
Klasa obejmuje:
 Budowniczy 
 Nieruchomości 
 Metody 
 Przykład: 
class Pracownik {empID: number empName: konstruktor string (ID: numer, nazwa: string) {this.empName = name this.empID = ID} getSalary (): number {return 40000}}
 Dziedzictwo 
Obsługa języka TypeScript Dziedzictwo ponieważ jest to zdolność programu do tworzenia nowych klas z istniejącej klasy. Klasa rozszerzana w celu tworzenia nowszych klas nazywana jest klasą nadrzędną lub superklasą. Nowo utworzone klasy nazywane są klasami podrzędnymi lub podrzędnymi.
Klasa dziedziczy z innej klasy za pomocą słowa kluczowego „extends”. Klasy podrzędne dziedziczą wszystkie właściwości i metody z wyjątkiem prywatnych elementów członkowskich i konstruktorów z klasy nadrzędnej. Ale TypeScript nie obsługuje wielokrotnego dziedziczenia.
 Składnia: 
jak zrobić głęboką kopię w java
class nazwa_klasy_podrzędnej rozszerza nazwa_klasy_podrzędnej
 Przykład: 
class Person {name: string constructor (name: string) {this.name = name}} class Pracownik rozszerza Person {empID: number constructor (empID: number, name: string) {super (name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} let emp = new Employee (701, 'Jason') emp.displayName () // Imię = Jason, identyfikator pracownika = 701
Teraz, gdy wiesz już o klasach, przejdźmy dalej z tym samouczkiem języka TypeScript i poznaj obiekty.
 Obiekty w TypeScript 
Obiekt to instancja zawierająca inny zestaw par klucz-wartość. Wartości mogą być wartościami skalarnymi lub funkcjami, a nawet tablicą innych obiektów.
 Składnia: 
var nazwa_obiektu = {klucz1: „wartość1”, // wartość skalarna klucz2: „wartość”, klucz3: funkcja () {// funkcje}, klucz4: [„content1”, „content2”]
Obiekt może zawierać wartości skalarne, funkcje i struktury, takie jak tablice i krotki.
 Przykład: 
var person = {imię: 'Danny', lastname: 'Green'} // dostęp do wartości obiektu console.log (person.firstname) console.log (person.lastname)
Podczas kompilacji wygeneruje ten sam kod w JavaScript.
 Wynik: 
Danny 
 Zielony
To były różne ważne elementy TypeScript. Teraz przejdźmy do tego samouczka języka TypeScript i przyjrzyjmy się przykładowi, aby zrozumieć przypadek użycia.
 Samouczek dotyczący języka TypeScript: przypadek użycia 
Tutaj dowiemy się, jak przekonwertować istniejący plik  do TypeScript.
Kiedy kompilujemy plik TypeScript, tworzy odpowiedni plik JavaScript o tej samej nazwie. Tutaj musimy upewnić się, że nasz oryginalny plik JavaScript, który działa jako dane wejściowe, nie może znajdować się w tym samym katalogu, aby TypeScript ich nie nadpisał.
Proces migracji z JavaScript do TypeScript obejmuje następujące kroki:
 1. Dodaj plik tsconfig.json do projektu 
Musisz dodać plik tsconfig.json do projektu. TypeScript używa pliku tsconfig.json do zarządzania opcjami kompilacji projektu, takimi jak pliki, które chcesz uwzględnić i wykluczyć.
{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}
 2. Zintegruj z narzędziem do budowania 
Większość projektów JavaScript ma zintegrowane narzędzie do kompilacji, takie jak gulp lub webpack. Możesz zintegrować projekty z webpackiem w następujący sposób:
Uruchom następujące polecenie na terminalu:
$ npm zainstaluj awesome-typescript-loader source-map-loader
W integracji z pakietem internetowym używasz niesamowitego programu ładującego typy skryptów w połączeniu z programem ładującym mapę źródła, aby ułatwić debugowanie kodu źródłowego.
Po drugie, połącz właściwość config modułu w naszym pliku webpack.config.js, aby uwzględnić programy ładujące.
 3. Przenieś wszystkie pliki .js do plików .ts 
Na tym etapie musisz zmienić nazwę pliku .js na plik .ts. Podobnie, jeśli plik używa JSX, będziesz musiał zmienić jego nazwę na .tsx. Teraz, jeśli otworzymy ten plik w edytorze obsługującym TypeScript, niektóre kody mogą zacząć powodować błędy kompilacji. Tak więc konwertowanie plików jeden po drugim umożliwia łatwiejszą obsługę błędów kompilacji. Jeśli TypeScript znajdzie jakiekolwiek błędy kompilacji podczas konwersji, nadal będzie w stanie przetłumaczyć kod.
 4. Sprawdź błędy 
Po przeniesieniu pliku js do pliku ts, TypeScript natychmiast rozpocznie sprawdzanie typów naszego kodu. Więc możesz otrzymać błędy diagnostyczne w kodzie JavaScript.
 5. Korzystaj z bibliotek JavaScript innych firm 
Projekty JavaScript korzystają z bibliotek innych firm, takich jak  lub Lodash. Aby skompilować pliki, TypeScript musi znać typy wszystkich obiektów w tych bibliotekach. Pliki definicji typu TypeScript dla bibliotek JavaScript są już dostępne pod adresem DefinitelyTyped. Nie ma więc potrzeby instalowania tego typu na zewnątrz. Musisz zainstalować tylko te typy, które są używane w naszym projekcie.
W przypadku jQuery możesz zainstalować definicję:
$ npm install @ types / jquery
Następnie wprowadź zmiany w projekcie JavaScript, uruchom narzędzie kompilacji. Teraz powinieneś mieć projekt TypeScript skompilowany do zwykłego JavaScript, który można uruchomić w przeglądarce.
W ten sposób doszliśmy do końca tego samouczka języka TypeScript. Mam nadzieję, że zrozumiałeś wszystkie ważne elementy TypeScript.
 Sprawdź     przez Edureka.  Szkolenie w zakresie certyfikacji w zakresie rozwoju sieci pomoże Ci nauczyć się, jak tworzyć imponujące witryny internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i interfejsów API Google oraz wdrażać je w Amazon Simple Storage Service (S3). 
 Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy „Samouczka języka TypeScript”, a my skontaktujemy się z Tobą.