TypeScript Samouczek: Co to jest, interfejs, wyliczenie, tablica

Czym jest TypeScript?

TypeScript jest nadzbiorem JavaScenariusz. TypeScript to obiektowy język programowania, który obsługuje klasy, interfejsy i wiele więcej. Jest to język open-source opracowany przez Microsoft który statycznie kompiluje kod do JavaSkrypt. Można go łatwo uruchomić w przeglądarce lub w Nodejs.

Wszystkie najnowsze funkcje wydane dla ECMAScript są obsługiwane w TypeScripti dodatkowo TypeScript ma własne funkcje obiektowe, takie jak interfejsy, deklaracje otoczenia i dziedziczenie klas, które pomagają w rozwojuping duża aplikacja, której zbudowanie w inny sposób byłoby trudne JAVASCRIPT.

Związek jest jednokierunkowy. Każdy ważny JavaPlik skryptu jest już prawidłowy TypeScript, ale odwrotna sytuacja nie jest prawdziwa, ponieważ adnotacje typu istnieją tylko w TypeScript i są usuwane podczas kompilacji.

Dlaczego warto korzystać TypeScript?

Oto najważniejsze korzyści płynące z korzystania z TypeScript:

• Duże i złożone projekty w JavaSkrypty są trudne do kodowania i utrzymania.
• TypeScript pomaga w dużej mierze w organizacji kodu i usuwa większość błędów podczas kompilacji, a nie w czasie wykonywania.
• TypeScript obsługuje biblioteki JS i dokumentację API.
• Jest to język skryptowy z opcjonalnym typowaniem, co oznacza, że ​​typy można przyjmować stopniowo.
• TypeScript kod można przekonwertować na zwykły JavaKod skryptu dla dowolnej przeglądarki docelowej.
• Zapewnia lepszą strukturalizację kodu i techniki programowania obiektowego.
• Umożliwia lepsze wsparcie narzędzi czasu tworzenia, w tym automatyczne uzupełnianie i bezpieczne refaktoryzowanie.
• Może rozszerzyć możliwości języka poza standard, dodając takie funkcje jak dekoratory.

Największą praktyczną korzyścią jest wsparcie edytora. Ponieważ kompilator zna kształt każdej wartości, edytor może zmienić nazwę właściwości w całym projekcie i zgłosić każde miejsce, które już nie pasuje.

TypeScript History

Przyjrzyjmy się ważnym punktom orientacyjnym z historii TypeScript:

• Po dwóch latach wewnętrznego rozwoju w Microsoft, TypeScript Wersja 0.9 została wydana w 2013 roku.
• TypeScript Wersja 1.0 z dodatkową obsługą typów generycznych została wydana na konferencji Build 2014.
• W lipcu 2014 nowy TypeScript pojawił się kompilator, który był pięć razy szybszy od poprzedniej wersji.
• W lipcu 2015 r. dodano obsługę modułów ES6, słowa kluczowego przestrzeni nazw, for…of i dekoratorów.
• W listopadzie 2016 r. dodano typy mapowane, typy kluczy i wyszukiwania oraz obiekty rest i spread.
• 27 marca 2018 r. dodano typy warunkowe i ulepszono instrukcję keyof z typami przecięcia.
• TypeScript Wersja 5.0, wydana w marcu 2023 r., unowocześniła dekoratory i zmniejszyła rozmiar pakietu.
• TypeScript Wersja 6.0 ukazała się w marcu 2026 r. jako ostateczna wersja oparta na JavaBaza kodu skryptu.
• TypeScript Wersja 7.0 przenosi kompilator do natywnej implementacji języka Go, która Microsoft raportuje, że jest około dziesięć razy szybszy niż wersja 6.0.

Kto używa TypeScript?

TypeScript Nie jest już wyborem niszowym. Stanowi podstawę kilku najpopularniejszych narzędzi front-end i back-end, a poniższa lista pokazuje, gdzie początkujący najprawdopodobniej się z nim zetkną.

• Kątowy: Framework Angular jest napisany w TypeScripti oczekuje się, że będzie w nim również pisany kod aplikacji.
• Projekty React i Vue: Oba ekosystemy są oficjalnie przewożone TypeScript szablony, a większość nowoczesnych programów startowych domyślnie je włącza.
• Tylne zakończenia Node.js: Frameworki serwerowe, takie jak NestJS, są zbudowane wokół TypeScript klasy i dekoratory.
• Narzędzia edytora: Visual Studio Code jest samo w sobie duże TypeScript baza kodu, dlatego obsługa tego języka jest tak kompletna.
• Duże interfejsy korporacyjne: Zespoły pracujące z wieloma współpracownikami stosują tę metodę w celu wychwytywania błędów integracji przed wdrożeniem.

Jak pobrać i zainstalować TypeScript

Oto krok po kroku proces pobierania i instalacji TypeScript:

Krok 1) Pobierz i zainstaluj Nodejs

Przejdź do oficjalnej strony Nodejs, https://nodejs.org/en/download/, a następnie pobierz i zainstaluj Nodejs dla swojego systemu operacyjnego. Szczegółowe instrukcje znajdziesz w przewodniku na stronie jak pobrać i zainstalować Node.js.

Krok 2) Sprawdź wersję Nodejs i npm

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

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

D:\typeproject>npm --version
10.9.2

Działa każda aktualna wersja Node LTS. TypeScript Do uruchomienia kompilatora wymagana jest jedynie obsługiwana wersja Node.

Krok 3) TypeScript instalacja sprzętu

Utwórz katalog projektu typeproject\ i uruchom polecenie npm init, jak pokazano w poniższym poleceniu:

npm init

Krok 4) Rozpocznij instalację

Tworzy to plik package.json, w którym będą przechowywane zależności naszego projektu.

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

npm -g install typescript

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

npm install --save-dev typescript

Utwórz folder src\ w katalogu swojego projektu i w nim utwórz TypeScript plik test.ts i napisz swój kod.

Przykład: test.ts

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

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

skompilować TypeScript kod do Javascript

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

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

tsc test.ts

If TypeScript jest zainstalowany lokalnie w Twoim projekcie, musisz użyć ścieżki TypeScript z node_modules, jak pokazano, lub uruchom go przez npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Powyższe polecenie utworzy plik test.js, w którym zostanie skompilowany kod JavaScenariusz.

Przykład: test.js

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

Wykonać Javascript za pomocą Nodejsa

Teraz wykonamy test.js w Nodejs w następujący sposób:

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

Wartość przekazana do console.log jest wyświetlana po uruchomieniu test.js.

Wykonać JavaSkrypt w przeglądarce

Przykład:

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

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

TypeScript Obsługuje wszystkie wydane funkcje ECMAScript, z których programiści mogą korzystać podczas kodowania. Jednak nie wszystkie nowe funkcje są obsługiwane w starszych przeglądarkach, dlatego może być konieczna kompilacja do starszej wersji ECMAScript. TypeScript udostępnia opcje kompilatora, które robią dokładnie to.

Przykład: test.ts

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

addnumbers(10, 20);

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

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

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

Obecnie będziemy używać ES6 jako celu:

tsc --target ES6  test.ts

test.ts do test.js

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

addnumbers(10, 20);

Kod pozostaje taki sam, ponieważ użyta funkcja strzałkowa jest funkcją ES6 i nie ulega zmianie po kompilacji do ES6.

Domyślnie celem jest ES3, więc bez celu plik test.js będzie wyglądał następująco:

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

Tutaj gruba strzałka została zamieniona na zwykłą anonimową funkcję.

Zmienne w TypeScript

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

Zmiennych nie można używać w kodzie bez ich zdefiniowania. Aby zadeklarować zmienną, można użyć

było słowo kluczowe,

niech keyword

const keyword

Praca ze zmiennymi w TypeScript jest podobne do JavaSkrypt i użytkownicy zaznajomieni z JavaSkrypt z łatwością sobie z tym poradzi. W nowoczesnym kodzie, niech oraz const są preferowane w stosunku do było, ponieważ ich zakres bloku zapobiega całej klasie błędów.

Deklarowanie zmiennych za pomocą var

Składnia:

var firstname = "Roy";

Przyjrzyjmy się kilku TypeScript przykłady pozwalające zrozumieć działanie słowa kluczowego var, a także zakres zmiennych zadeklarowanych za pomocą było słowo kluczowe.

1 przykład:

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

function test() {
    var c = 1; // variable c is local 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

2 przykład:

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

3 przykład:

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

Deklarowanie zmiennych za pomocą let

TypeScript składnia let jest podana poniżej:

Składnia:

let name = "Roy";

Działanie niech zmienna jest prawie taka sama jak było, ale z jedną ważną różnicą, którą pokazuje poniższy przykład.

Przykład:

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

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

Powyżej TypeScript przykład wyrzuca błąd, ale ten sam kod zadziałałby w przypadku było słowo kluczowe. Zmienne zadeklarowane za pomocą niech są dostępne tylko w bloku, w którym zostały zadeklarowane. W tym przykładzie t istnieje tylko w bloku if, a nie w całej funkcji.

To samo dotyczy dowolnej funkcji, pętli for, pętli while czy bloku switch. Zmienna let jest dostępna tylko wewnątrz tego bloku, a odwołanie się do niej poza nim powoduje błąd. To jest główna różnica między var a let.

Deklarowanie zmiennych za pomocą const

Const oznacza zmienne stałe. Są one podobne do zmiennych let, z tą różnicą, że raz przypisanej wartości nie można zmienić. Deklaracja const musi zatem zostać zainicjowana w tym samym wierszu.

Składnia:

const name = "Roy";

Przykład:

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

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

Używaj const zawsze, gdy wiesz, że przypisana wartość nie zostanie ponownie przypisana. Pamiętaj, że const zapobiega ponownemu przypisaniu powiązania, a nie modyfikacji obiektu, na który ono wskazuje.

Wpisuje TypeScript

TypeScript jest językiem silnie typowanym, podczas gdy JavaSkrypt nie jest. Zmienną, której wartość jest zdefiniowana jako ciąg znaków, można bez problemu zmienić na liczbę. JavaScenariusz. Tego samego nie toleruje się w TypeScript, w TypeScriptTyp zmiennej jest definiowany na początku i musi być zachowany przez cały czas wykonywania. Każda zmiana prowadzi do błędu kompilacji. JavaScenariusz.

Oto podstawowe typy:

Numer

Przyjmuje tylko liczby całkowite, zmiennoprzecinkowe, ułamki i podobne wartości liczbowe.

Składnia:

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

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

do naprawionego() – zamieni liczbę na ciąg znaków, zachowując podane w metodzie miejsca dziesiętne.

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

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

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

Przykład: ze wszystkimi metodami liczbowymi

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

sznur

String: tylko wartości typu string.

Składnia:

let str :string = "hello world";

Oto kilka ważnych metod, które można stosować w przypadku typów ciągów:

• dzielić() – ta metoda podzieli ciąg na tablicę.
• charAt() – ta metoda zwróci znak o podanym indeksie.
• indeks() – metoda ta zwraca pozycję pierwszego wystąpienia podanej wartości.
• obsługi produkcji rolnej, która zastąpiła() – ta metoda przyjmuje 2 ciągi znaków. Szuka pierwszej wartości w ciągu i, jeśli jest obecna, zastępuje ją drugą, zwracając nowy ciąg znaków.
• trym() – ta metoda usunie spacje po obu stronach ciągu znaków.
• podstr() – ta metoda zwróci część ciągu znaków, w zależności od podanej pozycji początkowej i długości.
• podciąg() – ta metoda zwraca część ciągu znaków, w zależności od pozycji początkowej i końcowej. Znak na pozycji końcowej jest pomijany.
• do wielkich liter() – zamienia ciąg na wielkie litery.
• do małych liter() – konwertuje ciąg znaków na małe litery.

Przykład:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 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

Wartość logiczna akceptuje tylko wartości logiczne prawda i fałsz. W przeciwieństwie do zwykłych JavaSkrypt, liczby 0 i 1 nie są akceptowane, ponieważ są typu liczbowego.

Składnia:

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

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

Każdy

Składnia:

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

Zmienne zadeklarowane za pomocą każdy type może zawierać ciąg znaków, liczbę, tablicę, wartość logiczną lub pustkę. TypeScript nie spowoduje żadnego błędu kompilacji, co jest podobne do błędów zmiennych w JavaSkrypt. Używaj typu „any” tylko wtedy, gdy nie masz pewności co do typu wartości, która będzie powiązana z daną zmienną, ponieważ wyłącza on wszelkie sprawdzanie tej wartości.

Unieważnić

Typ void jest najczęściej używany jako typ zwracany przez funkcję, która niczego nie zwraca.

Składnia:

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

TypeScript Szyk

An Szyk in TypeScript to typ danych, w którym można przechowywać wiele wartości. Nauczmy się, jak deklarować i przypisywać wartości do operacji tablicowych w… TypeScript.

Ponieważ TypeScript To język silnie typizowany, dlatego należy określić typ danych wartości w tablicy. W przeciwnym razie zostanie ona potraktowana jako typ dowolny.

Zadeklaruj i zainicjuj tablicę

Składnia:

let nameofthearray : Array<typehere>

Przykład

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

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array 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óżne sposoby uzyskiwania dostępu do elementów z tablicy

Aby pobrać elementy z tablicy, wartości zaczynają się od indeksu 0 i kończą na długości tablicy pomniejszonej o jeden.

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

Elementy tablicy można również pobrać za pomocą TypeScript dla pętla, jak pokazano niżej.

Korzystanie z TypeScript dla pętli

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

Wyjście:

2016
2017
2018
2019

Korzystanie z pętli for-in

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

Wyjście:

2016
2017
2018
2019

Korzystanie z pętli for-of

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

Wyjście:

2016
2017
2018
2019

Korzystanie z pętli forEach

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

Wyjście:

2016
2017
2018
2019

TypeScript Metody tablicowe

TypeScript Obiekt Array ma wiele właściwości i metod, które ułatwiają programistom łatwą i efektywną obsługę tablic. Wartość właściwości można uzyskać, określając arrayname.property, a wynik metody, określając arrayname.method().

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

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

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

Przykład metody odwrotnej

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

Przykład metody sortowania

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

Przykład metody pop

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

Przykład metody przesunięcia

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

Przykład metody 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
});

Przykład metody concat

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

Klasa w TypeScript

TypeScript jest nadzbiorem JavaSkrypt, więc wszystko co możliwe JavaSkrypt jest również możliwy w TypeScript. Klasa to funkcja dodana od wersji ES6. Wcześniej w JavaFunkcjonalność skryptu, przypominająca klasę, została osiągnięta dzięki funkcji z metodami prototypowymi, umożliwiającymi ponowne wykorzystanie kodu. Używając klasy, kod może zbliżyć się do języków takich jak Java, C# i Python, gdzie kod można łatwo ponownie wykorzystać.

Definiowanie klasy w TypeScript

Oto podstawowa składnia klasy w TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

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

class Students {
    age : number;
    name : string;
    roll_no : number;

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

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

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

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

W powyższym przykładzie mamy klasę o nazwie „Studenci”. Ma ona właściwości „wiek”, „imię” i „nr rolki”.

Konstruktor w A TypeScript Klasa

Klasa Students zdefiniowana powyżej ma konstruktor pokazany poniżej:

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

Metoda konstruktora ma parametry: wiek, nazwa i numer rolki. Konstruktor inicjalizuje właściwości podczas tworzenia instancji klasy. Dostęp do właściwości uzyskuje się za pomocą to Słowo kluczowe, na przykład this.age, aby uzyskać dostęp do age i this.roll_no, aby uzyskać dostęp do roll_no. Możesz również użyć konstruktora domyślnego, jak pokazano poniżej:

constructor () {}

Metody wewnątrz a TypeScript Klasa

W klasie Students zdefiniowane są metody, na przykład getRollNo(), getName() i getAge(), które zwracają wartości właściwości roll_no, name i age.

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

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

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

Tworzenie instancji klasy w TypeScript

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

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

Kompilacja TypeScript Klasa do JavaScenariusz

Do kompilacji możesz użyć polecenia tsc, jak pokazano poniżej JavaScenariusz.

Command: tsc  Students.ts

Dane wyjściowe JavaKod skryptu podczas kompilacji wygląda następująco:

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

In JavaSkrypt, klasa jest konwertowana na funkcję wywołującą się sama.

Dziedziczenie klas

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

Składnia dziedziczenia klas:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

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

Oto działający przykład klasy wykorzystującej dziedziczenie:

class Person {
    name: string;
    age: number;

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

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

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

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

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

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

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

Teraz dodajmy kilka zmian do klasy powyżej.

Przykład:

class Person {
    name: string;
    age: number;

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

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

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

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        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

Zmiana w porównaniu z poprzednim przykładem polega na zdefiniowaniu konstruktora w klasie Student. Konstruktor przyjmuje te same parametry co klasa bazowa, a także wszelkie własne parametry dodatkowe.

In TypeScript Musisz wywołać super ze wszystkimi parametrami klasy bazowej. Musi to być pierwsze polecenie w konstruktorze, ponieważ super uruchamia konstruktor klasy rozszerzonej. Każda właściwość zadeklarowana przez klasę pochodną, ​​taka jak tmarks, musi zostać następnie jawnie przypisana, w przeciwnym razie getMarks zwróci wartość undefined.

Modyfikatory dostępu w TypeScript

TypeScript Obsługuje modyfikatory dostępu: publiczny, prywatny i chroniony (protected) do metod i właściwości. Domyślnie, jeśli nie podano modyfikatora dostępu, metoda lub właściwość jest uznawana za publiczną i jest łatwo dostępna z obiektu klasy.

W przypadku modyfikatorów dostępu prywatnego, elementy nie są dostępne z poziomu obiektu klasy i są przeznaczone wyłącznie do użytku wewnątrz klasy. Nie są dostępne dla klasy odziedziczonej.

W przypadku modyfikatorów dostępu chronionego elementy są przeznaczone do użytku wewnątrz klasy i klasy dziedziczonej i nie są dostępne z poziomu obiektu klasy.

Przykład:

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

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

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

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

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

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

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

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

Interfejs w TypeScript

Jedna z podstawowych cech TypeScript Interfejsy to zbiór reguł, które muszą zostać zaimplementowane przez jednostkę, która go używa. Jednostką może być klasa, funkcja lub zmienna. Interfejs może składać się z właściwości i metod. Właściwość lub metodę można oznaczyć jako opcjonalną, używając składni „?”. Interfejs dodaje silne sprawdzenie typu dla każdej funkcji, zmiennej lub klasy, która go implementuje.

Składnia interfejsu w TypeScript

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

Zdefiniowałeś interfejs o nazwie Dimension, który ma właściwości width i height, obie typu string.

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

Przykład:

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

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

Sygnatura interfejsu Dimension ma szerokość i wysokość, a oba są obowiązkowe. Pominięcie jakiejkolwiek właściwości lub zmiana typu spowoduje błąd kompilacji podczas kompilacji kodu. JavaScenariusz.

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

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

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

Używanie interfejsu w funkcji jako typu zwracanego

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

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

W powyższym przykładzie interfejs Dimension jest używany jako typ zwracany przez funkcję getDimension(). Wartość zwracana musi być zgodna z właściwościami i typami zadeklarowanymi w interfejsie.

Skompilowany JavaKod skryptu będzie wyglądał następująco:

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

Jeśli podczas kompilacji typ zwracany nie będzie odpowiadał interfejsowi, zostanie zgłoszony błąd.

Interfejs jako parametr funkcji

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

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

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

W powyższym przykładzie użyto interfejsu Dimension jako parametru funkcji getDimension(). Po wywołaniu funkcji przekazywany do niej parametr musi być zgodny z regułami zdefiniowanymi przez interfejs.

Skompilowany JavaKod skryptu będzie wyglądał następująco:

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

Klasa implementująca interfejs

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

Składnia klasy implementującej interfejs:

class NameofClass implements InterfaceName {
}

Poniższy przykład pokazuje interfejs działający z klasą.

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

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

W powyższym przykładzie zdefiniowano interfejs Dimension z właściwościami width i height, obie typu string, oraz metodą o nazwie getWidth(), która zwraca string.

Skompilowany JavaKod skryptu będzie wyglądał następująco:

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

Funkcje w TypeScript

Funkcje to zestawy instrukcji wykonywanych w celu wykonania zadania. W JavaW skrypcie większość kodu jest napisana w formie funkcji i odgrywają one ważną rolę. TypeScript Masz dostępne klasy, interfejsy, moduły i przestrzenie nazw, ale funkcje nadal odgrywają ważną rolę. Różnica między funkcją w JavaSkrypt i TypeScript to typy parametrów i zwracane dostępne w TypeScript funkcja.

JavaFunkcja skryptu:

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

TypeScript funkcjonować:

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

W powyższej funkcji nazwa funkcji to add, a parametry to a1 oraz b1, oba typu liczbowego, a typem zwracanym jest również liczba. Jeśli przekażesz ciąg znaków do funkcji, zgłosi ona błąd kompilacji podczas kompilacji do JavaScenariusz.

Wywołanie funkcji: 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 oraz b1 Są obowiązkowe i ich niepodanie spowoduje błąd. Typy parametrów i typ zwracany są równie ważne i nie można ich zmienić po zdefiniowaniu.

Opcjonalne parametry funkcji

In JavaSkrypt, wszystkie parametry funkcji są opcjonalne i są uznawane za niezdefiniowane, jeśli nie zostaną przekazane. To samo nie dotyczy TypeScriptPo zdefiniowaniu parametrów należy je podać. Jeśli chcesz, aby parametr był opcjonalny, dodaj znak zapytania po nazwie parametru, jak pokazano poniżej:

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

Należy pamiętać, że parametry opcjonalne muszą zostać zdefiniowane na końcu. Pierwszy parametr nie może być opcjonalny, a drugi obowiązkowy, ponieważ kompilator nie wiedziałby, która wartość została podana.

Przypisz wartości domyślne do parametrów

Możesz przypisać parametrom wartości domyślne, jak pokazano poniżej:

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

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

Podobnie jak w przypadku parametrów opcjonalnych, domyślne zainicjowane parametry muszą zostać umieszczone na końcu listy parametrów.

Parametry spoczynkowe

Widziałeś jak TypeScript Obsługuje parametry obowiązkowe, parametry opcjonalne i parametry wartości domyślnych. Teraz przyjrzymy się parametrom resztowym. Parametry resztowe to grupa parametrów opcjonalnych zdefiniowanych razem, przy użyciu trzech kropki (…) po której następuje nazwa parametru, który jest tablicą.

Składnia parametrów spoczynkowych:

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

Jak pokazano powyżej, parametr rest to tablica poprzedzona trzema kropkami. Tablica będzie zawierać wszystkie pozostałe argumenty przekazane do funkcji.

Przykład:

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

Funkcje strzałek

Funkcja strzałki to jedna z ważnych funkcji udostępnionych w ES6 i jest dostępna w TypeScript też. W składni jest gruba strzałka, od której pochodzi nazwa.

Funkcja strzałkowa Składnia:

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

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

Przyjrzyjmy się przykładowi, aby zrozumieć przypadek użycia funkcji strzałkowej.

Przykład:

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

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

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

Utworzyłeś funkcję z właściwością score zainicjowaną wartością 0 oraz metodą getScore, która wewnętrznie używa setTimeout i po jednej sekundzie rejestruje this.score. Zalogowana wartość jest niezdefiniowana, mimo że this.score jest zdefiniowane i zainicjowane. Problem leży w to Słowo kluczowe. Funkcja wewnątrz setTimeout ma własne this, a ponieważ score nie jest w niej zdefiniowany, wynik jest niezdefiniowany.

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

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

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

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

Funkcja strzałkowa nie ma własnej to, a zamiast tego współdzieli zmienną z zakresu nadrzędnego, więc zmienne zadeklarowane poza zakresem są dostępne za pomocą this w funkcji strzałkowej. Są one przydatne ze względu na krótszą składnię, a także w przypadku wywołań zwrotnych, procedur obsługi zdarzeń i funkcji czasowych.

TypeScript Enums

A TypeScript enum to obiekt przechowujący zbiór powiązanych ze sobą wartości, przechowywanych razem. JavaSkrypt nie obsługuje natywnie typów wyliczeniowych. Większość języków programowania, takich jak Java, C i C++ obsługuje wyliczenia i TypeScript udostępnia je również. Wyliczenia definiuje się za pomocą słowa kluczowego enum.

Jak zadeklarować Enum?

Składnia:

enum NameofEnum {
   value1,
   value2,
    ..
}

Przykład: Wyliczenie

enum Directions {
    North,
    South,
    East,
    West
}

W powyższym przykładzie zdefiniowano wyliczenie o nazwie „Drogi” z wartościami „Północ”, „Południe”, „Wschód” i „Zachód”. Wartości są numerowane od 0 dla pierwszego wpisu i zwiększają się o 1 dla każdego kolejnego wpisu.

Deklarowanie wyliczenia z wartością liczbową

Domyślnie, jeśli elementowi wyliczenia nie zostanie podana wartość, przyjmuje on liczbę, zaczynając od 0. Poniższy przykład pokazuje wyliczenie z jawnymi wartościami liczbowymi.

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

Możesz również przypisać wartość początkową, a kolejne elementy otrzymają wartości zwiększone. Na przykład:

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

Północ zaczyna się od 5, więc Południe ma 6, Wschód 7, a Zachód 8.

Zamiast wartości domyślnych możesz również przypisać wartości według własnego wyboru. Na przykład:

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

Jak uzyskać dostęp do Enum?

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

enum Directions {
    North,
    South,
    East,
    West
}

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

Skompilowany JavaSkrypt wygląda następująco:

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

Ponieważ JavaSkrypt nie obsługuje wyliczeń, kompilator konwertuje wyliczenie na funkcję samowywołującą, jak pokazano powyżej. Podwójne przypisanie tworzy mapę odwrotną.ping od numeru z powrotem do nazwy.

Deklarowanie wyliczenia z wartością ciągu

Możesz przypisać wybrane przez siebie wartości ciągów, jak pokazano w poniższym przykładzie.

Przykład:

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

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

Skompilowany JavaSkrypt wygląda następująco:

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

W czym znajdują się moduły TypeScript?

Pliki utworzone w TypeScript Mają dostęp globalny, co oznacza, że ​​zmienne zadeklarowane w jednym pliku są dostępne w innym pliku. Ten globalny charakter może powodować konflikty kodu i problemy w czasie wykonywania. Funkcjonalność modułów eksportu i importu może być wykorzystana do uniknięcia konfliktów zmiennych globalnych i funkcji. Ta funkcja pojawiła się w… JavaSkrypt z wydaniem ES6, który jest również obsługiwany w TypeScript.

Dlaczego potrzebujesz modułów w TypeScript?

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

Przykładowy test1.ts

let age : number = 25;

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

Przykładowy test2.ts

W pliku test2.ts można uzyskać dostęp do zmiennej wiek zdefiniowano w test1.ts i zmodyfikowano go, jak pokazano poniżej:

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

Może to stwarzać wiele problemów, ponieważ zmienne są dostępne globalnie i można je modyfikować z dowolnego miejsca.

Z ModułyNapisany kod pozostaje lokalny dla pliku i nie można uzyskać do niego dostępu spoza niego. Aby udostępnić cokolwiek z pliku, należy go wyeksportować za pomocą słowa kluczowego export. Export używa się, gdy zmienna, klasa, funkcja lub interfejs ma być użyta w innym pliku. import Służy do uzyskiwania dostępu do wyeksportowanego elementu. Dzięki temu kod pozostaje nienaruszony w pliku i nawet jeśli zdefiniujesz te same nazwy zmiennych, nie zostaną one pomylone.

Korzystanie z eksportu i importu

Istnieje wiele sposobów eksportowania i importowania. Omówimy składnię, która jest najczęściej używana.

Składnia importu i eksportu 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"

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

test1.ts

export let age: number = 25;

Słowo kluczowe export służy do udostępniania zmiennej wieku innemu plikowi.

test2.ts

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

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

Składnia importu i eksportu 2:

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

export = classname;

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

Kiedy używasz eksport = Aby wyeksportować moduł, należy użyć polecenia importu („ścieżka pliku modulename”).

Oto działający przykład ilustrujący ten przypadek.

Klient.ts

class Customer {
    name: string;
    age: number;

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

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

export = Customer;

testKlient.ts

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

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

Moduł ładujący

Moduły nie mogą działać samodzielnie, dlatego potrzebny jest program ładujący moduły, aby zlokalizować zależności importu, jak pokazano w TypeScript Przykłady powyżej. Dostępne są moduły ładujące CommonJS dla Nodejs i Require.js do uruchamiania w przeglądarce.

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

tsc --module commonjs testCustomer.ts

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

tsc --module amd testCustomer.ts

Za pomocą powyższego polecenia pliki zależne zostaną przekonwertowane na pliki js.

Przykładowy plik testCustomer.ts do pliku testCustomer.js przy użyciu Requirejs

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

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

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

Aby przetestować działanie require.js, należy utworzyć plik o nazwie main.js, który odwołuje się do zależności w sposób pokazany poniżej.

Oto struktura folderów:

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

main.js

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

test.html

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

Przestrzenie nazw w TypeScript

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

Składnia przestrzeni nazw

namespace name{

export class {
}

export interface {
}

export const constname;

}

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

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

namespace StudentSetup {

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

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

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

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

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

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

Dostęp do przestrzeni nazw

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

testStudentSetup.ts

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

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

Do klasy, interfejsu lub funkcji dostępnej w przestrzeni nazw należy odwoływać się za pomocą nazwy przestrzeni nazw, na przykład StudentSetup.addSpace aby uzyskać dostęp do funkcji i Konfiguracja ucznia. Student aby uzyskać dostęp do klasy.

Możesz skompilować oba pliki do jednego pliku js, jak pokazano poniżej:

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

Sprawdź wynik w wierszu poleceń, korzystając z poniższego polecenia:

node namespace.js

Wyjście:

The name is :H a r r y

Deklaracje otoczenia w TypeScript

TypeScript pozwala na korzystanie z usług stron trzecich JavaPliki skryptów z wykorzystaniem deklaracji ambient. Zaletą tej funkcji jest to, że nie trzeba przepisywać biblioteki, a mimo to można korzystać ze wszystkich jej funkcji z weryfikacją typu. TypeScript.

Składnia otoczenia

Aby zadeklarować moduł ambient:

declare module moduleName {
   //code here
}

Plik ambient należy zapisać jako:

filename.d.ts

Aby skorzystać z pliku nazwapliku.d.ts w pliku .ts należy odwołać się do niego w następujący sposób:

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

Deklaracja typu otoczenia w TypeScript odwołuje się do biblioteki innej firmy i ponownie deklaruje wymagane funkcje, używając własnych typów. Rozważmy na przykład mały JavaPoniżej znajduje się biblioteka skryptów.

Third Party JavaPlik skryptu: testString.js

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

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

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

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

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

Tworzenie modułu otoczenia w TypeScript

Teraz utworzymy moduł ambient, który odwołuje się do JavaSkrypt działa jak opisano powyżej i w razie potrzeby dodaje sprawdzenie typu.

Nazwa pliku: tstring.d.ts

declare module TestString {

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

declare var StringChecks: TestString.StringsFunc;

Definiujesz moduł o nazwie TestString i eksportujesz interfejs StringsFunc. Każdy podpis określa, co funkcja akceptuje i zwraca:

• isString(str:string): wartość logiczna – przyjmuje ciąg znaków i zwraca wartość logiczną. Przekazanie liczby lub innego typu powoduje błąd kompilacji.
• convertToUpperCase(str: string): string – przyjmuje ciąg znaków i zwraca ciąg znaków.
• convertToLowerCase(str: string): string – przyjmuje ciąg znaków i zwraca ciąg znaków.
• konwertujToStringBold(str:string): ciąg – przyjmuje ciąg znaków i zwraca ciąg znaków.

Ponieważ JavaPlik skryptu ujawnia nazwę obiektu StringChecks, do tej samej nazwy odwołujemy się ostatecznie w pliku .d.ts:

declare var StringChecks: TestString.StringsFunc;

Korzystanie z modułu Ambient w TypeScript

Oto plik test.ts, który wykorzystuje plik ambient 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);

Kompiluj za pomocą tsc test.ts, aby utworzyć test.js:

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

Teraz możesz używać pliku test.js w pliku HTML razem z plikiem biblioteki testString.js.

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

Wyjście:

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

Aby kontynuować, porównaj bezpośrednio oba języki TypeScript vs JavaScenariusz, ponownie odwiedzić JavaMetody tablicowe skryptów w przypadku nietypowanych odpowiedników użytych tutaj i przestudiuj zapętla się JavaScenariusz oraz wewnętrzny i zewnętrzny JavaScenariusz w przypadku podstawowych funkcji przeglądarki, na których opiera się skompilowany wynik.

FAQ