TypeScript Oktatóanyag: Mi az, felület, enum, tömb példával

Mi a TypeScript?

TypeScript egy szuperkészlete JavaForgatókönyv. TypeScript egy tiszta objektum-orientált programozási nyelv, amely támogatja az osztályokat, interfészeket stb. Ez egy nyílt forráskódú nyelv, amelyet Microsoft amely statikusan lefordítja a kódot arra JavaForgatókönyv. Könnyen futtatható böngészőben vagy Nodejs-ben.

Az ECMAScript összes legújabb funkciója támogatott TypeScript és amellett TypeScript saját objektum-orientált szolgáltatásai vannak, mint például interfészek, környezeti deklaráció, osztályöröklődés stb., amelyek segítenek egy nagy alkalmazás fejlesztésében, amelyet egyébként nehéz lenne megvalósítani JavaForgatókönyv.

Hogyan kell letölteni és telepíteni TypeScript

Íme a letöltési és telepítési folyamat lépésről lépésre TypeScript:

1. lépés) Töltse le és telepítse a Nodejs-t

Menjen a nodejs hivatalos webhelyére: https://nodejs.org/en/download/ és töltse le és telepítse a nodejs-t az operációs rendszerének megfelelően. A nodejs letöltésének részletes útmutatója itt érhető el: https://www.guru99.com/download-install-node-js.html

2. lépés) Ellenőrizze a Nodejs és az npm verziót

Annak ellenőrzéséhez, hogy a nodejs és az npm telepítve van-e, csak ellenőrizze a verziót a parancssorban.

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

D:\typeproject>npm --version
6.4.1

Tehát telepítve van a nodejs v10 és az npm 6.

Step 3) TypeScript Telepítés

Hozza létre a projekt/type projektkönyvtárat, és futtassa az npm init parancsot az alábbi parancs szerint:

npm init

4. lépés) Indítsa el a telepítést

Most létrehozzuk a .json csomagot, amely tárolja a projektünk függőségeit.

A telepítés befejezése után TypeScript az alábbiak szerint:

npm -g install typescript

A fenti parancs gondoskodik a telepítésről TypeScript. A „-g” hozzáadása az npm installhoz települ TypeScript globálisan. A -g használatának az az előnye, hogy képes lesz használni TypeScript tsc parancsot bármely könyvtárból, ahogyan az globálisan telepítve van. Ha nem akarod telepíteni TypeScript globálisan használja az alábbi parancsot:

npm --save install typescript

Hozzon létre src/ mappát a projektkönyvtárban, és az src/ mappában hozza létre TypeScript a test.t fájlt, és írja be a kódját.

Példa: test.ts

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

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

Összeállít TypeScript kódot Javascript

A fenti kód lefordításához használja a következő parancsot:

If TypeScript globálisan telepítve van, használja az alábbi parancsot:

tsc test.ts

If TypeScript helyileg telepítve van a projekthez, amelynek elérési útját kell használnia TypeScript a node_modules-ból, ahogy az ábrán látható:

node_modules/typescript/bin/tsc test.ts

A fenti parancs egy test.js fájlt hoz létre, és a kód javascriptre lesz fordítva.

Példa: test.js

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

Végrehajt Javascript Nodejs használatával

Ebben TypeScript oktatóprogramban a test.js fájlt a következőképpen hajtjuk végre a nodejs-ben:

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

A konzolozott érték megjelenik a test.js futtatásakor

Végrehajt JavaSzkript a böngészőben

Példa:

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

Összeállít TypeScript kódot Javascript EcmaScript verzió használatával

TypeScript támogatja az összes kiadott Ecmascript funkciót, és a fejlesztők ugyanezt használhatják kódolás közben. De nem minden új funkció támogatja a régebbi böngészőket, ezért a javascriptet az Ecmascript régebbi verziójára kell fordítania. TypeScript fordítói lehetőségeket biztosít, amelyek ezt megtehetik.

Példa: test.ts

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

addnumbers(10, 20);

A választott ES verzióra való fordításhoz a következőképpen használhatja a target vagy a t opciót a parancsban:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Alapértelmezés szerint a cél az ES3. Ha módosítani szeretné, használhatja a fenti parancsot.

Jelenleg ebben az ES6-ot fogjuk használni TypeScript oktatóanyag célként:

tsc --target ES6  test.ts

test.ts test.js

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

addnumbers(10, 20);

A kód változatlan marad, mivel az Ön által használt nyílfüggvény ES6 szolgáltatás, és az ES6-ra fordítva nem változik.

Alapértelmezés szerint a cél az ES3, így cél nélkül a test.js fájlt a következőképpen kapja meg:

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

Tehát itt a kövér nyíl normál névtelen funkcióra vált.

Változók be TypeScript

Változók értékek tárolására szolgálnak, és az érték lehet karakterlánc, szám, logikai érték vagy kifejezés. Amikor a változókról van szó TypeScript, hasonlítanak a JavaForgatókönyv. Tehát tanuljuk meg deklarálni és értéket rendelni a változókhoz TypeScript.

A változók nem használhatók a kódban definiálás nélkül. Változó deklarálásához használhatja

volt kulcsszó,

hadd kulcsszó

const kulcsszó

Munka változókkal TypeScript hasonló a javascripthez, és a javascriptet ismerő felhasználók számára ez nagyon egyszerű. Csak a változók szeretik hadd és a const ehhez képest nemigen használják volt.

Változók deklarálása a var

Syntax:

var firstname = "Roy";

Vessünk egy pillantást néhányra TypeScript példák a var kulcsszó működésének, valamint a használatával deklarált változók hatókörének megértéséhez volt kulcsszó.

Példa 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élda 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élda 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.

Változók deklarálása let segítségével

A TypeScript A let szintaxisa a következő:

Syntax:

let name="Roy";

A hadd változó majdnem ugyanaz, mint volt, de kis eltéréssel, és ugyanazt fogja érteni egy an TypeScript példa.

Példa:

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

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

Felett TypeScript példa hibát dob, de ugyanez jól működött volna, ha a volt kulcsszó. Változók használata hadd a deklarált blokkhatókörön belül elérhetők, például a t változó csak az if-blokkon belül érhető el, nem pedig a teljes függvény számára.

Akkor is, ha véletlenül deklarál egy változót bármely függvényen belül, vagy for-loop, while-loop, TypeScript switch blokk, akkor csak azon a blokkon belül lesz elérhető, és a blokkon kívül nincs rá hivatkozás, és hibát fog kiütni, ha a változót a blokkon kívül használják. Ez a fő különbség a var és a let kulcsszóval deklarált változók között.

Változók deklarálása a const segítségével

A Const állandó változókat jelent. Hasonlítanak a let változókhoz, azzal az egyetlen különbséggel, hogy az érték hozzárendelése után nem módosítható.

Syntax:

const name;

Példa:

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

Így a felhasználók csak akkor használhatják a const változókat, ha tudják, hogy nem kell módosítaniuk a hozzárendelt értékeket.

Beír TypeScript

TypeScript egy erősen tipizált nyelv, míg a javascript nem. Egy karakterláncként meghatározott értékkel rendelkező változó probléma nélkül megváltoztatható számmá Javascript. Ugyanezt nem tolerálják TypeScript. -ban TypeScript, a változó típusa csak az elején van definiálva, és a végrehajtás során ugyanazt a típust kell megőriznie, ha a változtatások fordítási hibához vezetnek a javascript-re fordítás során.

A következő típusok vannak:

Szám
Húr
logikai
Bármilyen
Üres

Szám

Csak egész számokat, lebegőpontokat, törteket stb.

Syntax:

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

Íme néhány fontos módszer, amelyek számtípusoknál használhatók:

toFixed () – karakterláncsá alakítja a számot, és megtartja a metódusnak adott tizedesjegyeket.

toString () – ez a módszer a számot karakterláncsá alakítja.

értéke () – ez a módszer visszaadja a szám primitív értékét.

Precision() – ezzel a módszerrel a szám meghatározott hosszúságúra formázható.

Példa: minden String metódussal

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

Húr

Karakterlánc: csak karakterlánc-értékek

Syntax:

let str :string = "hello world";

Íme néhány fontos metódus, amely karakterlánctípusoknál használható:

osztott() – ez a módszer a karakterláncot egy tömbre osztja.
charAt() – ez a metódus adja az első karaktert a megadott indexhez.
indexe() – ez a metódus megadja az első előfordulás helyét a neki adott értékhez.
Cserélje () – ez a metódus 2 karakterláncot vesz igénybe, először a karakterláncban keresendő értéket, és ha jelen van, lecseréli a másodikat, és egy új karakterláncot ad vissza.
Állapot () – ez a módszer eltávolítja a szóközöket a karakterlánc mindkét oldalán.
alstr() – ez a metódus megadja a karakterlánc egy részét, amely a kezdetként és befejezésként megadott pozíciótól függ.
szubsztring() – ez a metódus megadja a karakterlánc egy részét, amely a kezdetként és befejezésként megadott pozíciótól függ. A véghelyzetben lévő karakter kizárásra kerül.
toUpperCase() -a karakterláncot nagybetűssé alakítja
to LowCase() – a karakterláncot kisbetűssé alakítja.

Példa:

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"

logikai

Elfogadja a logikai értékeket, például igaz, hamis, 0 és 1.

Syntax:

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

Bármilyen

Syntax:

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

A használatával deklarált változók bármilyen A típus karakterláncként, számként, tömbként, logikai értékként vagy voidként veheti fel a változót. TypeScript nem dob semmilyen fordítási idejű hibát; ez hasonló a ben deklarált változókhoz JavaForgatókönyv. Csak akkor használjon bármilyen típusú változót, ha nem biztos abban, hogy az adott változóhoz milyen típusú érték lesz társítva.

Üres

Az üres típust többnyire visszatérési típusként használják olyan függvényeknél, amelyeknek nincs mit visszaadni.

Syntax:

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

TypeScript Sor

An Sor in TypeScript egy olyan adattípus, amelyben több értéket is tárolhat. Tanuljuk meg, hogyan deklarálhatunk és rendelhetünk értékeket a tömbműveletekhez TypeScript.

Óta TypeScript egy erősen tipizált nyelv, meg kell mondani, hogy egy tömbben mi lesz az értékek adattípusa. Ellenkező esetben bármilyen típusúnak tekinti.

Tömb deklarálása és inicializálása

Syntax:

let nameofthearray : Array<typehere>

Példa

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.

Különböző módok az elemek elérésére egy tömbből

Ahhoz, hogy egy tömb elemeit megkapjuk, az értékek 0 indextől a tömb hosszáig kezdődnek.

Példa:

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

Az elemeket egy tömbből is megkaphatja a segítségével TypeScript mert hurok az alábbiak szerint:

<p></p> TypeScript hurokhoz

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

For-in hurok használata

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

Output:
2016
2017
2018
2019

For-of hurok használata

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

Foreach ciklus használata

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

TypeScript Tömb módszerek

TypeScript A tömbobjektum számos tulajdonsággal és módszerrel rendelkezik, amelyek segítségével a fejlesztők könnyen és hatékonyan kezelhetik a tömböket. A tulajdonság értékét a tömbnév.tulajdonság megadásával kaphatja meg, a metódus kimenetét pedig a tömbnév.method() megadásával.

hossz tulajdonság

=> Ha egy tömb elemeinek számát szeretné tudni, használhatja a length tulajdonságot.

Reverse módszer

=> Egy tömb elemeinek sorrendjét fordított módszerrel megfordíthatja.

Rendezési módszer

=> Az elemeket egy tömbben rendezheti rendezési módszerrel.

Pop módszer

=> Egy tömb utolsó elemét pop módszerrel távolíthatja el.

Shift módszer

=> Eltávolíthatja a tömb első elemét shift módszerrel.

Push módszer

=> A tömb utolsó elemeként hozzáadhat értéket.

concat módszer

=> Két tömböt egyesíthet egy tömbelemmé.

Példa a hossz tulajdonságra

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élda fordított módszerre

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élda a rendezési módszerre

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élda a pop módszerre

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élda a shift módszerre

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élda push módszerre

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élda a concat módszerre

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]

Osztály TypeScript

TypeScript egy szuperkészlete JavaSzkript, szóval bármit meg lehet tenni benne JavaSzkript is lehetséges benne TypeScript. A Class egy új funkció, amelyet az ES6-tól kezdve, tehát korábban adtunk hozzá JavaAz osztály típusú funkciót egy prototípus funkcióval rendelkező függvény segítségével próbáltuk ki a kód újrafelhasználásához. Az osztály használatával a kódunk majdnem olyan nyelvekhez közelíthető meg, mint a java, c#, python stb., ahol a kód újrafelhasználható. Az osztály funkciójával TypeScript/JavaScript, ez teszi a nyelvet nagyon erőssé.

Osztály meghatározása TypeScript

Itt van egy alapvető osztály szintaxisa TypeScript:

class nameofclass {
     //define your properties here

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

Példa: Egy működő példa az osztályon

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

A fenti példában van egy Diákok nevű osztályod. Age, name és roll_no tulajdonságokkal rendelkezik.

Konstruktor a TypeScript Osztály

A fentebb definiált Diákok osztály példája az alábbiak szerint rendelkezik egy konstruktorral:

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

A konstruktor metódus paraméterei: kor, név és roll_no. A konstruktor gondoskodik a tulajdonságok inicializálásáról az osztály meghívásakor. Az ingatlanokhoz a segítségével lehet hozzáférni ezt kulcsszó. Példa a this.age eléréséhez az életkor tulajdonsághoz, a this.roll_no a roll_no stb. eléréséhez. Lehetséges alapértelmezett konstruktor is, az alábbiak szerint:

constructor () {}

Módszerek belül a TypeScript Osztály

A Students osztály példájában olyan metódusok vannak definiálva, mint például a getRollNo(), getName(), getAge(), amelyek a roll_no, name és age tulajdonságok részleteinek megadására szolgálnak.

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

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

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

Osztálypéldány létrehozása in TypeScript

Példa:

In TypeScript egy osztály példányának létrehozásához az új operátort kell használnia. Amikor létrehozunk egy osztály példányát új operátorral, megkapjuk az objektumot, amely hozzáférhet az osztály tulajdonságaihoz és metódusaihoz, az alábbiak szerint:

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

összeállítása TypeScript Osztály a JavaForgatókönyv

Használhatja a tsc parancsot az alábbiak szerint a fordításhoz Javascript.

Command: tsc  Students.ts

A kimenet Javascript Az összeállítás kódja a következő:

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

In Javascript, az Osztály önmeghívó függvényté alakul.

Osztály öröklődés

Az osztályok örökölhetők a terjed kulcsszó be TypeScript.

Osztály öröklődés szintaxisa:

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

}

B osztály megoszthatja majd A osztály módszerek és tulajdonságok.

Itt van egy működő példa egy öröklődést használó osztályra

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

Két osztályod van, a Személy és a Diák. A Student osztály kiterjeszti a Személyt, és a Student-en létrehozott objektum hozzáférhet saját metódusaihoz és tulajdonságaihoz, valamint az általa kiterjesztett osztályhoz.

Most adjunk hozzá néhány további változtatást a fenti osztályhoz.

Példa:

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

Az előző példához képest hozzáadott változtatások a Student osztályban vannak megadva. A konstruktornak ugyanazokat a paramétereket kell vennie, mint az alaposztálynak, és hozzá kell adnia minden további saját paramétert, ha van ilyen.

In TypeScript meg kell hívni a szuper akaratot az összes paramra, mint a benne lévő alapparaméterekre. Ezt kell az első dolognak megtenni a konstruktoron belül. A szuper végrehajtja a kiterjesztett osztály konstruktorát.

Hozzáférés a módosítókhoz TypeScript

TypeScript támogatja a nyilvános, privát és védett hozzáférés-módosítókat a metódusokhoz és tulajdonságaihoz. Alapértelmezés szerint, ha a hozzáférés módosítók nincsenek megadva, a metódus vagy tulajdonság nyilvánosnak minősül, és könnyen elérhetők lesznek az osztály objektumából.

A privát hozzáférés-módosítók esetében nem érhetők el az osztály objektumából, és csak az osztályon belül használhatók. Nem állnak rendelkezésre az örökölt osztály számára.

A védett hozzáférés-módosítók esetében az osztályon és az örökölt osztályon belüli használatra szolgálnak, és nem lesznek elérhetők az osztály objektumáról.

Példa:

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

Magán: A tulajdonságokat vagy metódusokat az osztály objektuma és a származtatott osztály sem érheti el, ezek az osztályon belüli használatra szolgálnak.
Védett: A tulajdonságokhoz és metódusokhoz a létrehozott objektum sem férhet hozzá. Elérhetők az osztályon belülről, és elérhetők az osztályt kiterjesztő osztály számára.
Nyilvános: A tulajdonságokat és metódusokat kulcsszó nélkül deklarálják. Könnyen elérhetők kívülről az osztály objektumával.

Interfész be TypeScript

Az egyik alapvető jellemzője TypeScript interfészek. Az interfész egy meghatározott szabálykészlet, amelyet az azt használó entitásnak kell megvalósítania. Az entitás lehet osztály, függvény vagy változó. Egy interfész tulajdonságokból és metódusokból állhat. A tulajdonságokat opcionálisként is megadhatja a „?” használatával. az adott tulajdonság vagy metódus szintaxisa. Az interfész erős típusellenőrzést ad az interfészt megvalósító bármely függvényhez, változóhoz vagy osztályhoz.

Egy interfész szintaxisa in TypeScript

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

Meghatározott egy Dimension nevű interfészt, amelynek szélessége és magassága van, és mindkettő típusa karakterlánc.

Most ez az interfész megvalósítható változóval, függvénnyel vagy osztállyal. Íme egy példa a Dimension felületet megvalósító változóra.

Példa:

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

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

A Dimension interfész aláírásának szélessége és magassága van, és mindkettő kötelező. Abban az esetben, ha az interfész implementálása során valamelyik tulajdonság kimarad, vagy a típus megváltozik, az a kód javascript-be fordítása során fordítási időbeli hibát jelez.

A fenti kód javascriptre fordítva a következőképpen néz ki:

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

Nézzük most meg, hogyan használjunk egy interfészt egy funkcióval.

Interfész használata függvényen visszatérési típusként

Példa:

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

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

A fenti példában a Dimension interfész a getDimension() függvényen van megvalósítva visszatérési típusként. A getDimension() visszatérési típusának meg kell egyeznie az Interface Dimensionnál említett tulajdonságokkal és típussal.

A lefordított kód Javascript a következő lesz:

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

A fordítás során, ha a visszatérési típus nem egyezik a felülettel, akkor hibát dob.

Interfész, mint funkcióparaméter

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"

Tehát a fenti példában az Interface Dimension paramétert használta a getDimension() függvény paramétereként. A függvény meghívásakor meg kell győződnie arról, hogy a neki átadott paraméter megegyezik a megadott interfészszabálysal.

A lefordított kód Javascript a következő lesz:

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

Osztálymegvalósító felület

Ahhoz, hogy egy osztályt használhasson, a kulcsszót kell használnia munkagépek.

Az interfészt megvalósító osztály szintaxisa:

class NameofClass implements InterfaceName {
}

A következő példa bemutatja az osztályokkal való interfész működését.

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

A fenti példában a Dimension felületet definiálta a szélesség és magasság tulajdonságokkal, amelyek string típusúak, és egy getWidth() nevű metódus, amely karakterláncként visszatérési értékkel rendelkezik.

A lefordított kód Javascript a következő lesz:

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

Funkciók be TypeScript

A funkciók egy feladat végrehajtásához végrehajtott utasítások összessége. In Javascript, a kód nagy része függvények formájában van megírva, és fontos szerepet játszik. In TypeScript, rendelkezésre állnak osztályok, felületek, modulok, névterek, de a függvények mégis fontos szerepet játszanak. A különbség a függvény között javascript és TypeScript függvény az a visszatérési típus, amellyel elérhető TypeScript funkciót.

JavaSzkript funkció:

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

TypeScript funkció:

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

A fenti függvényekben hozzáadódik a függvény neve, a paraméterek a1és b1 mindkettőnek típusa van számként, és a visszatérési típus is szám. Ha történetesen egy karakterláncot ad át a függvénynek, akkor fordítási idejű hibát fog kiadni a fordítás során JavaForgatókönyv.

A függvény hívása: 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'.

A paraméterek a1 és a b1 kötelező paraméterek, és hibát jeleznek, ha nem kapják meg ilyen módon. Ezenkívül a paraméter típusa és a visszatérési típus nagyon fontos, és a meghatározás után nem változhat.

Opcionális paraméterek egy függvényhez

A javascriptben a függvények összes paramétere nem kötelező, és ha nem adják át, akkor definiálatlannak minősül. De nem ez a helyzet TypeScript, ha megadta a paramétereket, azokat is el kell küldenie, de ha meg szeretné tartani valamelyik paramétert, akkor ezt megteheti a? a paraméter nevével szemben az alábbiak szerint:

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.

Kérjük, vegye figyelembe, hogy az opcionális paramétereket csak az utolsó függvényben kell megadni, az első paraméter nem lehet kötelező, és a második paraméter nem lehet kötelező. Ha egy paraméter-fordítóval hívja meg a függvényt, az hibát fog kiütni. Ezért szükséges a választható paramétereket a végén megtartani.

Rendeljen hozzá alapértelmezett értékeket a paraméterekhez

A paraméterekhez alapértelmezett értékeket rendelhet az alábbiak szerint:

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

Az opcionális paraméterekhez hasonlóan itt is az alapértelmezett inicializált paramétereket kell a függvény végén megtartani.

Nyugalmi paraméterek

Láttad, hogyan TypeScript kezeli a kötelező paramétereket, az opcionális paramétereket és az alapértelmezett értékű inicializált paramétereket. Most megnézzük a pihenési paramétereket. A nyugalmi paraméterek opcionális paraméterek egy csoportját jelentik, amelyeket együtt definiálnak, és három használatával vannak meghatározva pontok (…) ezt követi a param neve, ami egy tömb.

A nyugalmi paraméterek szintaxisa:

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

Mint fentebb látható, a többi paraméter a (…param-name) használatával van megadva; a többi paraméter egy tömb, amelynek előtagja három pont. A tömb minden paramétert átad neki. A függvényt az alábbi példa szerint hívhatja meg:

Példa:

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

Nyíl funkciók

A nyíl funkció az egyik fontos ES6-ban kiadott funkció, és elérhető TypeScript is. Az Arrow függvény szintaxisában van egy vastag nyíl, ami miatt a függvényt nyílfüggvénynek nevezik.

Nyíl függvény szintaxisa:

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

Mire használható az Arrow Function?

Vessünk egy pillantást a példára, hogy megértsük az Arrow függvény használati esetét:

Példa:

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

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

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

Létrehozott egy névtelen függvényt, amelynek ez a tulajdonsága. A pontszám inicializálása 0-ra és egy getScore metódus, amely belsőleg rendelkezik egy setTimeout-tal, és 1 másodperc alatt konzolja ezt. A consoled érték undefined értéket ad, bár a this.score definiált és inicializált. A probléma itt a this kulcsszó. A setTimeouton belüli függvénynek megvan a sajátja, és belsőleg próbálja hivatkozni a pontszámra, és mivel nincs definiálva, ezért undefined-et ad.

Ugyanezt meg lehet tenni az Arrow funkcióval, az alábbiak szerint:

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

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

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

A setTimeouton belüli függvényt egy nyílfüggvényre változtatta, az alábbiak szerint:

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

Egy nyílfüggvénynek nincs sajátja ezt meghatározva, és megosztja a szülőjét ezt, így a kívül deklarált változók könnyen elérhetők a belső nyíl függvény segítségével. Hasznosak a rövidebb szintaxis miatt, valamint a visszahívásokhoz, eseménykezelőkhöz, belső időzítési funkciókhoz stb.

TypeScript Enums

TypeScript Az Enum egy olyan objektum, amely kapcsolódó értékek gyűjteményét együtt tárolja. Javascript nem támogatja az enumot. A legtöbb programozási nyelv mint Java, C, C++ támogatja TypeScript Enum és azzal is elérhető TypeScript is. Az enumokat az enum kulcsszó segítségével határozzuk meg.

Hogyan kell enumot bejelenteni?

Syntax:

enum NameofEnum {
   value1,
   value2,
    ..
}

Példa: Enum

enum Directions {
North,
South,
East,
West
}

A fenti példában definiált egy Útvonalak nevű számsort. A megadott érték Észak, Dél, Kelet, Nyugat. Az értékek számozása 0-tól kezdődik az enum első értékénél, majd 1-gyel nő a következő értékhez.

Enum deklarálása numerikus értékkel

Alapértelmezés szerint, ha egy enum nem kap értéket, akkor azt 0-tól kezdődő számnak tekinti. A következő példa egy numerikus értékű enumot mutat be.

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

Hozzárendelhet egy kezdőértéket is az enumhoz, és a következő enumértékek a növekményes értékeket kapják. Például:

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

Most az északi enum értéke 5-tel kezdődik, így a dél értéke 6, kelet = 7 és nyugat = 8.

Az alapértelmezett értékek helyett tetszés szerinti értékeket is hozzárendelhet. Például:

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

Hogyan lehet elérni egy Enumot?

A következő példa bemutatja, hogyan használhatja fel az Enumot a kódjában:

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

A javascriptre fordított kód a következő:

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

Óta Javascript nem támogatja az enumokat, az enumot önmeghívott függvényekké alakítja, a fent látható módon.

Enum deklarálása karakterlánc értékkel

Az alábbi példában látható módon hozzárendelhet tetszés szerinti karakterlánc-értékeket:

Példa:

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

A javascriptre fordított kód a következő:

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

Miben vannak a modulok TypeScript?

A ben létrehozott fájlok TypeScript globális hozzáféréssel rendelkeznek, ami azt jelenti, hogy az egyik fájlban deklarált változók könnyen elérhetők egy másik fájlban. Ez a globális jelleg kódütközéseket okozhat, és futás közbeni végrehajtási problémákat okozhat. Exportálási és importálási modul funkciói vannak, amelyek segítségével elkerülhető a globális változók és függvények ütközései. Ez a funkció itt érhető el JavaSzkript ES6 kiadással, és szintén támogatott TypeScript.

Miért van szükség modulokra? TypeScript?

A következő példa bemutatja a problémát modulok nélkül:

Példa teszt1.ts

let age : number = 25;

A test1.ts fájlban definiált egy változó korú típusszámot.

Példa teszt2.ts

A test2.ts fájlban könnyen hozzáférhet a változóhoz kor a test1.t-ben definiált, és módosítsa is az alábbiak szerint:

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

Tehát a fenti eset sok problémát okozhat, mivel a változók globálisan elérhetőek és módosíthatók.

A Modulok, a megírt kód a fájl nyelvi beállítása marad, és azon kívül nem érhető el. Ahhoz, hogy bármit elérjen a fájlból, exportálnia kell az export kulcsszó használatával. It akkor használatos, ha a változót, osztályt, függvényt vagy interfészt egy másik fájlban szeretné használni. import akkor használatos, ha az exportált változóhoz, osztályhoz vagy interfészhez vagy függvényhez is hozzá szeretne férni. Ha így tesz, a kód írása érintetlen marad a fájlban, és még ha ugyanazokat a változóneveket definiálja is, azok nem keverednek össze, és helyileg viselkednek a fájlban, ahol deklarálták.

Exportálás és importálás használata

Számos módja van az exportálásnak és importálásnak. Tehát itt a legtöbbször használt szintaxisról lesz szó.

Az importálás és az exportálás szintaxisa 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"

Íme egy működő példa az exportálás és importálás használatára.

Példa:

teszt1.ts

export let age: number = 25;

Az exportálási kulcsszó az életkor változó egy másik fájlban való megosztására szolgál.

teszt2.ts

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

Az import kulcsszó a hozzáféréshez használható kor változót, és meg kell adnia a fájl helyét a fent látható módon.

2. import és export szintaxisa:

Van egy másik módja is az exportálásnak és importálásnak, és ennek szintaxisa a következő:

export = classname;

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

Amikor használ export = a modul exportálásához az importálásnak a request(“modulnév fájl elérési útja”) parancsot kell használnia az importáláshoz.

Íme egy működő példa a fenti esetre:

Ügyfél.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 betöltő

A modulok nem működhetnek önmagukban, ezért modulbetöltőre van szükség az importfüggőségek megtalálásához, ahogy azt a TypeScript fent bemutatott példák. Az elérhető modulbetöltő a CommonJS a nodejs számára, és a Require.js a böngészőben való futtatáshoz.

A CommonJS modul segítségével történő kód fordításához használja a következő parancsot:

tsc --module commonjs testCustomer.ts

A Requirejs modul segítségével a kód fordításához használja a következő parancsot:

tsc --module amd testCustomer.ts

A függő fájlok a fenti paranccsal js fájllá lesznek konvertálva.

Példa a testCustomer.ts fájlból a testCustomer.js fájlba a Requirejs használatával

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

Példa a Customer.t fájlból a Customer.js fájlba a Requirejs használatával

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

A követelmény.js használatával történő teszteléséhez létre kell hoznia egy main.js nevű fájlt, amely az ábrán látható módon hivatkozik a függőségekre.

Íme a mappa szerkezete:

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>

Névterek be TypeScript

A névtér alapvetően osztályok, interfészek, változók, függvények gyűjteménye egy fájlban.

Névtér szintaxis

namespace name{

export class {
}

export interface {
}

export const constname;

}

A kapcsolódó kód egy névtér alatt érhető el.

Névtér működési példa: tesztnévtér.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;
        }
    }
}

A névtér neve Diákbeállítás, hozzáadtál egy StudDetails felületet, addSpace függvényt és egy Student nevű osztályt.

Hozzáférés a névtérhez

A következő a kód, ahol a névteret használja StudentSetup.

testStudentSetup.ts

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

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

A névtérben elérhető osztályra, interfészre, függvényre a névtér példa nevével kell hivatkozni StudentSetup.addSpace a funkció eléréséhez, StudentSetup.Student az osztály eléréséhez.

Mindkét fájlt összeállíthatja egy js-be az alábbiak szerint:

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

Ellenőrizze a kimenetet a parancssorban az alábbi paranccsal:

node namespace.js

A kimenetet a következőképpen jeleníti meg:

The name is: H a r r y

Környezeti nyilatkozatok be TypeScript

TypeScript lehetővé teszi harmadik féltől származó javascript-fájlok használatát környezeti deklaráció segítségével. Ennek a funkciónak az az előnye, hogy nem kell újraírnia, és mégis használnia kell a könyvtár összes funkcióját TypeScript.

Ambient szintaxis

Az ambient modul deklarálása:

declare module moduleName {
   //code here
}

Az ambient fájlt a következőképpen kell menteni:

filename.d.ts

A fájl használatához fájlnév.d.ts a .ts fájlban a következőképpen kell hivatkoznia rá:

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

A környezeti típus deklarációja TypeScript hivatkozást tartalmaz a harmadik fél könyvtárára, és újra deklarálja a szükséges funkciókat a saját típusával. Tegyük fel például, hogy van egy kis javascript könyvtára, az alábbiak szerint:

Harmadik fél JavaSzkriptfájl: testString.js

Példa: 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();
    }
};

Van egy StringChecks nevű objektuma, amely olyan funkciókkal rendelkezik, mint az isString, convertToUpperCase, convertToLowerCase és converToStringBold.

Ambient modul létrehozása TypeScript

Most létrehoz egy ambient modult, amely hivatkozik a fenti js-funkciókra, és hozzáadja a típusellenőrzést a követelményeinknek megfelelően.

Fájlnév: 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;

Meg kell határoznia egy modulnevet TestStringként, és exportálta a StringsFunc interfészt.

isString(str: string): logikai érték

=> Ez a param karakterláncot veszi fel, és a visszatérési típus logikai érték lesz. Ha a .ts fájlban használja, ha véletlenül a paramétert számként vagy bármi másként adja át, akkor fordítási típushibát fog adni.

convertToUpperCase(str:string): karakterlánc

=> Ez az argumentumot karakterláncként veszi fel, és egy karakterláncot ad vissza. Ugyanez vonatkozik convertToLowerCase(str: string)
: húr; és convertToStringBold(str: string): karakterlánc
;

Mivel a javascript fájlban az objektum neve StringChecks, végül erre kell hivatkoznunk a .d.ts fájlban is, ami a következőképpen történik:

declare var StringChecks: TestString.StringsFunc;

Az Ambient modul használata TypeScript

Most itt van a test.ts fájl, amely a tstring.d.ts környezeti fájlt fogja használni

Példa: 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);

Összeállít TypeScript tsc test.ts a test.js-hez

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

Most már használhatja a test.js fájlt a html fájlban és a testString.js könyvtárfájlt is

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

Ez a konzolon látható kimenet:

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

TypeScript Történelem

Lássuk a fontos tereptárgyakat a történelemből TypeScript:

Két év belső fejlesztés után at Microsoft. TypeScript 0.9, 2013-ban jelent meg
A generikumok további támogatása TypeScript Az 1.0 a Build 2014-ben jelent meg
2014 júliusában egy új TypeScript Megjött a fordító, amely ötször gyorsabb, mint az előző verzió.
2015 júliusában az ES6 modulok támogatása, névtér kulcsszó, for, of support, dekorátorok.
2016 novemberében egy olyan hozzáadott szolgáltatás, mint a kulcs- és keresési típusú leképezett típusok, valamint a pihenés.
27. március 2018-én a feltételes típusok, a javított kulcs a kereszteződéstípusok támogatásával hozzáadva a TypeScript.

Miért érdemes TypeScript?

Itt vannak a használat fontos előnyei/előnyei TypeScript

Nagy és összetett projekt JavaA szkriptet nehéz kódolni és karbantartani.
TypeScript sokat segít a kódszervezésben, és mégis megszabadul a legtöbb hibától a fordítás során.
TypeScript támogatja a JS-könyvtárakat és az API-dokumentációt
Ez opcionálisan begépelt szkriptnyelv
TypeScript A kód egyszerűvé alakítható JavaScript Code
Jobb kódstrukturálási és objektumorientált programozási technikák
Jobb fejlesztési időbeli eszköztámogatást tesz lehetővé
Kiterjesztheti a nyelvet a szokásos dekorátorokon túlra, async/wait

Ki használ TypeScript?

Íme néhány leggyakoribb alkalmazás TypeScript:

A szögletes csapat használ TypeScript.
NodeJS és NPM telepítés
TypeScript Telepítés
Összeállít TypeScript kódot Javascript
Futtassa le a kódot a Nodejs használatával
Végrehajt Javascript a Böngészőben
Összeállít TypeScript kódot Javascript EcmaScript verzió használatával
Könnyedén lefordíthatja a beírt kódot TypeScript nak nek JavaSzkript a NodeJS használatával.
Tehát dolgozni TypeScript először le kell töltenie és telepítenie kell a NodeJS-t.

Összegzésként

TypeScript egy szuperkészlete JavaForgatókönyv. TypeScript egy tiszta objektum-orientált programozási nyelv, amely támogatja az osztályokat, interfészeket stb.
TypeScript támogatja az összes kiadott Ecmascript funkciót, és a fejlesztők ugyanezt használhatják kódolás közben.
Változók az értékek tárolására szolgálnak, és az érték lehet karakterlánc, szám, logikai érték vagy kifejezés.
In TypeScript, a változó típusa csak az elején van definiálva, és a végrehajtás során ugyanazt a típust kell megőriznie, ha a változtatások fordítási hibához vezetnek a javascript-re fordítás során.
Egy tömb be TypeScript egy olyan adattípus, amelyben több értéket is tárolhat.
A Class egy új funkció, amelyet az ES6-tól kezdve, tehát korábban adtunk hozzá JavaAz osztály típusú funkciót egy prototípus funkcióval rendelkező függvény segítségével próbáltuk ki a kód újrafelhasználásához.
TypeScript támogatja a nyilvános, privát és védett hozzáférés-módosítókat a metódusokhoz és tulajdonságaihoz.
Az egyik alapvető jellemzője TypeScript interfészek. Az interfész egy meghatározott szabálykészlet, amelyet az azt használó entitásnak kell megvalósítania.
A funkciók egy feladat végrehajtásához végrehajtott utasítások összessége.
TypeScript Az Enum egy olyan objektum, amely kapcsolódó értékek gyűjteményét együtt tárolja.

Talán tetszene:

Mi a TypeScript?

Hogyan kell letölteni és telepíteni TypeScript

Összeállít TypeScript kódot Javascript

Végrehajt Javascript Nodejs használatával

Összeállít TypeScript kódot Javascript EcmaScript verzió használatával

KAPCSOLÓDÓ CIKKEK

Változók be TypeScript

Változók deklarálása a var

Változók deklarálása let segítségével

Változók deklarálása a const segítségével

Beír TypeScript

Szám

Húr

logikai

Bármilyen

Üres

TypeScript Sor

Tömb deklarálása és inicializálása

Különböző módok az elemek elérésére egy tömbből

<p></p> TypeScript hurokhoz

For-in hurok használata

For-of hurok használata

Foreach ciklus használata

TypeScript Tömb módszerek

hossz tulajdonság

Reverse módszer

Rendezési módszer

Pop módszer

Shift módszer

Push módszer

concat módszer

Példa a hossz tulajdonságra

Példa fordított módszerre

Példa a rendezési módszerre

Példa a pop módszerre

Példa a shift módszerre

Példa push módszerre

Példa a concat módszerre

Osztály TypeScript

Osztály meghatározása TypeScript

Példa: Egy működő példa az osztályon

Konstruktor a TypeScript Osztály

Módszerek belül a TypeScript Osztály

Osztálypéldány létrehozása in TypeScript

összeállítása TypeScript Osztály a JavaForgatókönyv

Osztály öröklődés

Osztály öröklődés szintaxisa:

Hozzáférés a módosítókhoz TypeScript

Interfész be TypeScript

Egy interfész szintaxisa in TypeScript

Interfész használata függvényen visszatérési típusként

Interfész, mint funkcióparaméter

Osztálymegvalósító felület

Funkciók be TypeScript

A függvény hívása: add

Opcionális paraméterek egy függvényhez

Rendeljen hozzá alapértelmezett értékeket a paraméterekhez

Nyugalmi paraméterek

Nyíl funkciók

Mire használható az Arrow Function?

TypeScript Enums

Hogyan kell enumot bejelenteni?

Enum deklarálása numerikus értékkel

Hogyan lehet elérni egy Enumot?

Enum deklarálása karakterlánc értékkel

Miben vannak a modulok TypeScript?

Miért van szükség modulokra? TypeScript?

Exportálás és importálás használata

Az importálás és az exportálás szintaxisa 1:

2. import és export szintaxisa:

Modul betöltő

Példa a testCustomer.ts fájlból a testCustomer.js fájlba a Requirejs használatával

Példa a Customer.t fájlból a Customer.js fájlba a Requirejs használatával

Névterek be TypeScript

Névtér szintaxis

Hozzáférés a névtérhez

Környezeti nyilatkozatok be TypeScript

Ambient szintaxis

Az ambient modul deklarálása:

Az ambient fájlt a következőképpen kell menteni: