TypeScript Учебник: что такое, интерфейс, перечисление, массив с примером

Что такое TypeScript?

TypeScript это надмножество JavaСценарий. TypeScript — это чистый объектно-ориентированный язык программирования, поддерживающий классы, интерфейсы и т. д. Это язык с открытым исходным кодом, разработанный Microsoft который статически компилирует код в JavaСкрипт. Его можно легко запустить в браузере или Nodejs.

Все новейшие функции, выпущенные для ECMAScript, поддерживаются в TypeScript и в дополнение к этому TypeScript имеет собственные объектно-ориентированные функции, такие как интерфейсы, объявление окружения, наследование классов и т. д., что помогает в разработке больших приложений, которые в противном случае было бы трудно реализовать в JavaСценарий.

Как скачать и установить TypeScript

Вот пошаговый процесс загрузки и установки. TypeScript:

Шаг 1) Загрузите и установите Nodejs

Перейдите на официальный сайт nodejs: https://nodejs.org/en/download/ а также загрузите и установите nodejs в соответствии с вашей операционной системой. Подробная инструкция по загрузке nodejs доступна здесь: https://www.guru99.com/download-install-node-js.html

Шаг 2) Проверьте версию Nodejs и npm.

Чтобы проверить, установлены ли nodejs и npm, просто проверьте версию в командной строке.

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

D:\typeproject>npm --version
6.4.1

Итак, у вас установлены nodejs v10 и npm 6.

Шаг 3) TypeScript Установка:

Создайте каталог проекта типаproject/ и запустите npm init, как показано в команде ниже:

npm init

Шаг 4) Начните установку

Теперь мы создадим пакет .json, в котором будут храниться зависимости нашего проекта.

После завершения установки TypeScript следующим образом:

npm -g install typescript

Приведенная выше команда позаботится об установке TypeScript. Добавление «-g» к npm install установит TypeScript глобально. Преимущество использования -g заключается в том, что вы сможете использовать TypeScript TSC команду из любого каталога, поскольку она установлена глобально. Если вы не хотите устанавливать TypeScript глобально используйте команду ниже:

npm --save install typescript

Создайте папку src/ в каталоге вашего проекта и в папке src/ создайте TypeScript файл test.ts и напишите свой код.

Пример: test.ts

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

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

Компилировать TypeScript код для Javascript

Для компиляции приведенного выше кода используйте следующую команду:

If TypeScript установлен глобально, используйте команду ниже:

tsc test.ts

If TypeScript установлен локально в вашем проекте, вам нужно использовать путь TypeScript из node_modules, как показано:

node_modules/typescript/bin/tsc test.ts

Приведенная выше команда создаст файл test.js, код которого будет скомпилирован в JavaScript.

Пример: test.js

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

Выполнить Javascript использование Nodejs

В этом TypeScript учебник, мы выполним test.js в nodejs следующим образом:

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

Консольное значение отображается при выполнении test.js.

Выполнить JavaСкрипт в браузере

Это критически важно для анализа и выбора наиболее эффективных ключевых слов для улучшения рейтинга вашего сайта.

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

Компилировать TypeScript код для Javascript используя версию EcmaScript

TypeScript поддерживает все выпущенные функции Ecmascript, и разработчики могут использовать их при кодировании. Но не все новые функции поддерживаются в старых браузерах, из-за чего вам нужно компилировать javascript в более старую версию Ecmascript. TypeScript предоставляет параметры компилятора, которые могут это сделать.

Пример: test.ts

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

addnumbers(10, 20);

Чтобы скомпилировать версию ES по вашему выбору, вы можете использовать параметр target или t в своей команде следующим образом:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

По умолчанию целью является ES3. Если вы хотите изменить ее, вы можете использовать приведенную выше команду.

В настоящее время мы будем использовать ES6 в этом TypeScript учебник в качестве цели:

tsc --target ES6  test.ts

test.ts в test.js

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

addnumbers(10, 20);

Код остается таким, какой он есть, поскольку использованная вами стрелочная функция является функцией ES6 и не изменяется при компиляции в ES6.

По умолчанию целью является ES3, поэтому без цели вы получаете test.js как:

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

Итак, здесь толстая стрелка заменена на обычную анонимную функцию.

Переменные в TypeScript

Переменные показатели используются для хранения значений, и значение может быть строкой, числом, логическим значением или выражением. Когда дело доходит до переменных в TypeScript, они похожи на JavaСценарий. Итак, давайте научимся объявлять и присваивать значения переменным в TypeScript.

Переменные нельзя использовать в коде без определения. Чтобы объявить переменную, вы можете использовать

вар ключевое слово,

позволять ключевое слово

Const ключевое слово

Работа с переменными в TypeScript похож на javascript, и пользователи, знакомые с javascript, найдут его очень простым. Только переменные типа позволять и Const используются не так часто по сравнению с вар.

Объявление переменных с помощью var

Синтаксис:

var firstname = "Roy";

Давайте посмотрим на несколько TypeScript примеры, чтобы понять работу ключевого слова var, а также область видимости переменных, объявленных с помощью вар ключевое слово.

Пример 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

Пример 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.

Пример 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.

Объявление переменных с помощью let

TypeScript синтаксис let приведен ниже:

Синтаксис:

let name="Roy";

Работа позволять переменная почти такая же, как вар, но с небольшой разницей и поймете то же самое, используя TypeScript пример.

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

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

Выше TypeScript пример выдает ошибку, но то же самое сработало бы нормально, если бы это было с вар ключевое слово. Переменные, использующие позволять доступны в пределах объявленной области блока, например, переменная t доступна только внутри if-блока, а не для всей функции.

Кроме того, если вам случится объявить переменную внутри какой-либо функции или цикла for, while-loop, TypeScript switch, она будет доступна вам только внутри этого блока и не будет ссылки на нее за пределами блока, и будет выдано сообщение об ошибке, если переменная будет использоваться вне блока. В этом основное различие между переменными, объявленными ключевым словом var и let.

Объявление переменных с помощью const

Const означает постоянные переменные. Они похожи на переменные let, с той лишь разницей, что после того, как им присвоено значение, его нельзя изменить.

Синтаксис:

const name;

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

Таким образом, пользователи могут использовать константные переменные только в тех случаях, когда они знают, что им не нужно изменять присвоенные им значения.

Вводит TypeScript

TypeScript является строго типизированным языком, тогда как javascript — нет. Переменная, имеющая значение, определенное как строка, может быть изменена на число без каких-либо проблем в Javascript. То же самое не терпится в TypeScript. В TypeScriptТип переменной определяется только в начале и в ходе выполнения должен поддерживать тот же тип; любые изменения в нем приведут к ошибке времени компиляции во время компиляции в JavaScript.

Ниже приведены типы:

Номер регистрации
строка
Логический
Все
Void

Номер регистрации

Принимает только целые числа, числа с плавающей запятой, дроби и т. д.

Синтаксис:

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

Вот несколько важных методов, которые можно использовать с числовыми типами:

toFixed () – он преобразует число в строку и сохранит десятичные знаки, заданные методу.

нанизывать() – этот метод преобразует число в строку.

значение() – этот метод вернет примитивное значение числа.

точность() – этот метод отформатирует число до указанной длины.

Пример: со всеми методами String

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

строка

Строка: только строковые значения.

Синтаксис:

let str :string = "hello world";

Вот несколько важных методов, которые можно использовать с типами String:

раскол() – этот метод разделит строку на массив.
Шара() – этот метод выдаст первый символ по заданному индексу.
индекс() – этот метод выдаст позицию первого вхождения заданного ему значения.
Замените () – этот метод принимает 2 строки: сначала значение для поиска в строке, и, если оно присутствует, оно заменит второе и вернет новую строку.
Отделка () – этот метод удалит пробелы с обеих сторон строки.
подстрока() – этот метод вернет часть строки, которая будет зависеть от позиции, заданной в качестве начала и конца.
подстрока() – этот метод вернет часть строки, которая будет зависеть от позиции, заданной в качестве начала и конца. Символ в конечной позиции будет исключен.
toUpperCase() — преобразует строку в верхний регистр
toLowerCase() – преобразует строку в нижний регистр.

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"

Логический

Принимает логические значения, такие как true, false, 0 и 1.

Синтаксис:

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

Все

Синтаксис:

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

Переменные, объявленные с использованием любое type может принимать переменную как строку, число, массив, логическое значение или пустоту. TypeScript не выдаст никаких ошибок во время компиляции; это похоже на переменные, объявленные в JavaСкрипт. Используйте переменную любого типа только тогда, когда вы не уверены в типе значения, которое будет связано с этой переменной.

Void

Тип Void чаще всего используется в качестве возвращаемого типа функции, которой нечего возвращать.

Синтаксис:

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

TypeScript массив

An массив in TypeScript это тип данных, в котором можно хранить несколько значений. Давайте узнаем, как объявлять и назначать значения для операций с массивами в TypeScript.

С TypeScript является строго типизированным языком, вы должны указать, какой тип данных будет у значений в массиве. В противном случае он будет считать его имеющим любой тип.

Объявить и инициализировать массив

Синтаксис:

let nameofthearray : Array<typehere>

Пример

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.

Различные способы доступа к элементам массива

Чтобы получить элементы из массива, значения начинаются с индекса 0 до длины массива.

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

Вы также можете получить элементы из массива, используя TypeScript для поиска как показано ниже:

. TypeScript для цикла

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

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

Output:
2016
2017
2018
2019

Использование цикла for-of

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

Использование цикла foreach

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

TypeScript Методы массива

TypeScript Объект Array имеет множество свойств и методов, которые помогают разработчикам легко и эффективно обрабатывать массивы. Вы можете получить значение свойства, указав имя массива.свойство, а выходные данные метода, указав имя массива.метод().

свойство длины

=> Если вы хотите узнать количество элементов в массиве, вы можете использовать свойство length.

Revдругой метод

=> Вы можете изменить порядок элементов в массиве, используя обратный метод.

Метод сортировки

=> Вы можете сортировать элементы массива, используя метод сортировки.

Поп-метод

=> Вы можете удалить последний элемент массива, используя метод pop.

Shift метод

=> Вы можете удалить первый элемент массива, используя метод сдвига.

Метод выталкивания

=> Вы можете добавить значение в качестве последнего элемента массива.

метод concat

=> Вы можете объединить два массива в один элемент массива.

Пример свойства длины

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

Пример обратного метода

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

Пример метода сортировки

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

Пример метода pop

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

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

Пример метода смены

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

Пример метода push

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

Пример метода 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]

Класс в TypeScript

TypeScript это надмножество JavaСценарий, поэтому все, что можно сделать в JavaСценарий также возможен в TypeScript. Класс — это новая функция, добавленная начиная с ES6, поэтому ранее в JavaСкрипт функциональности типа класса был опробован с использованием функции с функциональностью прототипа для повторного использования кода. Используя класс, вы можете иметь наш код почти близким к таким языкам, как java, c#, python и т. д., где код может быть повторно использован. С функцией класса в TypeScript/JavaСкрипт делает язык очень мощным.

Определение класса в TypeScript

Вот базовый синтаксис класса в TypeScript:

class nameofclass {
     //define your properties here

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

Пример: рабочий пример класса.

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

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

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

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

В приведенном выше примере у вас есть класс под названием «Студенты». У него есть свойства age, name иroll_no.

Конструктор в TypeScript Класс

Пример класса Student, который мы определили выше, имеет конструктор, как показано ниже:

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

Метод конструктора имеет параметры age, name иroll_no. Конструктор позаботится об инициализации свойств при вызове класса. Доступ к свойствам осуществляется с помощью этой ключевое слово. Пример this.age для доступа к свойству age, this.roll_no для доступа к Roll_no и т. д. Вы также можете использовать конструктор по умолчанию, как показано ниже:

constructor () {}

Методы внутри TypeScript Класс

В примере класса Студенты определены методы, например getRollNo(), getName(), getAge(), которые используются для предоставления подробной информации о свойствахroll_no, name и age.

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

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

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

Создание экземпляра класса в TypeScript

In TypeScript Чтобы создать экземпляр класса, вам нужно использовать оператор new. Когда мы создаем экземпляр класса с помощью оператора new, мы получаем объект, который может получить доступ к свойствам и методам класса, как показано ниже:

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

составление TypeScript Класс для JavaСценарий

Вы можете использовать команду tsc, как показано ниже, для компиляции в Javascript.

Command: tsc  Students.ts

Выход Javascript код компиляции такой, как показано ниже:

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, класс преобразуется в самостоятельно вызываемую функцию.

Наследование класса

Классы могут наследоваться с помощью продлить ключевое слово в TypeScript.

Синтаксис наследования классов:

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 смогу поделиться класс А методы и свойства.

Вот рабочий пример класса, использующего наследование.

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

У вас есть два класса: Человек и Студент. Класс Student расширяет Person, и объект, созданный в Student, может получить доступ к своим собственным методам и свойствам, а также к классу, который он расширил.

Теперь давайте добавим еще несколько изменений в приведенный выше класс.

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

Изменения, которые вы добавили по сравнению с предыдущим примером, заключаются в том, что в классе Student определен конструктор. Конструктор должен взять те же параметры, что и базовый класс, и добавить любые дополнительные параметры, если таковые имеются.

In TypeScript вам нужно вызвать super will все параметры в качестве базовых параметров в нем. Это должно быть первое, что нужно сделать внутри конструктора. Супер выполнит конструктор расширенного класса.

Модификаторы доступа в TypeScript

TypeScript поддерживает публичные, частные и защищенные модификаторы доступа к вашим методам и свойствам. По умолчанию, если модификаторы доступа не указаны, метод или свойство считаются общедоступными, и они будут легко доступны из объекта класса.

В случае модификаторов частного доступа они недоступны для доступа из объекта класса и предназначены для использования только внутри класса. Они недоступны для унаследованного класса.

В случае модификаторов защищенного доступа они предназначены для использования внутри класса и унаследованного класса и не будут доступны из объекта класса.

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

Частное: свойства или методы не могут быть доступны объекту класса, а также производному классу, они предназначены для внутреннего использования внутри класса.
Защищено: свойства и методы также не могут быть доступны созданному объекту. Они доступны изнутри класса и доступны классу, расширяющему его.
Общественность: свойства и методы объявляются без ключевого слова. К ним легко получить доступ, используя объект класса извне.

Интерфейс в TypeScript

Одна из основных особенностей TypeScript Интерфейсы. Интерфейс — это набор определенных правил, которые должны быть реализованы сущностью, использующей его. Сущность может быть классом, функцией или переменной. Интерфейс может состоять из свойств и методов. Вы можете определить свойства как необязательные, используя синтаксис «?» для этого свойства или метода. Интерфейс добавляет строгую проверку типа для любой функции, переменной или класса, реализующего интерфейс.

Синтаксис интерфейса в TypeScript

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

Вы определили интерфейс с именем Dimension, который имеет свойства width и height, и оба типа имеют строковый тип.

Теперь этот интерфейс может быть реализован переменной, функцией или классом. Вот пример переменной, реализующей интерфейс Dimension.

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

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

Подпись интерфейса Dimension имеет ширину и высоту, и оба являются обязательными. Если при реализации интерфейса какое-либо свойство пропущено или тип изменен, при компиляции кода в javascript возникнет ошибка времени компиляции.

Приведенный выше код, скомпилированный в JavaScript, выглядит следующим образом:

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

Давайте теперь посмотрим, как использовать интерфейс с функцией.

Использование интерфейса для функции в качестве возвращаемого типа

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

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

В приведенном выше примере интерфейс Dimension реализован в функции getDimension() в качестве возвращаемого типа. Тип возвращаемого значения getDimension() должен совпадать со свойствами и типом, указанными для измерения интерфейса.

Скомпилированный код для Javascript будет выглядеть следующим образом:

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

Если во время компиляции тип возвращаемого значения не соответствует интерфейсу, будет выдана ошибка.

Интерфейс как параметр функции

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"

В приведенном выше примере вы использовали размер интерфейса в качестве параметра функции getDimension(). Когда вы вызываете функцию, вам необходимо убедиться, что переданный ей параметр соответствует определенному правилу интерфейса.

Скомпилированный код для Javascript будет выглядеть следующим образом:

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

Класс, реализующий интерфейс

Чтобы использовать интерфейс с классом, вам нужно использовать ключевое слово инвентарь.

Синтаксис класса, реализующего интерфейс:

class NameofClass implements InterfaceName {
}

В следующем примере показана работа интерфейса с классом.

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

В приведенном выше примере вы определили интерфейс Dimension со свойствами width и height как типа string, так и методом getWidth(), который возвращает значение в виде строки.

Скомпилированный код для Javascript будет выглядеть следующим образом:

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

Функции в TypeScript

Функции — это набор инструкций, выполняемых для выполнения задачи. В Javascript, большая часть кода написана в виде функций и играет главную роль. В TypeScript, у вас есть классы, интерфейсы, модули, пространства имен, но, тем не менее, функции играют важную роль. Разница между функцией в джаваскрипт и TypeScript функция — это тип возвращаемого значения, доступный с помощью TypeScript функции.

JavaФункция скрипта:

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

TypeScript функция:

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

В приведенных выше функциях добавляется имя функции, параметры a1 и b1 оба имеют тип числа, и тип возвращаемого значения также является числом. Если вам случится передать строку в функцию, она выдаст ошибку времени компиляции при ее компиляции в JavaСценарий.

Вызов функции: добавить

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'.

Параметры a1 и b1 являются обязательными параметрами и выдадут ошибку, если не будут получены таким образом. Кроме того, тип параметра и тип возвращаемого значения очень важны и не могут быть изменены после определения.

Необязательные параметры функции

В javascript все параметры функций являются необязательными и считаются неопределенными, если не переданы. Но это не относится к TypeScript, как только вы определите параметры, вам также необходимо их отправить, но если вы хотите оставить какой-либо параметр необязательным, вы можете сделать это с помощью? против имени параметра, как показано ниже:

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.

Обратите внимание, что необязательные параметры должны быть определены в функции только в последнюю очередь. Вы не можете сделать первый параметр необязательным, а второй параметр обязательным. Когда вы вызываете функцию с одним параметром, компилятор выдает ошибку. Поэтому необходимо оставить необязательные параметры в конце.

Присвойте значения по умолчанию параметрам

Вы можете назначить значения по умолчанию для параметров, как показано ниже:

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

Подобно необязательным параметрам, инициализированные по умолчанию параметры также должны храниться в конце функции.

Остальные параметры

Вы видели, как TypeScript обрабатывает обязательные параметры, необязательные параметры и параметры, инициализированные значениями по умолчанию. Теперь посмотрим на параметры отдыха. Остальные параметры представляют собой группу необязательных параметров, определенных вместе, и они определяются с использованием трех точки (…) за которым следует имя параметра, который представляет собой массив.

Синтаксис параметров отдыха:

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

Как показано выше, остальные параметры определяются с помощью (…имя-параметра); Остальной параметр представляет собой массив с префиксом трех точек. В массив будут переданы все параметры. Вы можете вызвать функцию, как показано в примере ниже:

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

Стрелочные функции

Стрелочная функция — одна из важных функций, выпущенных в ES6, и она доступна в TypeScript слишком. В синтаксисе стрелочной функции есть толстая стрелка, из-за чего функция называется стрелочной функцией.

Стрелочная функция Синтаксис:

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

Каково использование функции стрелки?

Давайте посмотрим на пример, чтобы понять вариант использования функции Arrow:

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

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

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

Вы создали анонимную функцию, у которой есть свойство this. Score инициализируется значением 0 и методом getScore, который внутри имеет setTimeout, и через 1 секунду он консолидирует this.score. Консольное значение дает неопределенное значение, хотя у вас есть this.score, определенный и инициализированный. Проблема здесь в том,is ключевое слово. Функция внутри setTimeout имеет свою собственную this, и она пытается ссылаться на оценку внутри себя, и, поскольку она не определена, она выдает неопределенное значение.

То же самое можно сделать с помощью функции стрелки, как показано ниже:

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

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

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

Вы изменили функцию внутри setTimeout на функцию стрелки, как показано ниже:

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

Стрелочная функция не имеет собственной этой определен, и он разделяет своего родителя этой, поэтому переменные, объявленные снаружи, легко доступны с помощью this внутри стрелочной функции. Они полезны из-за более короткого синтаксиса, а также для обратных вызовов, обработчиков событий, внутренних функций синхронизации и т. д.

TypeScript Перечисления

TypeScript Enum — это объект, который содержит коллекцию связанных значений, хранящихся вместе. Javascript не поддерживает перечисления. Большая часть язык программирования , такие как Java, С, C++ поддерживает TypeScript Enum и он также доступен с TypeScript слишком. Перечисления определяются с использованием ключевого слова enum.

Как объявить Enum?

Синтаксис:

enum NameofEnum {
   value1,
   value2,
    ..
}

Пример: перечисление

enum Directions {
North,
South,
East,
West
}

В приведенном выше примере вы определили перечисление под названием Directions. Указанное значение: Север, Юг, Восток, Запад. Значения нумеруются от 0 для первого значения в перечислении и впоследствии увеличиваются на 1 для следующего значения.

Объявить Enum с числовым значением

По умолчанию, если перечислению не присвоено никакого значения, оно считает его числом, начиная с 0. В следующем примере показано перечисление с числовым значением.

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

Вы также можете назначить начальное значение перечислению, и следующие значения перечисления получат увеличенные значения. Например:

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

Теперь значение перечисления North начинается с 5, поэтому South получит значение 6, East = 7 и West = 8.

Вы также можете назначить значения по вашему выбору вместо значений по умолчанию. Например:

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

Как получить доступ к Enum?

В следующем примере показано, как использовать Enum в вашем коде:

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

Скомпилированный код javascript выглядит следующим образом:

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

С Javascript не поддерживает перечисления, он преобразует перечисление в самостоятельно вызываемые функции, как показано выше.

Объявить Enum со строковым значением

Вы можете присвоить строковые значения по вашему выбору, как показано в примере ниже:

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

Скомпилированный код javascript выглядит следующим образом:

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

В чем заключаются модули TypeScript?

Файлы, созданные в TypeScript имеют глобальный доступ, что означает, что переменные, объявленные в одном файле, легко доступны в другом файле. Этот глобальный характер может вызвать конфликты кода и проблемы с выполнением во время выполнения. У вас есть функции модуля экспорта и импорта, которые можно использовать, чтобы избежать конфликтов глобальных переменных и функций. Эта функция доступна в JavaСкрипт с релизом ES6, а также поддерживаемый в TypeScript.

Зачем нужны модули в TypeScript?

В следующем примере показана проблема без модулей:

Пример test1.ts

let age : number = 25;

Вы определили переменный возраст номера типа в test1.ts.

Пример test2.ts

В файле test2.ts вы можете легко получить доступ к переменной. возраст определенный в test1.ts, а также измените его, как показано ниже:

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

Таким образом, приведенный выше случай может создать множество проблем, поскольку переменные доступны глобально и могут быть изменены.

С Модули, написанный код остается локальным для файла и не может быть доступен за его пределами. Чтобы получить доступ к чему-либо из файла, его необходимо экспортировать с помощью ключевого слова экспорта. It используется, когда вы хотите, чтобы переменная, класс, функция или интерфейс использовались в другом файле. Импортировать используется, когда вы хотите получить доступ к экспортированной переменной, классу, интерфейсу или функции. При этом написанный код остается нетронутым внутри файла, и даже если вы определяете одинаковые имена переменных, они не смешиваются и ведут себя локально по отношению к файлу, в котором они объявлены.

Использование экспорта и импорта

Существует множество способов экспорта и импорта. Итак, здесь мы обсудим синтаксис, который чаще всего используется.

Синтаксис импорта и экспорта 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"

Вот рабочий пример использования экспорта и импорта.

test1.ts

export let age: number = 25;

Ключевое слово экспорта используется для совместного использования переменной возраста в другом файле.

test2.ts

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

Ключевое слово импорта используется для доступа к возраст переменная, и вам нужно указать местоположение файла, как показано выше.

Синтаксис для импорта и экспорта 2:

Существует другой способ экспорта и импорта, синтаксис которого показан ниже:

export = classname;

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

Когда вы используете экспорт = Чтобы экспортировать ваш модуль, при импорте необходимо использовать require («путь к файлу имени модуля»).

Вот рабочий пример, показывающий описанный выше случай:

Клиент.ц

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

Загрузчик модулей

Модули не могут работать сами по себе, поэтому вам понадобится загрузчик модулей, чтобы найти зависимости импорта, как вы видели в TypeScript примеры, показанные выше. Доступен загрузчик модулей — CommonJS для nodejs и Require.js для запуска в браузере.

Для компиляции кода с использованием модуля CommonJS используйте следующую команду:

tsc --module commonjs testCustomer.ts

Для компиляции кода с использованием модуля Requirejs используйте следующую команду:

tsc --module amd testCustomer.ts

Зависимые файлы будут преобразованы в файл js с помощью указанной выше команды.

Пример testCustomer.ts для testCustomer.js с использованием Requirejs

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

Пример использования Customer.ts в Customer.js с использованием 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;
});

Чтобы протестировать его с помощью require.js, вам необходимо создать файл с именем main.js, который содержит ссылку на зависимости, как показано.

Вот структура папок:

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>

Пространства имен в TypeScript

Пространство имен в основном представляет собой набор классов, интерфейсов, переменных и функций в одном файле.

Синтаксис пространства имен

namespace name{

export class {
}

export interface {
}

export const constname;

}

Соответствующий код доступен в одном пространстве имен.

Рабочий пример пространства имен: 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;
        }
    }
}

Имя пространства имен СтуденческаяНастройка, вы добавили интерфейс StudDetails, функцию addSpace и класс Student.

Доступ к пространству имен

Ниже приведен код, в котором вы используете пространство имен. Студенческая установка.

testStudentSetup.ts

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

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

Класс, интерфейс, функция, доступные внутри пространства имен, должны быть указаны с использованием имени примера пространства имен. StudentSetup.addSpace чтобы получить доступ к функции, СтудентSetup.Студент для доступа к классу.

Вы можете скомпилировать оба файла в один js, как показано ниже:

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

Проверьте вывод в командной строке, используя команду ниже:

node namespace.js

Он отобразит вывод как:

The name is: H a r r y

Окружающие декларации в TypeScript

TypeScript позволяет использовать сторонние файлы javascript с помощью объявления ambient. Преимущество этой функции в том, что вам не нужно переписывать и при этом использовать все возможности библиотеки в TypeScript.

Окружающий синтаксис

Чтобы объявить модуль окружения:

declare module moduleName {
   //code here
}

Окружающий файл необходимо сохранить как:

filename.d.ts

Чтобы использовать файл имя файла.d.ts в вашем .ts вам нужно указать это как:

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

Объявление окружающего типа в TypeScript будет иметь ссылку на стороннюю библиотеку и повторно объявить требуемые функции с собственным типом. Например, предположим, что у вас есть небольшая библиотека javascript, как показано ниже:

Третья сторона JavaФайл скрипта: testString.js

Пример: 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();
    }
};

У вас есть объект StringChecks, который имеет такие функции, как isString, ConvertToUpperCase, ConvertToLowerCase и converToStringBold.

Создание модуля Ambient в TypeScript

Теперь создадим модуль окружения, который будет ссылаться на вышеуказанные функции js, а также добавит проверку типа в соответствии с нашими требованиями.

Имя файла: 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;

Вам необходимо определить имя модуля как TestString и экспортировать интерфейс StringsFunc.

isString(str: string): логическое значение

=> Параметр будет приниматься в виде строки, а тип возвращаемого значения будет логическим. При использовании в вашем файле .ts, если вы передадите параметр как число или что-то еще, кроме строки, вы получите ошибку типа компиляции.

ConvertToUpperCase (строка: строка): строка

=> Это примет аргумент в виде строки и вернет строку. То же самое касается ConvertToLowerCase (строка: строка)
: нить; и ConvertToStringBold (строка: строка): строка
;

Поскольку в файле javascript у вас есть имя объекта как StringChecks, наконец, нам нужно сослаться на него в файле .d.ts, что делается как:

declare var StringChecks: TestString.StringsFunc;

Использование модуля Ambient в TypeScript

Теперь вот файл test.ts, в котором будет использоваться окружающий файл tstring.d.ts.

Пример: 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);

Компилировать TypeScript из tsc test.ts в 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);

Теперь вы можете использовать test.js в html-файле, а также файл библиотеки testString.js.

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

Это вывод, видимый в консоли:

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

TypeScript История

Давайте посмотрим важные вехи из истории TypeScript:

После двух лет внутреннего развития в Microsoft. TypeScript 0.9, выпущенная в 2013 г.
Дополнительная поддержка дженериков TypeScript 1.0 была выпущена на Build 2014.
В июле 2014 года новый TypeScript появился компилятор, который в пять раз быстрее предыдущей версии.
В июле 2015 года добавлена поддержка модулей ES6, ключевое слово пространства имен для поддержки декораторов.
В ноябре 2016 года были добавлены такие функции, как ключи и типы поиска сопоставленных типов, а также все остальное.
27 марта 2018 г. в условные типы добавлен улучшенный ключ с поддержкой типов пересечения. TypeScript.

Зачем использовать TypeScript?

Вот важные плюсы/преимущества использования TypeScript

Большой и сложный проект в JavaСкрипты сложно кодировать и поддерживать.
TypeScript очень помогает в организации кода и при этом избавляет от большинства ошибок при компиляции.
TypeScript поддерживает библиотеки JS и документацию по API
Это опционально типизированный язык сценариев.
TypeScript Код можно преобразовать в простой JavaКод сценария
Улучшенное структурирование кода и методы объектно-ориентированного программирования.
Обеспечивает лучшую поддержку инструментов времени разработки.
Он может расширить язык за пределы стандартных декораторов, async/await.

Кто использует TypeScript?

Вот некоторые наиболее распространенные применения TypeScript:

Команда angular использует TypeScript.
Установка NodeJS и NPM
TypeScript Установка:
Компилировать TypeScript код для Javascript
Выполнить код с помощью Nodejs
Выполнить Javascript в браузере
Компилировать TypeScript код для Javascript используя версию EcmaScript
Вы можете легко скомпилировать код, написанный на TypeScript в JavaСкрипт с использованием NodeJS.
Итак, чтобы работать с TypeScript вам необходимо сначала загрузить и установить NodeJS.

Резюме

TypeScript это надмножество JavaСценарий. TypeScript — это чистый объектно-ориентированный язык программирования, поддерживающий классы, интерфейсы и т. д.
TypeScript поддерживает все выпущенные функции Ecmascript, и разработчики могут использовать их при написании кода.
Переменные используются для хранения значений, и значением может быть строка, число, логическое значение или выражение.
In TypeScriptТип переменной определяется только в начале и в ходе выполнения должен поддерживать тот же тип; любые изменения в нем приведут к ошибке времени компиляции во время компиляции в JavaScript.
Массив в TypeScript — это тип данных, в котором вы можете хранить несколько значений.
Класс — это новая функция, добавленная начиная с ES6, поэтому ранее в JavaБыла предпринята попытка написать скрипт функциональности типа класса с использованием функции с функциональностью прототипа для повторного использования кода.
TypeScript поддерживает публичные, частные и защищенные модификаторы доступа к вашим методам и свойствам.
Одна из основных особенностей TypeScript это интерфейсы. Интерфейс — это набор определенных правил, которые должны быть реализованы использующей его сущностью.
Функции — это набор инструкций, выполняемых для выполнения задачи.
TypeScript Enum — это объект, который содержит коллекцию связанных значений, хранящихся вместе.

Что такое TypeScript?

Как скачать и установить TypeScript

Компилировать TypeScript код для Javascript

Выполнить Javascript использование Nodejs

Компилировать TypeScript код для Javascript используя версию EcmaScript

СТАТЬИ ПО ТЕМЕ

Переменные в TypeScript

Объявление переменных с помощью var

Объявление переменных с помощью let

Объявление переменных с помощью const

Вводит TypeScript

Номер регистрации

строка

Логический

Все

Void

TypeScript массив

Объявить и инициализировать массив

Различные способы доступа к элементам массива

. TypeScript для цикла

Использование цикла for-in

Использование цикла for-of

Использование цикла foreach

TypeScript Методы массива

свойство длины

Revдругой метод

Метод сортировки

Поп-метод

Shift метод

Метод выталкивания

метод concat

Пример свойства длины

Пример обратного метода

Пример метода сортировки

Пример метода pop

Пример метода смены

Пример метода push

Пример метода concat

Класс в TypeScript

Определение класса в TypeScript

Пример: рабочий пример класса.

Конструктор в TypeScript Класс

Методы внутри TypeScript Класс

Создание экземпляра класса в TypeScript

составление TypeScript Класс для JavaСценарий

Наследование класса

Синтаксис наследования классов:

Модификаторы доступа в TypeScript

Интерфейс в TypeScript

Синтаксис интерфейса в TypeScript

Использование интерфейса для функции в качестве возвращаемого типа

Интерфейс как параметр функции

Класс, реализующий интерфейс

Функции в TypeScript

Вызов функции: добавить

Необязательные параметры функции

Присвойте значения по умолчанию параметрам

Остальные параметры

Стрелочные функции

Каково использование функции стрелки?

TypeScript Перечисления

Как объявить Enum?

Объявить Enum с числовым значением

Как получить доступ к Enum?

Объявить Enum со строковым значением

В чем заключаются модули TypeScript?

Зачем нужны модули в TypeScript?

Использование экспорта и импорта

Синтаксис импорта и экспорта 1:

Синтаксис для импорта и экспорта 2:

Загрузчик модулей

Пример testCustomer.ts для testCustomer.js с использованием Requirejs

Пример использования Customer.ts в Customer.js с использованием Requirejs

Пространства имен в TypeScript

Синтаксис пространства имен

Доступ к пространству имен

Окружающие декларации в TypeScript

Окружающий синтаксис

Чтобы объявить модуль окружения:

Окружающий файл необходимо сохранить как: