TypeScript Samouczek: Co to jest, interfejs, wyliczenie, tablica z przykładem

Co to jest TypeScript?

TypeScript jest nadzbiorem JavaScenariusz. TypeScript to czysto obiektowy język programowania, który obsługuje klasy, interfejsy itp. Jest to język open source opracowany przez Microsoft który statycznie kompiluje kod do JavaSkrypt. Może być łatwo uruchomiony w przeglądarce lub Nodejs.

Wszystkie najnowsze funkcje wydane dla ECMAScript są obsługiwane w TypeScript i oprócz tego TypeScript ma własne funkcje obiektowe, takie jak interfejsy, deklaracje otoczenia, dziedziczenie klas itp., co pomaga w tworzeniu dużych aplikacji, co w innym przypadku byłoby trudne do zrobienia JAVASCRIPT.

Jak pobrać i zainstalować TypeScript

Oto krok po kroku proces pobierania i instalacji TypeScript:

Krok 1) Pobierz i zainstaluj Nodejs

Przejdź do oficjalnej strony nodejs: https://nodejs.org/en/download/ i pobierz i zainstaluj nodejs zgodnie ze swoim systemem operacyjnym. Szczegółowe instrukcje dotyczące pobierania nodejs są dostępne tutaj: https://www.guru99.com/download-install-node-js.html

Krok 2) Sprawdź wersję Nodejs i npm

Aby sprawdzić, czy zainstalowane są nodejs i npm, po prostu sprawdź wersję w wierszu poleceń.

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Masz więc zainstalowany nodejs v10 i npm 6.

Krok 3) TypeScript instalacja sprzętu

Utwórz katalog projektu typeproject/ i uruchom npm init, jak pokazano w poleceniu poniżej:

npm init

Krok 4) Rozpocznij instalację

Teraz utworzymy pakiet .json, który będzie przechowywać zależności dla naszego projektu.

Po zakończeniu instalacji TypeScript w sposób następujący:

npm -g install typescript

Powyższe polecenie zajmie się instalacją TypeScriptDodanie „-g” do npm install spowoduje instalację TypeScript globalnie. Zaletą używania -g jest to, że będziesz mógł go używać TypeScript tsc polecenie z dowolnego katalogu, ponieważ jest ono instalowane globalnie. Jeśli nie chcesz instalować TypeScript globalnie użyj poniższego polecenia:

npm --save install typescript

Utwórz folder src/ w katalogu projektu i w folderze src/ utwórz TypeScript plik test.ts i napisz swój kod.

Przykład: test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

skompilować TypeScript kod do Javascript

Aby skompilować powyższy kod użyj następującego polecenia:

If TypeScript jest instalowany globalnie, użyj poniższego polecenia:

tsc test.ts

If TypeScript jest zainstalowany lokalnie w twoim projekcie, musisz użyć ścieżki TypeScript z node_modules, jak pokazano:

node_modules/typescript/bin/tsc test.ts

Powyższe polecenie utworzy plik test.js i skompiluje kod do JavaScript.

Przykład: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Wykonać Javascript za pomocą Nodejsa

W tym TypeScript tutorial, wykonamy test.js w nodejs w następujący sposób:

D:\typeproject\src>node test.js
15

Wartość konsoli jest wyświetlana po wykonaniu testu.js

Wykonać JavaSkrypt w przeglądarce

Przykład:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

skompilować TypeScript kod do Javascript przy użyciu wersji EcmaScript

TypeScript obsługuje wszystkie wydane funkcje Ecmascript, a deweloperzy mogą używać ich podczas kodowania. Jednak nie wszystkie nowe funkcje są obsługiwane w starszych przeglądarkach, przez co musisz skompilować javascript do starszej wersji Ecmascript. TypeScript udostępnia opcje kompilatora, które mogą to zrobić.

Przykład: test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Aby skompilować do wybranej wersji ES, możesz użyć opcji target lub t w swoim poleceniu w następujący sposób:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Domyślnie celem jest ES3. Jeśli chcesz to zmienić, możesz użyć powyższego polecenia.

Obecnie będziemy używać w tym ES6 TypeScript samouczek jako cel:

tsc --target ES6  test.ts

test.ts do test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Kod pozostaje taki, jaki jest, ponieważ użyta funkcja strzałkowa jest funkcją ES6 i taka sama po skompilowaniu do ES6 nie ulega zmianie.

Domyślnie celem jest ES3, więc bez celu otrzymasz test.js jako:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Zatem tutaj gruba strzałka została zmieniona na normalną anonimową funkcję.

Zmienne w TypeScript

Zmienne służą do przechowywania wartości, a wartość może być ciągiem znaków, liczbą, wartością logiczną lub wyrażeniem. Jeśli chodzi o zmienne w TypeScript, są podobne do JAVASCRIPT. Nauczmy się więc deklarować i przypisywać wartości zmiennym w TypeScript.

Zmiennych nie można używać w kodzie bez zdefiniowania. Aby zadeklarować zmienną, której możesz użyć

było słowo kluczowe,

niech keyword

const keyword

Praca ze zmiennymi w TypeScript jest podobny do javascript, a użytkownicy znający javascript uznają go za bardzo łatwy. Tylko zmienne takie jak niech i const nie są zbyt często używane w porównaniu do było.

Deklarowanie zmiennych za pomocą var

Składnia:

var firstname = "Roy";

Przyjrzyjmy się kilku TypeScript przykłady ilustrujące działanie słowa kluczowego var i zakres deklarowanych zmiennych było słowo kluczowe.

1 przykład:

var  k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function.
    return k++;
}

test(); // output as  1
test(); // output as 2
alert(c); // will throw error , Uncaught ReferenceError: c is not defined

2 przykład:

var t = 0; // variable t is declared in global scope.
function test() {    
    var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    return t;
}
test(); // will return 10.
console.log(t); // will console 0.

3 przykład:

var i = 0;
function test() {
    if (i>0) {
      var t = 1;
    }
    return t;
}

test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

Deklarowanie zmiennych za pomocą let

Kolekcja TypeScript składnia let jest podana poniżej:

Składnia:

let name="Roy";

Działanie niech zmienna jest prawie taka sama jak było, ale z niewielką różnicą i zrozumie to samo, używając an TypeScript przykład.

Przykład:

let i = 1;
function test() {
    if (i>0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error : Uncaught ReferenceError: t is not defined.

Powyżej TypeScript example zgłasza błąd, ale to samo działałoby dobrze, gdyby było z było słowo kluczowe. Używanie zmiennych niech są dostępne w zadeklarowanym zakresie bloku, na przykład zmienna t jest dostępna tylko wewnątrz bloku if, a nie dla całej funkcji.

Również jeśli zdarzy ci się zadeklarować zmienną wewnątrz dowolnej funkcji lub pętli for, while TypeScript switch, będzie ona dostępna tylko wewnątrz tego bloku i nie będzie żadnych odniesień do niej poza blokiem, a także zgłosi błąd, jeśli zmienna zostanie użyta poza blokiem. Jest to główna różnica między zadeklarowanymi zmiennymi za pomocą słów kluczowych var i let.

Deklarowanie zmiennych za pomocą const

Const oznacza zmienne stałe. Są podobne do zmiennych let, z tą tylko różnicą, że raz przypisanej wartości nie można zmienić.

Składnia:

const name;

Przykład:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

Dlatego użytkownicy mogą używać zmiennych const tylko w przypadkach, gdy wiedzą, że nie muszą zmieniać przypisanych do nich wartości.

Wpisuje TypeScript

TypeScript jest silnie typowanym językiem, podczas gdy javascript nim nie jest. Zmienna, której wartość jest zdefiniowana jako ciąg znaków, może być zmieniona na liczbę bez żadnych problemów w Javascript. To samo nie jest tolerowane w TypeScript, w TypeScriptTyp zmiennej jest definiowany tylko na początku i musi być taki sam przez cały czas wykonywania, wszelkie zmiany spowodują błąd kompilacji do JavaScript.

Oto typy:

Numer
sznur
Boolean
Każdy
Unieważnić

Numer

Pobiera tylko liczby całkowite, zmiennoprzecinkowe, ułamki zwykłe itp.

Składnia:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Oto kilka ważnych metod, których można użyć w przypadku typów liczbowych:

do naprawionego() – skonwertuje liczbę na ciąg znaków i zachowa miejsca dziesiętne podane w metodzie.

toString () – ta metoda konwertuje liczbę na ciąg znaków.

wartość() – ta metoda zwróci pierwotną wartość liczby.

doPrecyzji() – ta metoda sformatuje liczbę do określonej długości.

Przykład: ze wszystkimi metodami String

let _num :number = 10.345;
_num.toFixed(2); // "10.35"
_num.valueOf(); // 10.345
_num.toString(); // "10.345"
_num.toPrecision(2); //"10"

sznur

Ciąg: tylko wartości ciągu

Składnia:

let str :string = "hello world";

Oto kilka ważnych metod, które można zastosować w przypadku typów String:

dzielić() – ta metoda podzieli ciąg na tablicę.
charAt() – metoda ta zwróci pierwszy znak dla podanego indeksu.
indeks() – metoda ta poda pozycję pierwszego wystąpienia dla podanej jej wartości.
zastąpić () – ta metoda pobiera 2 ciągi znaków, najpierw wartość do przeszukania w ciągu, a jeśli jest obecna, zastąpi ją drugą i zwróci nowy ciąg.
Trym () – ta metoda usunie spacje z obu stron ciągu.
podstr() – ta metoda da część ciągu, która będzie zależała od pozycji podanej jako początek i koniec.
podciąg() – ta metoda da część ciągu, która będzie zależała od pozycji podanej jako początek i koniec. Znak na pozycji końcowej zostanie wykluczony.
do wielkich liter() - skonwertuje ciąg na wielkie litery
do małych liter() – konwertuje ciąg znaków na małe litery.

Przykład:

let _str:string = "Typescript";

_str.charAt(1); // y
_str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"]
_str.indexOf("s"); //4 , gives -1 is the value does not exist in the string.
_str.replace("Type", "Coffee"); //"Coffeescript"
_str.trim(); //"Typescript"
_str.substr(4, _str.length); //"script"
_str.substring(4, 10); //"script"
_str.toUpperCase();//"TYPESCRIPT"
_str.toLowerCase();//"typescript"

Boolean

Akceptuje wartości logiczne, takie jak prawda, fałsz, 0 i 1.

Składnia:

let bflag :boolean = 1;
let status :boolean = true;

Każdy

Składnia:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Zmienne zadeklarowane przy użyciu każdy typ może przyjąć zmienną jako ciąg znaków, liczbę, tablicę, wartość logiczną lub wartość nieważną. TypeScript nie zgłosi żadnego błędu w czasie kompilacji; jest to podobne do zmiennych zadeklarowanych w JavaSkrypt. Używaj zmiennej typu tylko wtedy, gdy nie jesteś pewien typu wartości, która będzie skojarzona z tą zmienną.

Unieważnić

Typ void jest najczęściej używany jako typ zwracany przez funkcję, która nie ma nic do zwrócenia.

Składnia:

function testfunc():void{
 //code here
}

TypeScript Szyk

An Szyk in TypeScript jest typem danych, w którym można przechowywać wiele wartości. Nauczmy się, jak deklarować i przypisywać wartości dla operacji Array w TypeScript.

Ponieważ TypeScript jest silnie typowanym językiem, musisz powiedzieć, jaki będzie typ danych wartości w tablicy. W przeciwnym razie zostanie on uznany za typ any.

Zadeklaruj i zainicjuj tablicę

Składnia:

let nameofthearray : Array<typehere>

Przykład

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed.

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

Różne sposoby uzyskiwania dostępu do elementów z tablicy

Aby pobrać elementy z tablicy, wartości zaczynają się od indeksu 0 do długości tablicy.

Przykład:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
years[0]; // output will be 2016			
years[1]; // output will be 2017			
years[2]; // output will be 2018			
years[3]; // output will be 2019

Możesz także pobrać elementy z tablicy za pomocą TypeScript dla pętla jak pokazano poniżej:

Korzystanie z TypeScript dla pętli

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i=0;i<=years.length; i++) {
     console.log(years[i]);
}
Output:
2016
2017
2018
2019

Korzystanie z pętli for-in

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i in years) {
     console.log(years[i])
}

Output:
2016
2017
2018
2019

Korzystanie z pętli for-of

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let  i of years) {
     console.log(i)
}
Output:
2016
2017
2018
2019

Korzystanie z pętli foreach

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
years.forEach(function(yrs, i) {
  console.log(yrs);
});
Output:
2016
2017
2018
2019

TypeScript Metody tablicowe

TypeScript Obiekt Array ma wiele właściwości i metod, które pomagają programistom łatwo i efektywnie obsługiwać tablice. Wartość właściwości można uzyskać, określając nazwa_tablicy.właściwość, a wynik metody, podając nazwę tablicy.method().

właściwość długości

=> Jeśli chcesz poznać liczbę elementów w tablicy, możesz użyć właściwości długości.

Revinna metoda

=> Możesz odwrócić kolejność elementów w tablicy, używając metody odwrotnej.

Metoda sortowania

=> Możesz sortować elementy w tablicy za pomocą metody sortowania.

Metoda popowa

=> Możesz usunąć ostatni element tablicy za pomocą metody pop.

Shift metoda

=> Możesz usunąć pierwszy element tablicy za pomocą metody shift.

Metoda wypychania

=> Możesz dodać wartość jako ostatni element tablicy.

metoda konkatacji

=> Możesz połączyć dwie tablice w jeden element tablicy.

Przykład właściwości długości

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.length);  // 12

Przykład metody odwrotnej

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.reverse());  //  ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]

Przykład metody sortowania

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]

Przykład metody pop

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.				

console.log(months.pop()); //Dec

Przykład metody przesunięcia

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.			

console.log(months.shift()); // Jan

Przykład metody push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
years.forEach(function(yrs, i) {			
  console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020				
});

Przykład metody concat

let array1: Array<number> = [10, 20, 30]; 			
let array2: Array<number> = [100, 200, 300];			
console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]

Klasa w TypeScript

TypeScript jest nadzbiorem JavaSkrypt, więc wszystko co możliwe do zrobienia JavaSkrypt jest również możliwy w TypeScript. Klasa to nowa funkcja dodawana począwszy od wersji ES6, więc wcześniej w JavaSkrypt Funkcjonalność typu klasy została wypróbowana przy użyciu funkcji z funkcjonalnością prototypu, aby ponownie wykorzystać kod. Używając klasy, możesz mieć nasz kod prawie zbliżony do języków takich jak java, c#, python itp., w których kod może być ponownie wykorzystany. Dzięki funkcji klasy w TypeScript/JavaSkrypt sprawia, że język staje się bardzo potężny.

Definiowanie klasy w TypeScript

Oto podstawowa składnia klasy w TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

Przykład: działający przykład w klasie

class Students {
    age : number;
    name : string;
    roll_no : number;
    
    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

W powyższym przykładzie masz klasę o nazwie Studenci. Ma właściwości age, name i roll_no.

Konstruktor w A TypeScript Klasa

Przykład klasy Studenci, który zdefiniowaliśmy powyżej, ma konstruktor pokazany poniżej:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

Metoda konstruktora ma parametry age, name i roll_no. Konstruktor zajmie się inicjalizacją właściwości po wywołaniu klasy. Dostęp do właściwości uzyskuje się za pomocą to słowo kluczowe. Przykład this.age, aby uzyskać dostęp do właściwości age, this.roll_no, aby uzyskać dostęp do roll_no itp. Możesz także mieć konstruktor domyślny, jak pokazano poniżej:

constructor () {}

Metody wewnątrz a TypeScript Klasa

W przykładzie klasy Students zdefiniowano metody, na przykład getRollNo(), getName(), getAge(), które służą do podawania szczegółów właściwości roll_no, name i age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Tworzenie instancji klasy w TypeScript

Przykład:

In TypeScript aby utworzyć instancję klasy, musisz użyć operatora new. Kiedy tworzymy instancję klasy za pomocą operatora new, otrzymujemy obiekt, który może uzyskać dostęp do właściwości i metod klasy, jak pokazano poniżej:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge(); // 15
student_details.getName(); // Harry John

Kompilowanie TypeScript Klasa do JavaScenariusz

Aby skompilować, możesz użyć polecenia tsc, jak pokazano poniżej Javascript.

Command: tsc  Students.ts

Moc wyjściowa Javascript kod po kompilacji wygląda następująco:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Javascript, Klasa jest konwertowana na funkcję, która sama się wywołuje.

Dziedziczenie klas

Klasy mogą być dziedziczone przy użyciu metody rozciągać się słowo kluczowe w TypeScript.

Składnia dziedziczenia klas:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

klasa B. będzie mógł się podzielić klasa A metody i właściwości.

Oto działający przykład klasy korzystającej z dziedziczenia

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge(); // output is 24
_std1.setMarks(500);
_std1.getMarks(); // output is 500

Masz dwie klasy: Osoba i Student. Klasa Student rozszerza Person, a obiekt utworzony na Student ma dostęp do własnych metod i właściwości, a także do klasy, którą rozszerzył.

Dodajmy teraz trochę więcej zmian do powyższej klasy.

Przykład:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge(); // output is 24
_std1.getMarks(); // output is 500

Zmiany, które dodałeś w porównaniu do poprzedniego przykładu, polegają na tym, że w klasie Student zdefiniowany jest konstruktor. Konstruktor musi przyjąć te same parametry, co klasa bazowa i dodać własne dodatkowe parametry, jeśli takie istnieją.

In TypeScript musisz wywołać super will wszystkie parametry jako podstawowe parametry. To musi być pierwsza rzecz, którą należy zrobić wewnątrz konstruktora. Super wykona konstruktor klasy rozszerzonej.

Modyfikatory dostępu w TypeScript

TypeScript obsługuje publiczne, prywatne i chronione modyfikatory dostępu do metod i właściwości. Domyślnie, jeśli nie podano modyfikatorów dostępu, metoda lub właściwość jest uważana za publiczną i będą łatwo dostępne z obiektu klasy.

W przypadku modyfikatorów dostępu prywatnego nie można uzyskać do nich dostępu z obiektu klasy i można ich używać wyłącznie wewnątrz klasy. Nie są one dostępne dla klasy dziedziczonej.

W przypadku chronionych modyfikatorów dostępu należy je stosować wewnątrz klasy i klasy dziedziczonej i nie będą one dostępne z obiektu klasy.

Przykład:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is "+ this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);  
        this.tmarks = tmarks;    
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }
    
    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks(); // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails(); // output is Name is Sheena

Private: Właściwości lub metody nie są dostępne dla obiektu klasy ani klasy pochodnej, są one przeznaczone do użytku wewnętrznego wewnątrz klasy.
Chroniony: utworzony obiekt również nie może uzyskać dostępu do właściwości i metod. Są one dostępne z wnętrza klasy i dostępne dla klasy ją rozszerzającej.
Publiczny: właściwości i metody są deklarowane bez żadnego słowa kluczowego. Dostęp do nich można łatwo uzyskać za pomocą obiektu klasy z zewnątrz.

Interfejs w TypeScript

Jedna z podstawowych cech TypeScript to interfejsy. Interfejs to zestaw zdefiniowanych reguł, które muszą zostać zaimplementowane przez jednostkę używającą go. Jednostka może być klasą, funkcją lub zmienną. Interfejs może składać się z właściwości i metod. Właściwości można zdefiniować jako opcjonalne, używając składni „?” dla tej właściwości lub metody. Interfejs dodaje silne sprawdzenie typu dla każdej funkcji, zmiennej lub klasy implementującej interfejs.

Składnia interfejsu w TypeScript

interface Dimension {
    width: string;
    height: string;
}

Zdefiniowałeś interfejs o nazwie Dimension, który ma właściwości szerokość i wysokość, a typ w obu przypadkach jest ciągiem znaków.

Teraz ten interfejs można zaimplementować za pomocą zmiennej, funkcji lub klasy. Oto przykład zmiennej implementującej interfejs Dimension.

Przykład:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

Sygnatura interfejsu Wymiary ma szerokość i wysokość, przy czym obie wartości są obowiązkowe. W przypadku, gdy podczas implementowania interfejsu pominięto jakąkolwiek właściwość lub zmieniono typ, podczas kompilacji kodu do JavaScript wystąpi błąd czasu kompilacji.

Powyższy kod po skompilowaniu do JavaScript wygląda następująco:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Zobaczmy teraz, jak używać interfejsu z funkcją.

Używanie interfejsu w funkcji jako typu zwracanego

Przykład:

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

W powyższym przykładzie interfejs Dimension jest zaimplementowany w funkcji getDimension() jako typ zwracany. Typ zwracany przez getDimension() musi być zgodny z właściwościami i typem wymienionym w przypadku wymiaru interfejsu.

Skompilowany kod do Javascript będzie wyglądać następująco:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

Jeśli podczas kompilacji typ zwracany nie będzie zgodny z interfejsem, zgłosi błąd.

Interfejs jako parametr funkcji

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width +"-"+ dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // will get "300px-250px"

W powyższym przykładzie użyłeś wymiaru interfejsu jako parametru funkcji getDimension(). Kiedy wywołujesz funkcję, musisz się upewnić, że przekazany jej parametr jest zgodny ze zdefiniowaną regułą interfejsu.

Skompilowany kod do Javascript będzie wyglądać następująco:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Interfejs implementujący klasę

Aby skorzystać z interfejsu z klasą, należy użyć słowa kluczowego narzędzia.

Składnia klasy implementującej interfejs:

class NameofClass implements InterfaceName {
}

Poniższy przykład pokazuje działanie interfejsu z klasą.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string; 
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

W powyższym przykładzie zdefiniowałeś interfejs Dimension z właściwościami szerokość i wysokość zarówno typu string, jak i metodą o nazwie getWidth(), która zwraca wartość w postaci ciągu znaków.

Skompilowany kod do Javascript będzie wyglądać następująco:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Funkcje w TypeScript

Funkcje to zbiór instrukcji wykonywanych w celu wykonania zadania. W Javascript, większość kodu jest napisana w formie funkcji i odgrywa główną rolę. W TypeScript, masz dostępną klasę, interfejsy, moduły, przestrzenie nazw, ale mimo to funkcje odgrywają ważną rolę. Różnica między funkcją w JavaScript i TypeScript Funkcja jest typem zwracanym dostępnym w TypeScript funkcja.

JavaFunkcja skryptu:

function add (a1, b1) { 
   return a1+b1;
}

TypeScript funkcjonować:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

W powyższych funkcjach dodawana jest nazwa funkcji, parametry a1, b1 oba mają typ jako liczbę, a typ zwracany jest również liczbą. Jeśli zdarzy się, że przekażesz ciąg do funkcji, zgłosi ona błąd w czasie kompilacji JavaScenariusz.

Wykonanie wywołania funkcji: dodaj

let  x = add(5, 10) ;  // will return 15
let  b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1.
let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3.
let t = add("Harry", "John");// will throw an error :  error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.

Parametry a1 i b1 są parametrami obowiązkowymi i zgłoszą błąd, jeśli nie zostaną odebrane w ten sposób. Ponadto typ parametru i typ zwracany są bardzo ważne i nie można ich zmienić po zdefiniowaniu.

Opcjonalne parametry funkcji

W JavaScript wszystkie parametry funkcji są opcjonalne i uważane za niezdefiniowane, jeśli nie zostaną przekazane. Ale tak samo nie jest w przypadku TypeScript, po zdefiniowaniu parametrów musisz je również wysłać, ale jeśli chcesz zachować dowolny parametr jako opcjonalny, możesz to zrobić za pomocą? względem nazwy parametru, jak pokazano poniżej:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.

Należy pamiętać, że parametry opcjonalne mają być zdefiniowane w funkcji tylko na końcu. Nie można ustawić pierwszego parametru jako opcjonalnego, a drugiego jako obowiązkowego. Gdy wywołasz funkcję z jednym param, kompilator zgłosi błąd. Dlatego konieczne jest pozostawienie opcjonalnych parametrów na końcu.

Przypisz wartości domyślne do parametrów

Możesz przypisać wartości domyślne do parametrów, jak pokazano poniżej:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John"); // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

Podobnie jak w przypadku parametrów opcjonalnych, również tutaj domyślne, zainicjowane parametry muszą być przechowywane na końcu funkcji.

Parametry spoczynkowe

Widziałeś jak TypeScript obsługuje parametry obowiązkowe, parametry opcjonalne i parametry inicjalizowane wartością domyślną. Teraz przyjrzyjmy się parametrom spoczynkowym. Pozostałe parametry to grupa opcjonalnych parametrów zdefiniowanych razem i są one definiowane za pomocą trzech kropki (…) po którym następuje nazwa parametru, który jest tablicą.

Składnia parametrów spoczynkowych:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Jak pokazano powyżej, pozostałe parametry definiuje się za pomocą (…nazwa-parametru); reszta parametrów to tablica poprzedzona trzema kropkami. Do tablicy zostaną przesłane wszystkie parametry. Możesz wywołać funkcję, jak pokazano w poniższym przykładzie:

Przykład:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday

Funkcje strzałek

Funkcja strzałki to jedna z ważnych funkcji udostępnionych w ES6 i jest dostępna w TypeScript zbyt. W składni funkcji strzałkowej znajduje się gruba strzałka, dlatego funkcja ta nazywana jest funkcją strzałkową.

Funkcja strzałkowa Składnia:

var nameoffunction = (params) => {				
 // code here			
}

Do czego służy funkcja strzałki?

Rzućmy okiem na przykład, aby zrozumieć przypadek użycia funkcji Arrow:

Przykład:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined.    
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Utworzyłeś anonimową funkcję, która ma właściwość this. Score inicjuje wartość 0 i metodę getScore, która wewnętrznie ma setTimeout iw ciągu 1 sekundy pociesza this.score. Wartość konsolidowana daje wartość niezdefiniowaną, mimo że zdefiniowano i zainicjowano this.score. Problem dotyczy this słowo kluczowe. Funkcja wewnątrz setTimeout ma swoją własną funkcję i próbuje wewnętrznie odnieść się do wyniku, a ponieważ nie jest zdefiniowana, daje wartość niezdefiniowaną.

To samo można zrobić za pomocą funkcji strzałki, jak pokazano poniżej:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Zmieniłeś funkcję wewnątrz setTimeout na funkcję strzałkową, jak pokazano poniżej:

setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);

Funkcja strzałkowa nie ma własnej to zdefiniowany i dzieli się swoim elementem nadrzędnym to, więc zmienne zadeklarowane na zewnątrz są łatwo dostępne za pomocą funkcji strzałkowej. Są przydatne ze względu na krótszą składnię, a także do wywołań zwrotnych, obsługi zdarzeń, wewnętrznych funkcji pomiaru czasu itp.

TypeScript Enums

TypeScript Enum to obiekt, który zawiera zbiór powiązanych wartości przechowywanych razem. Javascript nie obsługuje wyliczeń. Większość język programowania lubić Java, C, C++ wspiera TypeScript Enum i jest również dostępny z TypeScript zbyt. Wyliczenia definiuje się za pomocą słowa kluczowego enum.

Jak zadeklarować Enum?

Składnia:

enum NameofEnum {
   value1,
   value2,
    ..
}

Przykład: Wyliczenie

enum Directions {
North,
South,
East,
West
}

W powyższym przykładzie zdefiniowano wyliczenie o nazwie Kierunki. Podana wartość to Północ, Południe, Wschód, Zachód. Wartości są numerowane od 0 dla pierwszej wartości w wyliczeniu, a następnie zwiększają się o 1 dla następnej wartości.

Zadeklaruj wyliczenie z wartością liczbową

Domyślnie, jeśli wyliczeniu nie zostanie podana żadna wartość, traktowane jest ono jako liczba zaczynająca się od 0. Poniższy przykład pokazuje wyliczenie z wartością liczbową.

enum Directions {
North = 0,
South = 1, 
East =2,
West =3
}

Możesz także przypisać wartość początkową do wyliczenia, a kolejne wartości wyliczenia otrzymają wartości zwiększone. Na przykład:

enum Directions {
North = 5,
South, // will be 6
East, // 7
West // 8
}

Teraz wartość wyliczeniowa Północ zaczyna się od 5, więc Południe otrzyma wartość 6, Wschód = 7 i Zachód = 8.

Możesz także przypisać wybrane wartości zamiast przyjmować wartości domyślne. Na przykład:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Jak uzyskać dostęp do Enum?

Poniższy przykład pokazuje, jak używać Enum w kodzie:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North); // output is  0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]); //output is North

Skompilowany kod do JavaScript wygląda następująco:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Ponieważ Javascript nie obsługuje wyliczeń, konwertuje wyliczenie na samodzielnie wywoływane funkcje, jak pokazano powyżej.

Zadeklaruj wyliczenie z wartością ciągu

Możesz przypisać wybrane wartości ciągu, jak pokazano w poniższym przykładzie:

Przykład:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North

Skompilowany kod do JavaScript wygląda następująco:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

W czym znajdują się moduły TypeScript?

Pliki utworzone w TypeScript mają dostęp globalny, co oznacza, że zmienne zadeklarowane w jednym pliku są łatwo dostępne w innym pliku. Ten globalny charakter może powodować konflikty kodu i problemy z wykonywaniem w czasie wykonywania. Masz funkcję modułu eksportu i importu, której można użyć, aby uniknąć konfliktów zmiennych globalnych i funkcji. Ta funkcja jest dostępna w JavaSkrypt z wydaniem ES6, obsługiwany również w TypeScript.

Dlaczego potrzebujesz modułów w TypeScript?

Poniższy przykład ilustruje problem bez modułów:

Przykładowy test1.ts

let age : number = 25;

Zdefiniowałeś zmienną wiek numeru typu w test1.ts.

Przykładowy test2.ts

W pliku test2.ts można łatwo uzyskać dostęp do zmiennej wiek zdefiniowany w test1.ts, a także zmodyfikuj go, jak pokazano poniżej:

age = 30; // changed from 25 to 30.
let _new_age = age;

Zatem powyższy przypadek może stworzyć wiele problemów, ponieważ zmienne są dostępne globalnie i można je modyfikować.

Wraz z Moduły, zapisany kod pozostaje zapisany w ustawieniach regionalnych pliku i nie można uzyskać do niego dostępu poza nim. Aby uzyskać dostęp do czegokolwiek z pliku, należy go wyeksportować za pomocą słowa kluczowego eksport. It jest używany, gdy chcesz, aby zmienna, klasa, funkcja lub interfejs zostały użyte w innym pliku. import jest używany, gdy chcesz uzyskać dostęp do wyeksportowanej zmiennej, klasy, interfejsu lub funkcji. W ten sposób napisany kod pozostaje nienaruszony w pliku i nawet jeśli zdefiniujesz te same nazwy zmiennych, nie zostaną one pomieszane i zachowują się lokalnie w stosunku do pliku, w którym są zadeklarowane.

Korzystanie z eksportu i importu

Istnieje wiele sposobów eksportu i importu. Omówię tutaj najczęściej używaną składnię.

Składnia importu i eksportu 1:

export  nameofthevariable or class name or interface name etc

//To import above variable or class name or interface you have to use import as shown below:
 

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

Oto działający przykład wykorzystania eksportu i importu.

Przykład:

test1.ts

export let age: number = 25;

Słowo kluczowe eksportu służy do udostępniania zmiennej wieku w innym pliku.

test2.ts

import { age } from "./test1"
let new_age :number = age;

Słowo kluczowe import służy do uzyskiwania dostępu do pliku wiek zmienną i musisz określić lokalizację pliku, jak pokazano powyżej.

Składnia importu i eksportu 2:

Istnieje inny sposób eksportowania i importowania, którego składnia jest pokazana poniżej:

export = classname;

import classname = require(“file path of modulename”)

Kiedy używasz eksport = aby wyeksportować moduł, import musi użyć require(„ścieżka pliku nazwy modułu”), aby go zaimportować.

Oto działający przykład ilustrujący powyższy przypadek:

Klient.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testKlient.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Moduł ładujący

Moduły nie mogą działać samodzielnie, dlatego potrzebny jest moduł ładujący moduły, aby zlokalizować zależności importu, jak widziałeś w TypeScript przykłady pokazane powyżej. Dostępny moduł ładujący moduł to CommonJS dla nodejs i Require.js do uruchomienia w przeglądarce.

Aby skompilować kod przy użyciu modułu CommonJS użyj następującego polecenia:

tsc --module commonjs testCustomer.ts

Aby skompilować kod przy użyciu modułu Requirejs użyj następującego polecenia:

tsc --module amd testCustomer.ts

Zależne pliki zostaną przekonwertowane na plik js za pomocą powyższego polecenia.

Przykład testCustomer.ts do testCustomer.js przy użyciu Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Przykładowy plik Customer.ts na Customer.js przy użyciu Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

Aby przetestować to za pomocą require.js, musisz utworzyć plik o nazwie main.js, który zawiera odniesienia do zależności, jak pokazano.

Oto struktura folderów:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>			
<html>			
<head>			
    <title>TypeScript Module testing using Requirejs</title>			
    <script data-main="main" src="require.js"></script>			
</head>			
<body>			
    <h3>Testing modules using Requirejs</h3>			
</body>			
</html>

Przestrzenie nazw w TypeScript

Przestrzeń nazw to w zasadzie zbiór klas, interfejsów, zmiennych i funkcji razem w jednym pliku.

Składnia przestrzeni nazw

namespace name{

export class {
}

export interface {
}

export const constname;

}

Powiązany kod jest dostępny w jednej przestrzeni nazw.

Przykład działania przestrzeni nazw: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

Nazwa przestrzeni nazw to Konfiguracja studencka, Dodałeś interfejs StudDetails, funkcję addSpace i klasę o nazwie Student.

Dostęp do przestrzeni nazw

Poniżej znajduje się kod, w którym używasz przestrzeni nazw Konfiguracja studencka.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

Do klasy, interfejsu, funkcji dostępnej w przestrzeni nazw należy odwołać się, używając nazwy przykładowej przestrzeni nazw StudentSetup.addSpace aby uzyskać dostęp do funkcji, Konfiguracja ucznia. Student aby uzyskać dostęp do klasy.

Możesz skompilować oba pliki w jeden js, jak pokazano poniżej:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Sprawdź dane wyjściowe w wierszu poleceń, używając poniższego polecenia:

node namespace.js

Wyświetli dane wyjściowe jako:

The name is: H a r r y

Deklaracje otoczenia w TypeScript

TypeScript pozwala na używanie plików javascript innych firm za pomocą deklaracji ambient. Zaletą tej funkcji jest to, że nie musisz przepisywać i mimo to używać wszystkich funkcji biblioteki w TypeScript.

Składnia otoczenia

Aby zadeklarować moduł otoczenia:

declare module moduleName {
   //code here
}

Plik otoczenia musi zostać zapisany jako:

filename.d.ts

Aby skorzystać z pliku nazwapliku.d.ts w swoim .ts musisz odwołać się do niego jako:

/// <reference path="filename.d.ts"/>

Deklaracja typu otoczenia w TypeScript będzie miał odniesienie do biblioteki innej firmy i ponownie zadeklaruje wymagane funkcje za pomocą własnego typu. Na przykład, rozważmy, że masz małą bibliotekę JavaScript, jak pokazano poniżej:

Third Party JavaPlik skryptu: testString.js

Przykład: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

Masz obiekt o nazwie StringChecks, który ma funkcje takie jak isString, convertToUpperCase, convertToLowerCase i converToStringBold.

Tworzenie modułu Ambient w TypeScript

Teraz utworzymy moduł otoczenia, który będzie miał odniesienie do powyższych funkcji js, a także doda kontrolę typu zgodnie z naszymi wymaganiami.

Nazwa pliku: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Musisz zdefiniować nazwę modułu jako TestString i wyeksportować interfejs StringsFunc.

isString(str:string): wartość logiczna

=> Spowoduje to przyjęcie parametru jako ciągu znaków, a typem powrotu będzie wartość logiczna. W przypadku użycia w pliku .ts, jeśli zdarzy się, że przekażesz parametr jako liczbę lub cokolwiek innego niż ciąg znaków, wyświetli się błąd typu kompilacji.

konwertujToUpperCase(str:string): ciąg

=> To przyjmie argument jako ciąg znaków i zwróci ciąg znaków. To samo dotyczy konwertujToLowerCase(str: string)
: strunowy; I konwertujToStringBold(str:string): ciąg
;

Ponieważ w pliku javascript nazwa obiektu to StringChecks, w końcu musimy odwołać się do niej w pliku .d.ts, co odbywa się w następujący sposób:

declare var StringChecks: TestString.StringsFunc;

Korzystanie z modułu Ambient w TypeScript

Oto plik test.ts, w którym zostanie użyty plik otoczenia tstring.d.ts

Przykład: test.ts

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

skompilować TypeScript tsc test.ts do test.js

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Teraz możesz używać test.js w pliku HTML, a także pliku biblioteki testString.js

<html>			
<head>			
    <title>Test TypeScript Ambient</title>			
    <script src="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

Oto wynik widoczny w konsoli:

true			
HELLO WORLD			
hello			
<b>Hello World</b>

TypeScript Wsparcia Sponsorskiego

Zobaczmy ważne zabytki z historii TypeScript:

Po dwóch latach wewnętrznego rozwoju w Microsoft. TypeScript 0.9, wydany w 2013 roku
Dodatkowe wsparcie dla leków generycznych TypeScript Wersja 1.0 została wydana w kompilacji 2014
W lipcu 2014 nowy TypeScript kompilator jest pięć razy szybszy od poprzedniej wersji.
W lipcu 2015 wsparcie dla modułów ES6, słowo kluczowe przestrzeni nazw, dla, wsparcia, dekoratorów.
W listopadzie 2016 r. dodano funkcje, takie jak typy kluczy i odnośników mapowanych typów oraz reszta.
27 marca 2018 r. dodano typy warunkowe, ulepszony klucz z obsługą typów skrzyżowań w TypeScript.

Dlaczego warto korzystać TypeScript?

Oto ważne zalety/korzyści korzystania TypeScript

Duży i skomplikowany projekt w JavaSkrypty są trudne do kodowania i utrzymania.
TypeScript bardzo pomaga w organizacji kodu, a jednocześnie pozwala pozbyć się większości błędów podczas kompilacji.
TypeScript obsługuje biblioteki JS i dokumentację API
Jest to opcjonalnie pisany język skryptowy
TypeScript Kod można przekształcić w zwykły JavaKod skryptu
Lepsza struktura kodu i techniki programowania obiektowego
Umożliwia lepszą obsługę narzędzi w czasie programowania
Może rozszerzyć język poza standardowe dekoratory, async/await

Kto używa TypeScript?

Oto kilka najpopularniejszych zastosowań TypeScript:

Zespół kątowy używa TypeScript.
Instalacja NodeJS i NPM
TypeScript instalacja sprzętu
skompilować TypeScript kod do Javascript
Wykonaj kod za pomocą Nodejs
Wykonać Javascript w przeglądarce
skompilować TypeScript kod do Javascript przy użyciu wersji EcmaScript
Możesz łatwo skompilować napisany kod TypeScript do JavaSkrypt wykorzystujący NodeJS.
Więc z czym pracować TypeScript musisz najpierw pobrać i zainstalować NodeJS.

Podsumowanie

TypeScript jest nadzbiorem JavaScenariusz. TypeScript jest czysto obiektowym językiem programowania obsługującym klasy, interfejsy itp.
TypeScript obsługuje wszystkie wydane funkcje Ecmascript, a programiści mogą z nich korzystać podczas kodowania.
Zmienne służą do przechowywania wartości, a wartość może być ciągiem znaków, liczbą, wartością logiczną lub wyrażeniem.
In TypeScriptTyp zmiennej jest definiowany tylko na początku i musi być taki sam przez cały czas wykonywania, wszelkie zmiany spowodują błąd kompilacji do JavaScript.
Tablica w TypeScript to typ danych, w którym można przechowywać wiele wartości.
Klasa to nowa funkcja dodawana począwszy od wersji ES6, więc wcześniej w JavaFunkcjonalność typu skryptu została przetestowana przy użyciu funkcji z funkcjonalnością prototypu w celu ponownego wykorzystania kodu.
TypeScript obsługuje publiczne, prywatne i chronione modyfikatory dostępu do metod i właściwości.
Jedna z podstawowych cech TypeScript to interfejsy. Interfejs to zbiór zdefiniowanych reguł, które musi wdrożyć podmiot, który go używa.
Funkcje to zbiór instrukcji wykonywanych w celu wykonania zadania.
TypeScript Enum to obiekt, który zawiera zbiór powiązanych wartości przechowywanych razem.

Możesz lubić:

Co to jest TypeScript?

Jak pobrać i zainstalować TypeScript

skompilować TypeScript kod do Javascript

Wykonać Javascript za pomocą Nodejsa

skompilować TypeScript kod do Javascript przy użyciu wersji EcmaScript

POWIĄZANE ARTYKUŁY

Zmienne w TypeScript

Deklarowanie zmiennych za pomocą var

Deklarowanie zmiennych za pomocą let

Deklarowanie zmiennych za pomocą const

Wpisuje TypeScript

Numer

sznur

Boolean

Każdy

Unieważnić

TypeScript Szyk

Zadeklaruj i zainicjuj tablicę

Różne sposoby uzyskiwania dostępu do elementów z tablicy

Korzystanie z TypeScript dla pętli

Korzystanie z pętli for-in

Korzystanie z pętli for-of

Korzystanie z pętli foreach

TypeScript Metody tablicowe

właściwość długości

Revinna metoda

Metoda sortowania

Metoda popowa

Shift metoda

Metoda wypychania

metoda konkatacji

Przykład właściwości długości

Przykład metody odwrotnej

Przykład metody sortowania

Przykład metody pop

Przykład metody przesunięcia

Przykład metody push

Przykład metody concat

Klasa w TypeScript

Definiowanie klasy w TypeScript

Przykład: działający przykład w klasie

Konstruktor w A TypeScript Klasa

Metody wewnątrz a TypeScript Klasa

Tworzenie instancji klasy w TypeScript

Kompilowanie TypeScript Klasa do JavaScenariusz

Dziedziczenie klas

Składnia dziedziczenia klas:

Modyfikatory dostępu w TypeScript

Interfejs w TypeScript

Składnia interfejsu w TypeScript

Używanie interfejsu w funkcji jako typu zwracanego

Interfejs jako parametr funkcji

Interfejs implementujący klasę

Funkcje w TypeScript

Wykonanie wywołania funkcji: dodaj

Opcjonalne parametry funkcji

Przypisz wartości domyślne do parametrów

Parametry spoczynkowe

Funkcje strzałek

Do czego służy funkcja strzałki?

TypeScript Enums

Jak zadeklarować Enum?

Zadeklaruj wyliczenie z wartością liczbową

Jak uzyskać dostęp do Enum?

Zadeklaruj wyliczenie z wartością ciągu

W czym znajdują się moduły TypeScript?

Dlaczego potrzebujesz modułów w TypeScript?

Korzystanie z eksportu i importu

Składnia importu i eksportu 1:

Składnia importu i eksportu 2:

Moduł ładujący

Przykład testCustomer.ts do testCustomer.js przy użyciu Requirejs

Przykładowy plik Customer.ts na Customer.js przy użyciu Requirejs

Przestrzenie nazw w TypeScript

Składnia przestrzeni nazw

Dostęp do przestrzeni nazw

Deklaracje otoczenia w TypeScript

Składnia otoczenia

Aby zadeklarować moduł otoczenia:

Plik otoczenia musi zostać zapisany jako: