TypeScript Tutoriál: Co je to, Rozhraní, Výčet, Pole

Co je to TypeScript?

TypeScript je nadmnožinou JavaSkript. TypeScript je objektově orientovaný programovací jazyk, který podporuje třídy, rozhraní a další. 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 v Nodejs.

Všechny nejnovější funkce vydané pro ECMAScript jsou podporovány v TypeScripta navíc TypeScript má vlastní objektově orientované funkce, jako jsou rozhraní, ambientní deklarace a dědičnost tříd, které pomáhají při vývojiping rozsáhlá aplikace, kterou by jinak bylo obtížné zabudovat JavaScénář.

Vztah je jednosměrný. Každý platný JavaSoubor skriptu je již platný. TypeScript, ale opak neplatí, protože anotace typů existují pouze v TypeScript a jsou během kompilace vymazány.

Proč používat TypeScript?

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

• Velké a komplexní projekty v JavaSkript je náročný na kódování a údržbu.
• TypeScript hodně pomáhá s organizací kódu a odstraňuje většinu chyb během kompilace, nikoli za běhu.
• TypeScript podporuje JS knihovny a dokumentaci k API.
• Jedná se o skriptovací jazyk s volitelně typovanými typy, takže typy lze zavádět postupně.
• TypeScript kód lze převést do prostého formátu JavaSkriptový kód pro libovolný cílový prohlížeč.
• Nabízí lepší strukturování kódu a techniky objektově orientovaného programování.
• Umožňuje lepší podporu nástrojů pro zkrácení doby vývoje, včetně automatického dokončování a bezpečného refaktoringu.
• Může rozšířit jazyk nad rámec standardu o funkce, jako jsou dekoratéry.

Největším praktickým přínosem je podpora editoru. Protože kompilátor zná tvar každé hodnoty, může editor přejmenovat vlastnost v celém projektu a nahlásit každé místo, které již neodpovídá.

TypeScript Historie

Pojďme se podívat na důležité památky z historie TypeScript:

• Po dvou letech interního vývoje na Microsoft, TypeScript Verze 0.9 byla vydána v roce 2013.
• TypeScript Verze 1.0 s dodatečnou podporou generik byla vydána v rámci sestavení 2014.
• V červenci 2014 nový TypeScript dorazil kompilátor, který byl pětkrát rychlejší než předchozí verze.
• V červenci 2015 byla přidána podpora pro moduly ES6, klíčové slovo namespace, for…of a dekorátory.
• V listopadu 2016 byly přidány mapované typy, typy klíčů a vyhledávání a zbytek a rozložení objektů.
• 27. března 2018 byly přidány podmíněné typy a vylepšený keyof s typy průniků.
• TypeScript Verze 5.0, vydaná v březnu 2023, modernizovala dekoratéry a zmenšila velikost balíčku.
• TypeScript Verze 6.0 dorazila v březnu 2026 jako finální vydání postavené na JavaKódová základna skriptů.
• TypeScript Verze 7.0 přesouvá kompilátor do nativní implementace Go, která Microsoft uvádí, že je zhruba desetkrát rychlejší než 6.0.

Kdo používá TypeScript?

TypeScript již není jen specializovanou volbou. Je základem několika nejpoužívanějších front-end a back-end nástrojů a níže uvedený seznam ukazuje, kde se s ním začátečník nejpravděpodobněji setká.

• Úhlové: Framework Angular je napsán v jazyce TypeScripta očekává se, že v něm bude napsán i kód aplikace.
• Projekty React a Vue: Oba ekosystémy dodávají oficiální TypeScript šablony a většina moderních začátečníků to ve výchozím nastavení povoluje.
• Backendy Node.js: Serverové frameworky, jako je NestJS, jsou postaveny na TypeScript třídy a dekoratéři.
• Nástroje editoru: Visual Studio Code je sám o sobě velký TypeScript kódovou základnu, a proto je jeho jazyková podpora tak kompletní.
• Front-endy pro velké podniky: Týmy spolupracující s mnoha přispěvateli jej používají k zachycení chyb integrace před nasazením.

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 si a nainstalujte Nodejs pro váš operační systém. Podrobné pokyny naleznete v příručce na jak stáhnout a nainstalovat Node.js.

Krok 2) Zkontrolujte verzi Nodejs a npm

Chcete-li zkontrolovat, zda jsou nainstalovány Nodejs a npm, zkontrolujte verzi v příkazovém řádku.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Funguje jakákoli aktuální verze Node LTS. TypeScript sám o sobě vyžaduje pro spuštění kompilátoru pouze podporovanou verzi Node.

Krok 3) TypeScript Instalace

Vytvořte adresář projektu typu project\ a spusťte příkaz npm init, jak je znázorněno v následujícím příkazu:

npm init

Krok 4) Spusťte instalaci

Tím se vytvoří package.json, který bude ukládat závislosti pro náš projekt.

Jakmile je hotovo, nainstalujte 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žít TypeScript TSC příkaz 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 install --save-dev typescript

Vytvořte složku src\ v adresáři projektu a uvnitř 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ásledující příkaz:

tsc test.ts

If TypeScript je nainstalován lokálně ve vašem projektu, musíte použít cestu TypeScript z node_modules, jak je znázorněno, nebo spusťte pomocí npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Výše uvedený příkaz vytvoří soubor test.js, který bude obsahovat kód zkompilovaný do JavaSkript.

Příklad: test.js

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

Provést Javascript pomocí Nodejs

Nyní spustíme test.js v Nodejs takto:

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

Hodnota předaná souboru console.log 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 vydané funkce ECMAScriptu a vývojáři je mohou používat při kódování. Ne všechny nové funkce jsou však podporovány ve starších prohlížečích, takže může být nutné kompilovat do starší verze ECMAScriptu. TypeScript poskytuje možnosti kompilátoru, které přesně tohle dělají.

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 pro klasický kompilátor. Pokud to chcete změnit, můžete použít výše uvedený příkaz.

V současné době budeme jako cíl používat ES6:

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 použitá funkce šipky je funkcí ES6 a při kompilaci do ES6 se nezmění.

Ve výchozím nastavení je cílem 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 zde se tlustá šipka změní 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.

Proměnné nelze v kódu použít bez jejich definice. Pro 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ý JavaSkript a uživatelé obeznámení s JavaSkript to najde velmi snadno. V moderním kódu, nechat a const jsou upřednostňovány před byl, protože jejich blokový rozsah zabraňuje celé třídě chyb.

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

Syntaxe:

var firstname = "Roy";

Pojďme se podívat na několik TypeScript příklady pro pochopení fungování klíčového slova var a také rozsahu platnosti 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 and accessible only inside function test
    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; // t is redeclared inside the function, so changes stay local
    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(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the 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 jedním důležitým rozdílem, který ukazuje níže uvedený příklad.

Příklad:

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

test(); // throws an error: Cannot find name 't'

Výše TypeScript příklad vyvolá chybu, ale stejný kód by fungoval i s byl klíčové slovo. Proměnné deklarované pomocí nechat jsou dostupné pouze v bloku, ve kterém jsou deklarovány. V tomto příkladu existuje t pouze uvnitř bloku if, nikoli v celé funkci.

Totéž platí uvnitř jakékoli funkce, smyčky for, smyčky while nebo bloku switch. Proměnná let je k dispozici pouze uvnitř daného bloku a odkazování na ni vně vyvolá chybu. Toto je hlavní rozdíl mezi var a let.

Deklarace proměnných pomocí konst

Const znamená konstantní proměnné. Jsou podobné proměnným typu let, s tím rozdílem, že jakmile je hodnota přiřazena, nelze ji změnit. Deklarace konstanty musí být proto inicializována na stejném řádku.

Syntaxe:

const name = "Roy";

Příklad:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Proto použijte const vždy, když víte, že přiřazená hodnota nebude znovu přiřazena. Upozorňujeme, že const zabraňuje opětovnému přiřazení vazby, nikoli modifikaci objektu, na který odkazuje.

Typy v TypeScript

TypeScript je silně typovaný jazyk, zatímco JavaSkript ne. Proměnnou, jejíž hodnota je definována jako řetězec, lze bez problémů změnit na číslo v JavaSkript. Totéž není tolerováno v TypeScript, v TypeScriptTyp proměnné je definován na začátku a během provádění si musí tento typ zachovat. Jakákoli změna vede k chybě při kompilaci do JavaSkript.

Následují základní typy:

Číslo

Přijímá pouze celá čísla, čísla s desetinnou čárkou, zlomky a podobné číselné hodnoty.

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 s číselnými typy:

toFixed() – převede číslo na řetězec a zachová desetinná místa přidělená 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 číselnými metodami

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 řetězcové hodnoty.

Syntaxe:

let str :string = "hello world";

Zde je několik důležitých metod, které lze použít s typy řetězců:

• rozdělit() – tato metoda rozdělí řetězec do pole.
• charAt() – tato metoda vrátí znak na zadaném indexu.
• indexOf() – tato metoda vrátí pozici prvního výskytu zadané hodnoty.
• nahradit() – tato metoda přijímá 2 řetězce. Vyhledá první hodnotu v řetězci a pokud je přítomna, nahradí ji druhou hodnotou a vrátí nový řetězec.
• trim() – tato metoda odstraní bílé znaky z obou stran řetězce.
• podstr() – tato metoda vrátí část řetězce v závislosti na počáteční pozici a zadané délce.
• podřetězec() – tato metoda vrátí část řetězce v závislosti na počáteční a koncové pozici. Znak na koncové pozici je 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 if the value does not exist
_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

Boolean přijímá pouze logické hodnoty true a false. Na rozdíl od prostého JavaSkript, čísla 0 a 1 nejsou akceptována, protože jsou typu číslo.

Syntaxe:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Žádný

Syntaxe:

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

Proměnné deklarované pomocí žádný Typ může obsahovat řetězec, číslo, pole, booleovskou hodnotu nebo void. TypeScript nevyvolá žádnou chybu při kompilaci, což je podobné proměnným v JavaSkript. Typ any používejte pouze tehdy, pokud si nejste jisti typem hodnoty, která bude s danou proměnnou spojena, protože tím vypnete každou kontrolu dané hodnoty.

Zrušeno

Typ Void se nejčastěji používá jako návratový typ funkce, která nic nevrací.

Syntaxe:

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

TypeScript Řada

An Řada in TypeScript je datový typ, ve kterém můžete ukládat více hodnot. Naučme se, jak deklarovat a přiřazovat hodnoty pro operace s polem v TypeScript.

Od TypeScript Jelikož je to silně typovaný jazyk, musíte uvést datový typ hodnot v poli. Jinak bude s ním zacházeno jako s typem 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 with all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

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

Pro získání prvků z pole začínají hodnoty od indexu 0 až do délky pole mínus jedna.

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

Prvky z pole můžete také získat pomocí TypeScript for smyčka, Jak je ukázáno 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]);
}

Výstup:

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

Výstup:

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

Výstup:

2016
2017
2018
2019

Použití smyčky forEach

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

Výstup:

2016
2017
2018
2019

TypeScript Pole metody

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

Příklad pro vlastnost length

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

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

Příklad pro reverzní metodu

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

Příklad pro metodu řazení

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

Příklad metody pop

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

Příklad pro metodu posunu

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

Příklad pro metodu push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
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 cokoli je možné v JavaSkript je také možný v TypeScript. Třída je funkce přidaná od verze ES6. Dříve v JavaSkriptová, třídní funkcionalita byla dosažena pomocí funkce s prototypovými metodami pro opětovné použití kódu. Pomocí tříd se váš kód může přiblížit jazykům jako například Java, C# a Python, kde lze kód snadno znovu použít.

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. Ta má vlastnosti věk, jméno a číslo_role.

Konstruktér v a TypeScript Třída

Výše definovaná třída Students 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;
    }

Konstruktor má parametry age, name a roll_no. Konstruktor se postará o inicializaci vlastností při vytváření instance třídy. K vlastnostem se přistupuje pomocí tento klíčové slovo, například this.age pro přístup k age a this.roll_no pro přístup k roll_no. Můžete také mít výchozí konstruktor, jak je znázorněno níže:

constructor () {}

Metody uvnitř a TypeScript Třída

Ve třídě Students jsou definovány metody, například getRollNo(), getName() a getAge(), které vracejí hodnoty vlastností roll_no, name a age.

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

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

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

Vytvoření instance třídy v TypeScript

In TypeScript, k vytvoření instance třídy se používá operátor new. Když vytvoříte instanci s operátorem new, získáte objekt, který má přístup k vlastnostem a metodám třídy, jak je znázorněno níže:

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

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

Pro kompilaci do můžete použít příkaz tsc, jak je znázorněno níže. JavaSkript.

Command: tsc  Students.ts

Výstup z JavaKód skriptu 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 JavaSkript, třída je převedena na samovolně volanou funkci.

Třídní dědičnost

Třídy lze dědit pomocí rozšiřuje 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 funkční příklad třídy využí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, Person a Student. Student rozšiřuje třídu Person a objekt vytvořený ze třídy Student má přístup k vlastním metodám a vlastnostem, stejně jako k metodám a vlastnostem třídy, kterou rozšiřuje.

Nyní přidejme několik změn 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);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    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ěnou oproti předchozímu příkladu je konstruktor definovaný ve třídě Student. Konstruktor přijímá stejné parametry jako základní třída a navíc jakékoli další vlastní parametry.

In TypeScript Musíte zavolat super se všemi parametry základní třídy. Toto musí být první příkaz uvnitř konstruktoru, protože super spouští konstruktor rozšířené třídy. Jakákoli vlastnost deklarovaná odvozenou třídou, například tmaks, musí být poté explicitně přiřazena, jinak by getMarks vrátil undefined.

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

TypeScript podporuje modifikátory přístupu public, private a protected u vašich metod a vlastností. Ve výchozím nastavení, pokud není zadán žádný modifikátor přístupu, je metoda nebo vlastnost považována za veřejnou a je snadno dostupná z objektu třídy.

V případě modifikátorů privátního přístupu nejsou členové dostupní z objektu třídy a jsou určeni 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 členové určeni k použití uvnitř třídy a zděděné třídy a nejsou 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

Rozhraní v TypeScript

Jedním z hlavních rysů TypeScript je rozhraní. Rozhraní je sada pravidel, která musí implementovat entita, která ho používá. Entita může být třída, funkce nebo proměnná. Rozhraní se může skládat z vlastností a metod. Vlastnost nebo metodu můžete označit jako volitelnou pomocí syntaxe „?“. Rozhraní přidává silnou kontrolu typu pro jakoukoli funkci, proměnnou nebo třídu, která jej implementuje.

Syntaxe rozhraní v TypeScript

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

Definovali jste rozhraní s názvem Dimension, které má vlastnosti width a height, obě typu string.

Toto rozhraní lze nyní implementovat 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 obě jsou povinné. Pokud je některá vlastnost vynechána nebo je změněn typ, dojde k chybě při kompilaci kódu. JavaSkript.

Výše uvedený kód, po kompilaci do JavaSkript vypadá takto:

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

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

Použití rozhraní na funkci jako návratového typu

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 jako návratový typ funkce getDimension() použito rozhraní Dimension. Návratová hodnota musí odpovídat vlastnostem a typům deklarovaným v rozhraní.

Zkompilovaný JavaKód skriptu bude vypadat takto:

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

Během kompilace, pokud návratový typ neodpovídá rozhraní, 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"}); // "300px-250px"

Ve výše uvedeném příkladu jste použili rozhraní Dimension jako parametr funkce getDimension(). Při volání funkce musí předaný parametr odpovídat pravidlům definovaným rozhraním.

Zkompilovaný JavaKód skriptu bude vypadat takto:

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

Třída implementující rozhraní

Pro použití rozhraní s třídou je potřeba klíčové slovo nářadí.

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

class NameofClass implements InterfaceName {
}

Následující příklad ukazuje rozhraní pracující 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, obě typu string, a metodou getWidth(), která vrací řetězec.

Zkompilovaný JavaKód skriptu bude vypadat takto:

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 sady instrukcí prováděných k provedení úkolu. V JavaVe skriptu je většina kódu napsána ve formě funkcí a ty hrají hlavní roli. TypeScript Máte k dispozici třídy, rozhraní, moduly a jmenné prostory, ale funkce stále hrají důležitou roli. Rozdíl mezi funkcí v JavaSkript a TypeScript jsou typy parametrů a návratových hodnot 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é funkci je název funkce sčítat, parametry jsou a1 a b1, oba typu číslo a návratový typ je také číslo. Pokud funkci předáte řetězec, při kompilaci do dojde k chybě kompilace. JavaSkript.

Volání funkce: add

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

Parametry a1 a b1 jsou povinné a pokud nejsou zadány, způsobí to chybu. Typy parametrů a návratový typ jsou stejně důležité a po definování je nelze změnit.

Volitelné parametry funkce

In JavaVe skriptu jsou všechny parametry funkcí volitelné a pokud nejsou předány, jsou považovány za nedefinované. Totéž neplatí pro TypeScriptJakmile definujete parametry, musíte je zadat. Pokud chcete, aby byl parametr volitelný, přidejte za jeho název otazník, jak je znázorněno níže:

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

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

Upozorňujeme, že volitelné parametry musí být definovány jako poslední. První parametr nemůže být volitelný a druhý povinný, protože by kompilátor nevěděl, která hodnota byla zadána.

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

Parametrům můžete přiřadit výchozí hodnoty, jak je znázorněno 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 volitelné parametry musí být i výchozí inicializované parametry ponechány na konci seznamu parametrů.

Zbývající parametry

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

Syntaxe pro parametry zbytku:

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

Jak je ukázáno výše, parametr rest je pole s předponou tří teček. Toto pole bude obsahovat všechny zbývající argumenty předané funkci.

Příklad:

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

Funkce šipek

Funkce šipky je jednou z důležitých funkcí vydaných v ES6 a je k dispozici v TypeScript také. Syntaxe má v sobě tlustou šipku, odkud pochází i název.

Syntaxe funkce šipky:

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

K čemu slouží šipková funkce?

Podívejme se na příklad, abychom pochopili případ použití šipkové funkce.

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 funkci s vlastností score inicializovanou na 0 a metodu getScore, která interně používá setTimeout a po jedné sekundě zaznamená this.score. Zaznamenaná hodnota je nedefinovaná, přestože je this.score definována a inicializována. Problém spočívá v tento klíčové slovo. Funkce uvnitř setTimeout má svůj vlastní this a protože na ní není definováno skóre, výsledek je nedefinovaný.

Totéž lze řešit pomocí funkce se šipkami, 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();

Funkce šipky nemá svou vlastní tento, a místo toho sdílí ten z nadřazeného oboru, takže proměnné deklarované mimo něj jsou přístupné pomocí this uvnitř šipkové funkce. Jsou užitečné kvůli kratší syntaxi a také pro zpětná volání, obslužné rutiny událostí a časovací funkce.

TypeScript Výčty

A TypeScript enum je objekt, který obsahuje kolekci souvisejících hodnot uložených pohromadě. JavaSkript nativně nepodporuje výčty. Většina programovacích jazyků, jako například Java, C a C++ podpora výčtů a TypeScript je také zpřístupňuje. Výčty se definují 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 s názvem Directions (Směry) s hodnotami North (Sever), South (Jih), East (Východ) a West (Západ). Hodnoty jsou číslovány od 0 pro první položku a zvyšují se o 1 pro každou další položku.

Deklarujte výčet s číselnou hodnotou

Ve výchozím nastavení, pokud členu výčtu není přiřazena hodnota, nabývá číslo počínaje 0. Následující příklad ukazuje výčt s explicitními číselnými hodnotami.

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

Můžete také přiřadit počáteční hodnotu a následující členové obdrží zvýšenou hodnotu. Například:

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

Sever začíná na čísle 5, takže jih je 6, východ je 7 a západ je 8.

Místo výchozích hodnot můžete také přiřadit hodnoty dle vlastního výběru. 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 použít výčtový typ v 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

Zkompilovaný JavaSkript 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 JavaSkript nepodporuje výčty, kompilátor převede výčtovou funkci na funkci volanou automaticky, jak je znázorněno výše. Dvojité přiřazení vytváří obrácené mapování.ping od čísla zpět ke jménu.

Deklarujte výčet s řetězcovou hodnotou

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

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 undefined

Zkompilovaný JavaSkript 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 přístupné v jiném souboru. Tato globální povaha může způsobit konflikty kódu a problémy za běhu. Funkcionalitu modulů exportu a importu lze použít k zamezení konfliktů globálních proměnných a funkcí. Tato funkce se objevila v roce JavaSkript s verzí ES6 a je také podporován 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 přístup k proměnné stáří definované v souboru test1.ts a také jej upravte, jak je znázorněno níže:

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

To může způsobit spoustu problémů, protože proměnné jsou globálně dostupné a lze je upravovat odkudkoli.

S moduly, napsaný kód zůstává lokální v souboru a nelze k němu přistupovat mimo něj. Chcete-li sdílet cokoli ze souboru, je nutné to exportovat pomocí klíčového slova export. Vývoz se používá, když chcete, aby proměnná, třída, funkce nebo rozhraní byly použity v jiném souboru. import se používá, když chcete přistupovat k exportované položce. Tímto způsobem zůstane kód v souboru zachován a i když definujete stejné názvy proměnných, nebudou zaměněny.

Použití exportu a importu

Existuje mnoho způsobů exportu a importu. Probereme si syntaxi, která se používá nejčastěji.

Syntaxe pro import a export 1:

export  nameofthevariable or class name or interface name etc

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

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

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

test1.ts

export let age: number = 25;

Klíčové slovo export se používá ke sdílení proměnné age s jiným souborem.

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 i jiný způsob exportu a importu, jehož syntaxe je uvedena níže:

export = classname;

import classname = require("file path of modulename")

Když používáte export = Pro export modulu je nutné při importu použít require(„cesta k souboru s názvem modulu“).

Zde je pracovní příklad, který tento případ ukazuje.

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 samostatně, takže potřebujete zavaděč modulů, který vyhledá závislosti importu, jak je vidět na TypeScript příklady výše. Dostupné zavaděče modulů jsou CommonJS pro Nodejs a Require.js pro spuštění v prohlížeči.

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

tsc --module commonjs testCustomer.ts

Pro kompilaci kódu s použitím formátu modulu Requirejs použijte následující příkaz:

tsc --module amd testCustomer.ts

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

Příklad testCustomer.ts pro testCustomer.js s využitím 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 do Customer.js s využitím 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;
});

Pro otestování pomocí require.js je potřeba vytvořit soubor s názvem main.js, který odkazuje 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

Jmenný prostor obsahuje kolekci tříd, rozhraní, proměnných a funkcí pohromadě v jednom souboru.

Syntaxe jmenného prostoru

namespace name{

export class {
}

export interface {
}

export const constname;

}

Související kód je k dispozici 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 Nastavení studentaa přidali jste rozhraní StudDetails, funkci addSpace a třídu s názvem Student.

Přístup k jmennému prostoru

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

testStudentSetup.ts

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

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

Na třídu, rozhraní nebo funkci dostupnou uvnitř jmenného prostoru je nutné odkazovat pomocí názvu jmenného prostoru, například StudentSetup.addSpace pro přístup k funkci a StudentSetup.Student pro přístup do třídy.

Oba soubory můžete zkompilovat do jednoho js souboru, jak je znázorněno 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

Výstup:

The name is :H a r r y

Okolní deklarace v TypeScript

TypeScript umožňuje používat třetí strany JavaSoubory skriptů používající ambientní deklarace. Výhodou této funkce je, že nemusíte knihovnu přepisovat a přesto můžete používat všechny její funkce s kontrolou typů. TypeScript.

Okolní syntaxe

Deklarace ambientního modulu:

declare module moduleName {
   //code here
}

Soubor s ambientními údaji musí být uložen jako:

filename.d.ts

Chcete-li použít soubor název_souboru.d.ts ve vašem souboru .ts na něj musíte odkazovat takto:

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

Deklarace typu prostředí v TypeScript odkazuje na knihovnu třetí strany a znovu deklaruje požadované funkce s jejich vlastními typy. Vezměte si například malý JavaKnihovna skriptů zobrazená níže.

Třetí strana JavaSoubor skriptu: 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 s názvem StringChecks, který má funkce isString, convertToUpperCase, convertToLowerCase a convertToStringBold.

Vytvoření ambientního modulu v TypeScript

Nyní vytvoříme ambientní modul, který bude odkazovat na JavaSkript funguje výše a podle potřeby přidává kontroly typů.

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;

Definujete modul s názvem TestString a exportujete rozhraní StringsFunc. Každá signatura uvádí, co funkce přijímá a vrací:

• isString(str: string): booleovský – bere řetězec a vrací booleovskou hodnotu. Předání čísla nebo jakéhokoli jiného typu způsobí chybu při kompilaci.
• convertToUpperCase(str: string): string – vezme řetězec a vrátí řetězec.
• convertToLowerCase(str: string): string – vezme řetězec a vrátí řetězec.
• convertToStringBold(str: řetězec): řetězec – vezme řetězec a vrátí řetězec.

Vzhledem k tomu, JavaSoubor skriptu zpřístupňuje název objektu StringChecks, na který se nakonec odkazujeme v souboru .d.ts:

declare var StringChecks: TestString.StringsFunc;

Použití modulu Ambient v TypeScript

Zde je soubor test.ts, který používá ambientní soubor tstring.d.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);

Zkompilujte s tsc test.ts pro vytvoření 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 společně se souborem knihovny testString.js.

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

Výstup:

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

Chcete-li pokračovat, porovnejte oba jazyky přímo v TypeScript vs JavaScénář, znovu navštívit JavaMetody skriptových polí pro zde použité netypové ekvivalenty a prostudujte si smyčky v JavaScénář a interní a externí JavaScénář pro základy prohlížeče, na kterých se kompilovaný výstup opírá.

Nejčastější dotazy