TypeScript Výukový program: Co je, rozhraní, výčet, pole s příkladem

Co je to TypeScript?

TypeScript je nadmnožinou JavaSkript. TypeScript je čistě objektově orientovaný programovací jazyk, který podporuje třídy, rozhraní atd. Je to open-source jazyk vyvinutý společností Microsoft který staticky zkompiluje kód do JavaSkript. Lze jej snadno spustit v prohlížeči nebo Nodejs.

Všechny nejnovější funkce vydané pro ECMAScript jsou podporovány v TypeScript a kromě toho TypeScript má své vlastní objektově orientované funkce, jako jsou rozhraní, deklarace prostředí, dědičnost tříd atd., což pomáhá při vývoji velkých aplikací, které by jinak bylo obtížné provést v JavaScénář.

Jak stáhnout a nainstalovat TypeScript

Zde je postup stažení a instalace krok za krokem TypeScript:

Krok 1) Stáhněte a nainstalujte Nodejs

Přejděte na oficiální stránky nodejs: https://nodejs.org/en/download/ a stáhněte a nainstalujte nodejs podle vašeho operačního systému. Podrobný návod, jak stáhnout nodejs, je k dispozici zde: https://www.guru99.com/download-install-node-js.html

Krok 2) Zkontrolujte verzi Nodejs a npm

Chcete-li zkontrolovat, zda je nainstalován nodejs a npm, stačí zkontrolovat verzi v příkazovém řádku.

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

D:\typeproject>npm --version
6.4.1

Takže máte nainstalovaný nodejs v10 a npm 6.

Krok 3) TypeScript Instalace

Vytvořte svůj projektový adresář typeproject/ a spusťte npm init, jak je znázorněno v příkazu níže:

npm init

Krok 4) Spusťte instalaci

Nyní vytvoříme balíček .json, který bude ukládat závislosti pro náš projekt.

Po dokončení instalace TypeScript následujícím způsobem:

npm -g install typescript

Výše uvedený příkaz se postará o instalaci TypeScript. Přidáním „-g“ k instalaci npm dojde k instalaci TypeScript globálně. Výhodou použití -g je, že budete moci používat TypeScript TSC z libovolného adresáře, protože je nainstalován globálně. V případě, že nechcete instalovat TypeScript globálně použijte níže uvedený příkaz:

npm --save install typescript

Vytvořte složku src/ v adresáři projektu a ve složce src/ vytvořte TypeScript soubor test.ts a napište svůj kód.

Příklad: test.ts

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

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

Sestavit TypeScript kód do Javascript

Pro kompilaci výše uvedeného kódu použijte následující příkaz:

If TypeScript je nainstalován globálně, použijte níže uvedený příkaz:

tsc test.ts

If TypeScript je nainstalován lokálně k vašemu projektu, musíte použít cestu TypeScript z node_modules, jak je znázorněno:

node_modules/typescript/bin/tsc test.ts

Výše uvedený příkaz vytvoří soubor test.js a bude mít kód zkompilovaný do javascriptu.

Příklad: test.js

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

Provést Javascript pomocí Nodejs

V tomto TypeScript tutoriálu, spustíme test.js v nodejs následovně:

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

Konzolovaná hodnota se zobrazí při spuštění test.js

Provést JavaSkript v prohlížeči

Příklad:

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

Sestavit TypeScript kód do Javascript pomocí verze EcmaScript

TypeScript podporuje všechny uvolněné funkce Ecmascript a vývojáři je mohou používat při kódování. Ne všechny nové funkce ale podporují starší prohlížeče, kvůli kterým je potřeba zkompilovat javascript do starší verze Ecmascriptu. TypeScript poskytuje možnosti kompilátoru, které to umí.

Příklad: test.ts

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

addnumbers(10, 20);

Chcete-li kompilovat do verze ES podle vašeho výběru, můžete ve svém příkazu použít volbu target nebo t takto:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Ve výchozím nastavení je cílem ES3. V případě, že jej chcete změnit, můžete použít výše uvedený příkaz.

V současné době v tom budeme používat ES6 TypeScript tutoriál jako cíl:

tsc --target ES6  test.ts

test.ts na test.js

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

addnumbers(10, 20);

Kód zůstává tak, jak je, protože funkce šipky, kterou jste použili, je funkcí ES6 a totéž se při kompilaci do ES6 nezmění.

Ve výchozím nastavení je cíl ES3, takže bez cíle získáte test.js jako:

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

Takže tady, tlustá šipka se změnila na normální anonymní funkci.

Proměnné v TypeScript

Proměnné se používají k ukládání hodnot a hodnota může být řetězec, číslo, logická hodnota nebo výraz. Pokud jde o proměnné v TypeScript, jsou podobné JavaScénář. Naučme se tedy deklarovat a přiřazovat hodnotu proměnným v TypeScript.

Bez definování nelze v kódu použít proměnné. K deklaraci proměnné můžete použít

byl klíčové slovo,

nechat Klíčové slovo

const Klíčové slovo

Práce s proměnnými v TypeScript je podobný javascriptu a pro uživatele obeznámené s javascriptem to bude velmi snadné. Pouze proměnné jako nechat si const se ve srovnání s byl.

Deklarování proměnných pomocí var

Syntaxe:

var firstname = "Roy";

Pojďme se na některé podívat TypeScript příklady k pochopení fungování klíčového slova var a také rozsahu proměnných deklarovaných pomocí byl klíčové slovo.

Příklad 1:

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

Příklad 2:

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.

Příklad 3:

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.

Deklarace proměnných pomocí let

Jedno TypeScript syntaxe pro let je uvedena níže:

Syntaxe:

let name="Roy";

Fungování nechat proměnná je téměř stejná jako byl, ale s malým rozdílem a pochopí totéž pomocí an TypeScript příklad.

Příklad:

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

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

Nad zařízením TypeScript příklad vyvolá chybu, ale totéž by fungovalo dobře, kdyby to bylo s byl klíčové slovo. Použití proměnných nechat jsou dostupné v rámci deklarovaného rozsahu bloku, například proměnná t je dostupná pouze uvnitř bloku if a nikoli pro celou funkci.

Také pokud náhodou deklarujete proměnnou uvnitř jakékoli funkce nebo for-loop, while-loop, TypeScript switch block, bude vám k dispozici pouze uvnitř tohoto bloku a žádný odkaz na něj mimo blok, a pokud je proměnná použita mimo blok, vyvolá chybu. Toto je hlavní rozdíl mezi deklarovanými proměnnými var a let keyword.

Deklarace proměnných pomocí konst

Const znamená konstantní proměnné. Jsou podobné letovým proměnným, jen s tím rozdílem, že jakmile je k nim přiřazena hodnota, nelze ji změnit.

Syntaxe:

const name;

Příklad:

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

Uživatelé tedy mohou používat proměnné const pouze v případech, kdy vědí, že nemusí měnit hodnoty k nim přiřazené.

Typy v TypeScript

TypeScript je silně typizovaný jazyk, zatímco javascript není. Proměnnou, která má hodnotu definovanou jako řetězec, lze bez problémů změnit na číslo Javascript. Totéž není tolerováno v TypeScript, v TypeScript, typ proměnné je definován pouze na začátku a během provádění musí zachovat stejný typ, jakékoli změny v něm povedou k chybě při kompilaci během kompilace do javascriptu.

Následují typy:

Číslo
Řetězec
Boolean
Žádný
Zrušeno

Číslo

Bere pouze celá čísla, plovoucí čísla, zlomky atd.

Syntaxe:

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

Zde je několik důležitých metod, které lze použít pro typy čísel:

toFixed() – převede číslo na řetězec a zachová desetinná místa daná metodě.

toString () – tato metoda převede číslo na řetězec.

hodnota() – tato metoda vrátí primitivní hodnotu čísla.

toPrecision() – tato metoda zformátuje číslo na zadanou délku.

Příklad: se všemi metodami String

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

Řetězec

Řetězec: pouze hodnoty řetězce

Syntaxe:

let str :string = "hello world";

Zde je několik důležitých metod, které lze použít pro typy String:

rozdělit() – tato metoda rozdělí řetězec do pole.
charAt() – tato metoda poskytne první znak pro daný index.
indexOf() – tato metoda udává pozici prvního výskytu pro hodnotu, která je mu přidělena.
Nahradit () – tato metoda bere 2 řetězce, nejprve hodnotu, která se má v řetězci vyhledat, a pokud je přítomna, nahradí ji 2. a vrátí nový řetězec.
Trim () – tato metoda odstraní bílá místa z obou stran řetězce.
podstr() – tato metoda dá část řetězce, která bude záviset na pozici zadané jako začátek a konec.
podřetězec() – tato metoda dá část řetězce, která bude záviset na pozici zadané jako začátek a konec. Znak na koncové pozici bude vyloučen.
velká písmena() -převede řetězec na velká písmena
na malá písmena() – převede řetězec na malá písmena.

Příklad:

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

Bude akceptovat logické hodnoty jako true, false, 0 a 1.

Syntaxe:

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

Žádný

Syntaxe:

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

Proměnné deklarované pomocí žádný typ může mít proměnnou jako řetězec, číslo, pole, boolean nebo void. TypeScript nevyvolá žádnou chybu při kompilaci; to je podobné proměnným deklarovaným v JavaSkript. Proměnnou typu použijte pouze tehdy, když si nejste jisti typem hodnoty, která bude s touto proměnnou spojena.

Zrušeno

Typ Void se většinou používá jako návratový typ u funkce, která nemá co vracet.

Syntaxe:

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

TypeScript Řada

An Řada in TypeScript je datový typ, do kterého můžete uložit více hodnot. Pojďme se naučit, jak deklarovat a přiřazovat hodnoty pro operace Array v TypeScript.

Od TypeScript je silně typovaný jazyk, musíte říci, jaký bude datový typ hodnot v poli. Jinak to bude považovat za typ any.

Deklarujte a inicializujte pole

Syntaxe:

let nameofthearray : Array<typehere>

Příklad

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ůzné způsoby přístupu k prvkům z pole

Chcete-li získat prvky z pole, hodnoty začínají od indexu 0 po délku pole.

Příklad:

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

Můžete také získat prvky z pole pomocí TypeScript for smyčka jak je uvedeno níže:

Použití TypeScript pro smyčku

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

Použití smyčky for-in

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

Output:
2016
2017
2018
2019

Použití smyčky for-of

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

Použití foreach smyčky

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

TypeScript Pole metody

TypeScript Objekt Array má mnoho vlastností a metod, které pomáhají vývojářům snadno a efektivně manipulovat s poli. Hodnotu vlastnosti můžete získat zadáním polename.property a výstup metody zadáním pole name.method().

vlastnost délky

=> Pokud chcete znát počet prvků v poli, můžete použít vlastnost length.

Reverse metoda

=> Pořadí položek v poli můžete obrátit pomocí obrácené metody.

Způsob řazení

=> Položky v poli můžete třídit pomocí metody řazení.

Pop metoda

=> Poslední položku pole můžete odstranit pomocí metody pop.

Shift metoda

=> První položku pole můžete odstranit pomocí metody shift.

Push metoda

=> Hodnotu můžete přidat jako poslední položku pole.

metoda concat

=> Můžete spojit dvě pole do jednoho prvku pole.

Příklad pro vlastnost length

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

Příklad pro reverzní metodu

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"]

Příklad pro metodu řazení

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"]

Příklad 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

Příklad pro metodu posunu

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

Příklad pro metodu 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				
});

Příklad pro metodu 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]

Třída v TypeScript

TypeScript je nadmnožinou JavaSkript, takže co se dá dělat JavaSkript je také možný v TypeScript. Třída je nová funkce přidaná od ES6 dále, takže dříve JavaSkriptujte funkci typu třídy pomocí funkce s prototypovou funkcí pro opětovné použití kódu. Pomocí třídy můžete mít náš kód téměř blízko jazykům jako java, c#, python atd., kde lze kód znovu použít. S funkcí třídy in TypeScript/JavaDíky skriptu je jazyk velmi silný.

Definování třídy v TypeScript

Zde je základní syntaxe třídy v TypeScript:

class nameofclass {
     //define your properties here

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

Příklad: Pracovní příklad na Class

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;
    }
}

Ve výše uvedeném příkladu máte třídu s názvem Studenti. Má vlastnosti age, name a roll_no.

Konstruktér v a TypeScript Třída

Příklad třídy Students, který jsme definovali výše, má konstruktor, jak je znázorněno níže:

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

Metoda konstruktoru má parametry age, name a roll_no. Konstruktor se postará o inicializaci vlastností při volání třídy. Vlastnosti jsou přístupné pomocí tento klíčové slovo. Příklad this.age pro přístup k vlastnosti age, this.roll_no pro přístup k roll_no atd. Můžete mít také výchozí konstruktor, jak je ukázáno níže:

constructor () {}

Metody uvnitř a TypeScript Třída

V příkladu třídy Studenti jsou definovány metody například getRollNo(), getName(), getAge(), které se používají k zadání podrobností o vlastnostech číslo role, jméno a věk.

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

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

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

Vytvoření instance třídy v TypeScript

Příklad:

In TypeScript k vytvoření instance třídy musíte použít operátor new. Když vytvoříme instanci třídy pomocí operátoru new, získáme objekt, který má přístup k vlastnostem a metodám třídy, jak je uvedeno níže:

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

Kompilace TypeScript Třída do JavaScénář

Ke kompilaci můžete použít příkaz tsc, jak je uvedeno níže Javascript.

Command: tsc  Students.ts

Výstup z Javascript kód při kompilaci je uveden níže:

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 JavascriptTřída se převede na samovolnou funkci.

Třídní dědičnost

Třídy lze dědit pomocí rozšířit klíčové slovo v TypeScript.

Syntaxe dědičnosti třídy:

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

}

třída B bude moci sdílet třída A metody a vlastnosti.

Zde je pracovní příklad třídy používající dědičnost

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

Máte dvě třídy, Osoba a Student. Třída Student rozšiřuje osobu a objekt vytvořený na Student má přístup ke svým vlastním metodám a vlastnostem, stejně jako ke třídě, kterou rozšířil.

Nyní přidáme další změny do výše uvedené třídy.

Příklad:

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

Změny, které jste přidali oproti předchozímu příkladu, je, že ve třídě Student je definován konstruktor. Konstruktor musí vzít stejné parametry jako základní třída a přidat jakékoli další vlastní parametry, pokud nějaké existují.

In TypeScript musíte zavolat super bude všechny parametry jako základní parametry v něm. To musí být první věc, kterou je třeba udělat uvnitř konstruktoru. Super provede konstruktor rozšířené třídy.

Přístup k modifikátorům v TypeScript

TypeScript podporuje modifikátory veřejného, soukromého a chráněného přístupu k vašim metodám a vlastnostem. Ve výchozím nastavení, pokud nejsou zadány modifikátory přístupu, metoda nebo vlastnost jsou považovány za veřejné a budou snadno dostupné z objektu třídy.

V případě modifikátorů soukromého přístupu k nim nelze přistupovat z objektu třídy a jsou určeny pouze k použití uvnitř třídy. Nejsou dostupné pro zděděnou třídu.

V případě modifikátorů chráněného přístupu jsou určeny k použití uvnitř třídy a zděděné třídy a nebudou přístupné z objektu třídy.

Příklad:

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

Soukromý: vlastnosti nebo metody nejsou přístupné objektem třídy a také odvozenou třídou, jsou určeny k použití interně uvnitř třídy.
Chráněný: vytvořený objekt také nemůže přistupovat k vlastnostem a metodám. Jsou přístupné zevnitř třídy a dostupné třídě, která ji rozšiřuje.
Veřejnost: vlastnosti a metody jsou deklarovány bez jakéhokoli klíčového slova. Jsou snadno přístupné pomocí objektu třídy zvenčí.

Rozhraní v TypeScript

Jedním z hlavních rysů TypeScript je rozhraní. Rozhraní je sada definovaných pravidel, která musí být implementována entitou, která jej používá. Entitou může být třída, funkce nebo proměnná. Rozhraní může být tvořeno vlastnostmi a metodami. Vlastnosti můžete definovat jako volitelné pomocí „?“ syntaxe pro danou vlastnost nebo metodu. Rozhraní přidává silnou kontrolu typu pro jakoukoli funkci, proměnnou nebo třídu implementující rozhraní.

Syntaxe rozhraní v TypeScript

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

Definovali jste rozhraní pojmenované jako Dimension, které má vlastnosti width a height a obě mají typ jako řetězec.

Nyní může být toto rozhraní implementováno proměnnou, funkcí nebo třídou. Zde je příklad proměnné implementující rozhraní Dimension.

Příklad:

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

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

Podpis rozhraní Dimension má šířku a výšku a obojí je povinné. V případě, že při implementaci rozhraní dojde k vynechání některé vlastnosti nebo ke změně typu, při kompilaci kódu do javascriptu dojde k chybě kompilace.

Výše uvedený kód, když je zkompilován do javascriptu, vypadá následovně:

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

Podívejme se nyní, jak používat rozhraní s funkcí.

Použití rozhraní na funkci jako návratový typ

Příklad:

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

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

Ve výše uvedeném příkladu je rozhraní Dimension implementováno na funkci getDimension() jako návratový typ. Návratový typ getDimension() se musí shodovat s vlastnostmi a typem zmíněným pro dimenzi rozhraní.

Zkompilovaný kód do Javascript bude následující:

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

Pokud se během kompilace návratový typ neshoduje s rozhraním, dojde k chybě.

Rozhraní jako parametr funkce

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"

Takže výše uvedený příklad jste použili Dimension Interface jako parametr funkce getDimension(). Když funkci voláte, musíte se ujistit, že parametr, který je jí předán, odpovídá definovanému pravidlu rozhraní.

Zkompilovaný kód do Javascript bude následující:

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

Implementační rozhraní třídy

Chcete-li použít rozhraní s třídou, musíte použít klíčové slovo nářadí.

Syntaxe třídy implementující rozhraní:

class NameofClass implements InterfaceName {
}

Následující příklad ukazuje práci rozhraní s třídou.

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;
    }
}

Ve výše uvedeném příkladu jste definovali rozhraní Dimension s vlastnostmi width a height typu string a metodu nazvanou getWidth(), která má návratovou hodnotu jako řetězec.

Zkompilovaný kód do Javascript bude následující:

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

Funkce v TypeScript

Funkce jsou sada instrukcí prováděných za účelem provedení úkolu. V Javascript, většina kódu je napsána ve formě funkcí a hraje hlavní roli. V TypeScript, máte k dispozici třídu, rozhraní, moduly, jmenné prostory, ale přesto hrají důležitou roli funkce. Rozdíl mezi funkcí v javascript a TypeScript funkce je návratový typ dostupný s TypeScript funkce.

JavaFunkce skriptu:

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

TypeScript funkce:

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

Ve výše uvedených funkcích je přidán název funkce, parametry jsou a1, a b1 oba mají typ jako číslo a návratový typ je také číslo. Pokud funkci předáte řetězec, vyvolá to chybu při kompilaci při kompilaci JavaSkript.

Volání funkce: add

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 si b1 jsou povinné parametry a pokud nebudou přijaty tímto způsobem, vyvolá chybu. Typ param a návratový typ jsou také velmi důležité a nelze je po definování změnit.

Volitelné parametry funkce

V javascriptu jsou všechny parametry funkcí volitelné a pokud nejsou předány, jsou považovány za nedefinované. Ale totéž není případ s TypeScript, jakmile definujete parametry, musíte je také odeslat, ale v případě, že chcete ponechat některý parametr nepovinný, můžete tak učinit pomocí? proti názvu parametru, jak je uvedeno níže:

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.

Vezměte prosím na vědomí, že volitelné parametry mají být definovány ve funkci pouze jako poslední, nemůžete mít první parametr jako volitelný a druhý parametr jako povinný. Při volání funkce s jedním parametrem kompilátor vyvolá chybu. Je tedy nutné nechat si volitelné parametry na konec.

Přiřaďte výchozí hodnoty parametrům

Parametrům můžete přiřadit výchozí hodnoty, jak je uvedeno níže:

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

Podobně jako u volitelných parametrů, i zde musí být výchozí inicializované parametry zachovány na konci funkce.

Zbývající parametry

Viděli jste jak TypeScript zpracovává povinné parametry, volitelné parametry a parametry inicializované výchozí hodnotou. Nyní se podíváme na parametry odpočinku. Zbývající parametry jsou skupinou volitelných parametrů definovaných společně a jsou definovány pomocí tří tečky (…) následovaný názvem parametru, což je pole.

Syntaxe pro parametry zbytku:

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

Jak je uvedeno výše, zbývající parametry jsou definovány pomocí (…název-paramu); zbytek param je pole s předponou třemi tečkami. Pole bude mít předány všechny parametry. Funkci můžete volat, jak je znázorněno v příkladu níže:

Příklad:

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

Funkce šipek

Funkce šipky je jednou z důležitých funkcí vydaných v ES6 a je k dispozici v TypeScript příliš. Syntaxe funkce šipky má v sobě tlustou šipku, díky které se funkce nazývá funkce šipky.

Syntaxe funkce šipky:

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

Jaké je použití funkce Arrow?

Podívejme se na příklad, abychom pochopili případ použití funkce Arrow:

Příklad:

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

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

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

Vytvořili jste anonymní funkci, která má vlastnost this. Score se inicializuje na 0 a metoda getScore, která má interně setTimeout, a za 1 sekundu zkonzoluje this.score. Konzolová hodnota dává nedefinováno, ačkoli máte this.score definované a inicializované. Problém je zde s this klíčové slovo. Funkce uvnitř setTimeout má své vlastní toto a snaží se interně odkazovat na skóre, a protože není definováno, dává undefined.

Totéž lze provést pomocí funkce šipky, jak je znázorněno níže:

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

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

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

Změnili jste funkci uvnitř setTimeout na funkci šipky, jak je uvedeno níže:

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

Funkce šipky nemá svou vlastní tento definováno a sdílí svého rodiče tento, takže proměnné deklarované vně jsou snadno přístupné pomocí této funkce uvnitř šipky. Jsou užitečné kvůli kratší syntaxi, stejně jako pro zpětná volání, obslužné rutiny událostí, funkce vnitřního časování atd.

TypeScript Výčty

TypeScript Enum je objekt, který má společně uloženou kolekci souvisejících hodnot. Javascript nepodporuje výčty. Většina z programovací jazyk jako Java, C, C++ podporuje TypeScript Enum a je také k dispozici s TypeScript příliš. Výčty jsou definovány pomocí klíčového slova enum.

Jak vyhlásit Enum?

Syntaxe:

enum NameofEnum {
   value1,
   value2,
    ..
}

Příklad: Enum

enum Directions {
North,
South,
East,
West
}

Ve výše uvedeném příkladu jste definovali výčet nazvaný Directions. Uvedená hodnota je Sever, Jih, Východ, Západ. Hodnoty jsou číslovány od 0 pro první hodnotu ve výčtu a následně se zvyšují o 1 pro další hodnotu.

Deklarujte Enum s číselnou hodnotou

Ve výchozím nastavení, pokud výčtu není zadána žádná hodnota, považuje jej za číslo začínající od 0. Následující příklad ukazuje výčet s číselnou hodnotou.

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

Výčtu můžete také přiřadit počáteční hodnotu a další hodnoty výčtu získají zvýšené hodnoty. Například:

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

Nyní hodnota výčtu Sever začíná 5, takže Jih bude mít hodnotu 6, Východ = 7 a Západ = 8.

Můžete také přiřadit hodnoty dle vlastního výběru místo výchozích. Například:

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

Jak získat přístup k Enum?

Následující příklad ukazuje, jak využít Enum ve vašem kódu:

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

Kompilovaný kód pro javascript je následující:

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

Od Javascript nepodporuje výčty, převádí výčet na samostatně vyvolané funkce, jak je uvedeno výše.

Deklarujte Enum s hodnotou řetězce

Můžete přiřadit hodnoty řetězce dle vlastního výběru, jak je znázorněno v příkladu níže:

Příklad:

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

Kompilovaný kód pro javascript je následující:

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

V čem jsou moduly TypeScript?

Soubory vytvořené v TypeScript mají globální přístup, což znamená, že proměnné deklarované v jednom souboru jsou snadno přístupné v jiném souboru. Tato globální povaha může způsobit konflikty kódu a může způsobit problémy se spuštěním za běhu. Máte funkci exportního a importního modulu, kterou lze použít k zamezení konfliktů globálních proměnných a funkcí. Tato funkce je dostupná v JavaSkript s vydáním ES6 a také podporovaný v TypeScript.

Proč potřebujete moduly v TypeScript?

Následující příklad ukazuje problém bez modulů:

Příklad test1.ts

let age : number = 25;

Definovali jste proměnnou věk typu číslo v test1.ts.

Příklad test2.ts

V souboru test2.ts máte snadný přístup k proměnné stáří definované v test1.ts a také jej upravit, jak je uvedeno níže:

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

Výše uvedený případ tedy může způsobit mnoho problémů, protože proměnné jsou globálně dostupné a lze je upravit.

S moduly, zapsaný kód zůstává národním prostředím souboru a nelze k němu přistupovat mimo něj. Chcete-li získat přístup k čemukoli ze souboru, musíte jej exportovat pomocí klíčového slova export. It se používá, když chcete proměnnou, třídu, funkci nebo rozhraní použít v jiném souboru. import se používá, když chcete také přistupovat k exportované proměnné, třídě nebo rozhraní nebo funkci. Pokud tak učiníte, zapsaný kód zůstane v souboru nedotčen, a i když definujete stejné názvy proměnných, nebudou smíšené a chovají se lokálně k souboru, kde jsou deklarovány.

Použití exportu a importu

Existuje mnoho způsobů exportu a importu. Takže zde budeme diskutovat o syntaxi, která se nejčastěji používá.

Syntaxe pro import a export 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"

Zde je pracovní příklad pomocí exportu a importu.

Příklad:

test1.ts

export let age: number = 25;

Klíčové slovo Export se používá ke sdílení proměnné věku v jiném souboru.

test2.ts

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

Klíčové slovo import se používá pro přístup k stáří proměnnou a musíte zadat umístění souboru, jak je uvedeno výše.

Syntaxe pro import a export 2:

Existuje další způsob exportu a importu a jejich syntaxe je uvedena níže:

export = classname;

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

Když používáte export = Chcete-li exportovat svůj modul, import musí k importu použít příkaz require(“cesta k souboru názvu modulu”).

Zde je pracovní příklad ukazující výše uvedený případ:

Customer.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;

testCustomer.ts

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

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

Modul Loader

Moduly nemohou fungovat samy o sobě, takže potřebujete zavaděč modulů k nalezení závislostí importu, jak jste viděli v TypeScript příklady uvedené výše. Dostupný zavaděč modulů je CommonJS pro nodejs a Require.js ke spuštění v prohlížeči.

Pro kompilaci kódu pomocí modulu CommonJS použijte následující příkaz:

tsc --module commonjs testCustomer.ts

Pro kompilaci kódu pomocí modulu Requirejs použijte následující příkaz:

tsc --module amd testCustomer.ts

Závislé soubory budou převedeny na soubor js pomocí výše uvedeného příkazu.

Příklad testCustomer.ts na testCustomer.js pomocí Requirejs

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

Příklad Customer.ts na Customer.js pomocí 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;
});

Chcete-li to otestovat pomocí require.js, musíte vytvořit soubor s názvem main.js, který má odkaz na závislosti, jak je znázorněno.

Zde je struktura složek:

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>

Jmenné prostory v TypeScript

Namespace je v podstatě sbírka tříd, rozhraní, proměnných, funkcí společně v jednom souboru.

Syntaxe jmenného prostoru

namespace name{

export class {
}

export interface {
}

export const constname;

}

Související kód je dostupný pod jedním jmenným prostorem.

Pracovní příklad jmenného prostoru: 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;
        }
    }
}

Název jmenného prostoru je StudentSetup, přidali jste rozhraní StudDetails , funkci addSpace a třídu s názvem Student.

Přístup do jmenného prostoru

Následuje kód, kde používáte jmenný prostor StudentSetup.

testStudentSetup.ts

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

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

Třída, rozhraní, funkce dostupné uvnitř jmenného prostoru musí být odkazovány pomocí názvu příkladu jmenného prostoru StudentSetup.addSpace pro přístup k funkci, StudentSetup.Student pro přístup do třídy.

Oba soubory můžete zkompilovat do jednoho js, jak je uvedeno níže:

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

Zkontrolujte výstup v příkazovém řádku pomocí níže uvedeného příkazu:

node namespace.js

Zobrazí výstup jako:

The name is: H a r r y

Okolní deklarace v TypeScript

TypeScript umožňuje používat soubory javascriptu třetích stran pomocí ambientní deklarace. Výhodou této funkce je, že nemusíte přepisovat a přesto využívat všechny funkce knihovny v TypeScript.

Okolní syntaxe

Chcete-li deklarovat okolní modul:

declare module moduleName {
   //code here
}

Okolní soubor musí být uložen jako:

filename.d.ts

Chcete-li použít soubor název_souboru.d.ts ve vašem .ts jej musíte označit jako:

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

Deklarace typu prostředí v TypeScript bude mít odkaz na knihovnu třetí strany a znovu deklaruje požadované funkce svým vlastním typem. Předpokládejme například, že máte malou knihovnu javascriptu, jak je uvedeno níže:

Třetí strana JavaSoubor skriptu: testString.js

Příklad: 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();
    }
};

Máte objekt nazvaný StringChecks, který má funkce jako isString, convertToUpperCase, convertToLowerCase a converToStringBold.

Vytvoření ambientního modulu v TypeScript

Nyní vytvoří ambientní modul, který bude mít odkaz na výše uvedené funkce js a také přidá kontrolu typu podle našich požadavků.

Název souboru: 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;

Musíte definovat název modulu jako TestString a mít exportované rozhraní StringsFunc.

isString(str: string): booleovský

=> To bude brát param jako řetězec a návratový typ bude boolean. Při použití v souboru .ts v případě, že předáte parametr jako číslo nebo cokoli jiného než řetězec, zobrazí se chyba typu kompilace.

convertToUpperCase(str:string): řetězec

=> Toto vezme argument jako řetězec a vrátí řetězec. Totéž platí pro convertToLowerCase(str: řetězec)
: tětiva; a convertToStringBold(str: řetězec): řetězec
;

Protože v souboru javascript máte název objektu jako StringChecks, nakonec musíme totéž odkázat v souboru .d.ts, což se provádí takto:

declare var StringChecks: TestString.StringsFunc;

Pomocí modulu Ambient in TypeScript

Nyní je zde soubor test.ts, kde bude použit ambientní soubor tstring.d.ts

Příklad: 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);

Sestavit TypeScript tsc test.ts na 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);

Nyní můžete použít test.js v html souboru a také soubor knihovny testString.js

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

Toto je výstup zobrazený v konzole:

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

TypeScript Historie

Podívejte se na důležité památky z historie TypeScript:

Po dvou letech interního vývoje na Microsoft. TypeScript 0.9, vydané v roce 2013
Další podpora pro generika TypeScript 1.0 byla vydána v Build 2014
V červenci 2014 nový TypeScript přišel kompilátor, který je pětkrát rychlejší než předchozí verze.
V červenci 2015 podpora pro moduly ES6, klíčové slovo jmenného prostoru, pro podporu, dekorátory.
V listopadu 2016 byla přidána funkce, jako je klíč a typy vyhledávání mapovaných typů a zbytek.
27. března 2018 byly přidány podmíněné typy, vylepšený klíč s podporou typů křižovatek TypeScript.

Proč používat TypeScript?

Zde jsou důležité výhody/výhody používání TypeScript

Velký a komplexní projekt v JavaSkript je náročný na kódování a údržbu.
TypeScript pomáhá hodně v organizaci kódu a přesto zbavuje většinu chyb během kompilace.
TypeScript podporuje knihovny JS a dokumentaci API
Je to volitelně typovaný skriptovací jazyk
TypeScript Kód lze převést na prostý JavaKód skriptu
Lepší strukturování kódu a objektově orientované programovací techniky
Umožňuje lepší podporu nástroje pro dobu vývoje
Může rozšířit jazyk nad rámec standardních dekorátorů, async/await

Kdo používá TypeScript?

Zde jsou některé nejběžnější aplikace TypeScript:

Úhlový tým používá TypeScript.
Instalace NodeJS a NPM
TypeScript Instalace
Sestavit TypeScript kód do Javascript
Spusťte kód pomocí Nodejs
Provést Javascript v prohlížeči
Sestavit TypeScript kód do Javascript pomocí verze EcmaScript
Můžete snadno kompilovat kód napsaný v TypeScript na JavaSkriptujte pomocí NodeJS.
Takže pracovat TypeScript musíte nejprve stáhnout a nainstalovat NodeJS.

Shrnutí

TypeScript je nadmnožinou JavaSkript. TypeScript je čistě objektově orientovaný programovací jazyk, který podporuje třídy, rozhraní atd.
TypeScript podporuje všechny uvolněné funkce Ecmascript a vývojáři je mohou používat při kódování.
Proměnné se používají k ukládání hodnot a hodnota může být řetězec, číslo, logická hodnota nebo výraz.
In TypeScript, typ proměnné je definován pouze na začátku a během provádění musí zachovat stejný typ, jakékoli změny v něm povedou k chybě při kompilaci během kompilace do javascriptu.
Vstupní pole TypeScript je datový typ, do kterého můžete uložit více hodnot.
Třída je nová funkce přidaná od ES6 dále, takže dříve JavaSkriptujte funkčnost typu třídy pomocí funkce s prototypovou funkcí pro opětovné použití kódu.
TypeScript podporuje modifikátory veřejného, soukromého a chráněného přístupu k vašim metodám a vlastnostem.
Jedním z hlavních rysů TypeScript je rozhraní. Rozhraní je sada definovaných pravidel, která musí být implementována entitou, která jej používá.
Funkce jsou sada instrukcí prováděných za účelem provedení úkolu.
TypeScript Enum je objekt, který má společně uloženou kolekci souvisejících hodnot.

Co je to TypeScript?

Jak stáhnout a nainstalovat TypeScript

Sestavit TypeScript kód do Javascript

Provést Javascript pomocí Nodejs

Sestavit TypeScript kód do Javascript pomocí verze EcmaScript

SOUVISEJÍCÍ ČLÁNKY

Proměnné v TypeScript

Deklarování proměnných pomocí var

Deklarace proměnných pomocí let

Deklarace proměnných pomocí konst

Typy v TypeScript

Číslo

Řetězec

Boolean

Žádný

Zrušeno

TypeScript Řada

Deklarujte a inicializujte pole

Různé způsoby přístupu k prvkům z pole

Použití TypeScript pro smyčku

Použití smyčky for-in

Použití smyčky for-of

Použití foreach smyčky

TypeScript Pole metody

vlastnost délky

Reverse metoda

Způsob řazení

Pop metoda

Shift metoda

Push metoda

metoda concat

Příklad pro vlastnost length

Příklad pro reverzní metodu

Příklad pro metodu řazení

Příklad metody pop

Příklad pro metodu posunu

Příklad pro metodu push

Příklad pro metodu concat

Třída v TypeScript

Definování třídy v TypeScript

Příklad: Pracovní příklad na Class

Konstruktér v a TypeScript Třída

Metody uvnitř a TypeScript Třída

Vytvoření instance třídy v TypeScript

Kompilace TypeScript Třída do JavaScénář

Třídní dědičnost

Syntaxe dědičnosti třídy:

Přístup k modifikátorům v TypeScript

Rozhraní v TypeScript

Syntaxe rozhraní v TypeScript

Použití rozhraní na funkci jako návratový typ

Rozhraní jako parametr funkce

Implementační rozhraní třídy

Funkce v TypeScript

Volání funkce: add

Volitelné parametry funkce

Přiřaďte výchozí hodnoty parametrům

Zbývající parametry

Funkce šipek

Jaké je použití funkce Arrow?

TypeScript Výčty

Jak vyhlásit Enum?

Deklarujte Enum s číselnou hodnotou

Jak získat přístup k Enum?

Deklarujte Enum s hodnotou řetězce

V čem jsou moduly TypeScript?

Proč potřebujete moduly v TypeScript?

Použití exportu a importu

Syntaxe pro import a export 1:

Syntaxe pro import a export 2:

Modul Loader

Příklad testCustomer.ts na testCustomer.js pomocí Requirejs

Příklad Customer.ts na Customer.js pomocí Requirejs

Jmenné prostory v TypeScript

Syntaxe jmenného prostoru

Přístup do jmenného prostoru

Okolní deklarace v TypeScript

Okolní syntaxe

Chcete-li deklarovat okolní modul:

Okolní soubor musí být uložen jako: