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

Что такое TypeScript?

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

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

Взаимосвязь односторонняя. Каждое допустимое JavaФайл скрипта уже действителен. TypeScriptОднако обратное неверно, поскольку аннотации типов существуют только в TypeScript и удаляются в процессе компиляции.

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

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

• Крупные и сложные проекты в JavaСкрипты сложно кодировать и поддерживать.
• TypeScript Это значительно помогает в организации кода и устраняет большинство ошибок во время компиляции, а не во время выполнения.
• TypeScript Поддерживает библиотеки JavaScript и документацию API.
• Это скриптовый язык с опциональной типизацией, поэтому типизация может внедряться постепенно.
• TypeScript код можно преобразовать в обычный JavaСкриптовый код для любого целевого браузера.
• Это обеспечивает лучшую структуру кода и применение методов объектно-ориентированного программирования.
• Это обеспечивает более эффективную поддержку инструментов разработки, включая автозавершение кода и безопасный рефакторинг.
• Это позволяет расширить функциональность языка за пределы стандарта, добавив такие возможности, как декораторы.

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

TypeScript История

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

• После двух лет внутреннего развития в Microsoft, TypeScript Версия 0.9 была выпущена в 2013 году.
• TypeScript Версия 1.0, с дополнительной поддержкой обобщенных типов, была выпущена на конференции Build 2014.
• В июле 2014 года новый TypeScript Появился компилятор, который оказался в пять раз быстрее предыдущей версии.
• В июле 2015 года была добавлена ​​поддержка модулей ES6, ключевого слова namespace, for…of и декораторов.
• В ноябре 2016 года были добавлены отображаемые типы, типы ключей и поиска, а также объекты rest и spread.
• 27 марта 2018 года были добавлены условные типы и улучшенная функция keyof с типами пересечения.
• TypeScript В версии 5.0, выпущенной в марте 2023 года, были модернизированы инструменты для декорирования и уменьшен размер упаковки.
• TypeScript Версия 6.0 вышла в марте 2026 года и стала финальным релизом, созданным на основе предыдущей версии. JavaКод скрипта.
• TypeScript В версии 7.0 компилятор переведён на нативную реализацию Go, что Microsoft сообщает, что скорость примерно в десять раз выше, чем у версии 6.0.

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

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

• Угловой: Фреймворк Angular написан на TypeScriptПредполагается, что и код приложения будет написан на этом языке.
• Проекты на React и Vue: Обе экосистемы официально представлены на борту корабля. TypeScript шаблоны, и большинство современных стартовых пакетов включают это по умолчанию.
• Бэкенды на Node.js: Серверные фреймворки, такие как NestJS, построены на основе TypeScript классы и декораторы.
• Инструменты редактора: Visual Studio Code сам по себе является большим TypeScript Именно благодаря кодовой базе обеспечивается такая полная языковая поддержка.
• Фронтенды крупных предприятий: Команды, работающие с большим количеством участников, используют его для выявления ошибок интеграции до развертывания.

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

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

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

Перейдите на официальный сайт Nodejs. https://nodejs.org/en/download/А также загрузите и установите Nodejs для вашей операционной системы. Подробные инструкции доступны в руководстве по адресу [ссылка на руководство]. Как скачать и установить Node.js.

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

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

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

D:\typeproject>npm --version
10.9.2

Подойдет любая текущая версия Node LTS. TypeScript Для запуска компилятора требуется лишь поддерживаемая версия Node.

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

Создайте каталог вашего проекта (typeproject\) и запустите команду npm init, как показано ниже:

npm init

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

Это создаст файл package.json, в котором будут храниться зависимости для нашего проекта.

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

npm -g install typescript

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

npm install --save-dev typescript

Создайте папку 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, как показано, или запустите через npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Приведенная выше команда создаст файл test.js, содержащий скомпилированный код. JavaСценарий.

Пример: test.js

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

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

Теперь мы запустим test.js в Nodejs следующим образом:

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

Значение, переданное в console.log, отображается при запуске test.js.

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

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

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

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

TypeScript Поддерживает все выпущенные функции ECMAScript, и разработчики могут использовать их при написании кода. Однако не все новые функции поддерживаются в старых браузерах, поэтому вам может потребоваться скомпилировать код под более старую версию 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:

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 аналогично JavaСкрипт и пользователи, знакомые с JavaСкрипту это будет очень легко. В современном коде, позволять и 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 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:

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:

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

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

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

Синтаксис:

let name = "Roy";

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

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

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

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

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

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

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

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

Синтаксис:

const name = "Roy";

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

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

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

Поэтому используйте const всякий раз, когда вы знаете, что присвоенное значение не будет переназначено. Обратите внимание, что const предотвращает переназначение привязки, а не изменение объекта, на который она указывает.

Вводит TypeScript

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

Ниже перечислены основные типы:

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

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

Синтаксис:

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

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

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

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

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

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

Пример: со всеми числовыми методами

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

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

• раскол() – этот метод разделит строку на массив.
• Шара() – этот метод вернет символ по указанному индексу.
• индекс() – этот метод даст позицию первого вхождения переданного ему значения.
• заменить() – этот метод принимает две строки. Он ищет первое значение в строке и, если оно присутствует, заменяет его вторым, возвращая новую строку.
• отделка() – этот метод удалит пробелы с обеих сторон строки.
• подстрока() – этот метод вернет часть строки в зависимости от начальной позиции и заданной длины.
• подстрока() – этот метод вернет часть строки в зависимости от начальной и конечной позиций. Символ в конечной позиции исключается.
• 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 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) принимает только логические значения true и false. В отличие от обычного значения (boolean). JavaВ скрипте числа 0 и 1 не принимаются, поскольку они имеют числовой тип.

Синтаксис:

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

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

Все

Синтаксис:

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

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

Void

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

Синтаксис:

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

TypeScript массив

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

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

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

Синтаксис:

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

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

Для получения элементов из массива значения берутся с индекса 0 и до длины массива минус один.

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

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

. TypeScript для цикла

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

Выход:

2016
2017
2018
2019

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

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

Выход:

2016
2017
2018
2019

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

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

Выход:

2016
2017
2018
2019

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

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

Выход:

2016
2017
2018
2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот базовый синтаксис класса. 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;
    }
}

В приведенном выше примере у вас есть класс под названием Students. Он имеет свойства age, name и roll_no.

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

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

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 для доступа к возрасту и this.roll_no для доступа к номеру броска кубика. Вы также можете использовать конструктор по умолчанию, как показано ниже:

constructor () {}

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

В классе Students определены методы, например, 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, как показано ниже. JavaСценарий.

Command: tsc  Students.ts

Выход из JavaНиже представлен код скрипта, выполняемый при компиляции:

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

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

Классы могут наследоваться с помощью продолжается ключевое слово в 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

У вас есть два класса: Person и Student. Класс 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);
        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

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

In TypeScript Необходимо вызвать метод `super` со всеми параметрами базового класса. Это должно быть первым оператором внутри конструктора, поскольку `super` выполняет конструктор расширенного класса. Любое свойство, объявленное производным классом, например `tmarks`, должно быть затем явно присвоено, иначе `getMarks` вернет `undefined`.

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

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

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

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

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

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, оба типа string.

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

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

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

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

В сигнатуре интерфейса Dimension указаны ширина и высота, и оба параметра являются обязательными. Если какое-либо свойство отсутствует или тип изменен, это приведет к ошибке компиляции кода. JavaСценарий.

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

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

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

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

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"}); // "300px-250px"

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

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

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(), который возвращает строку.

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

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

Функции в TypeScript

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

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

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

TypeScript функция:

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

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

Вызов функции: 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'

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

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

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

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

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

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

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

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 Обрабатывает обязательные параметры, необязательные параметры и параметры со значениями по умолчанию. Теперь рассмотрим параметры REST. Параметры REST — это группа необязательных параметров, определенных вместе с использованием трех параметров. точки (…) Затем следует имя параметра, который представляет собой массив.

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

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

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

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

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

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

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

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

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

Для чего нужна стрелочная функция?

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

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

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

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

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

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

Аналогичным образом можно использовать стрелочную функцию, как показано ниже:

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

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

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

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

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

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

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

Синтаксис:

enum NameofEnum {
   value1,
   value2,
    ..
}

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

enum Directions {
    North,
    South,
    East,
    West
}

В приведенном выше примере вы определили перечисление с именем Directions, содержащее значения North, South, East и West. Значения нумеруются, начиная с 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
}

Теперь север находится на отметке 5, следовательно, юг — на 6, восток — на 7, а запад — на 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

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

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

С JavaСкрипт не поддерживает перечисления, компилятор преобразует перечисление в самовызываемую функцию, как показано выше. Двойное присваивание создает обратную карту.ping от числа обратно к имени.

Объявите перечисление (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 undefined

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

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;

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

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

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

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

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

export  nameofthevariable or class name or interface name etc

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

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

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

test1.ts

export let age: number = 25;

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

test2.ts

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

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

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

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

Пример преобразования файла 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;
        }
    }
}

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

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

Ниже приведён код, где используется пространство имён. StudentSetup.

testStudentSetup.ts

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

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

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

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

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

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

node namespace.js

Выход:

The name is :H a r r y

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

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

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

Чтобы объявить окружающий модуль:

declare module moduleName {
   //code here
}

Файл с фоновой музыкой необходимо сохранить следующим образом:

filename.d.ts

Чтобы использовать файл имя файла.d.ts В вашем файле .ts вам нужно сослаться на него следующим образом:

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

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

Третья сторона JavaФайл скрипта: 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 и convertToStringBold.

Создание модуля окружения в TypeScript

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

Имя файла: 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): логическое значение – принимает строку и возвращает логическое значение. Передача числа или любого другого типа данных приводит к ошибке компиляции.
• convertToUpperCase(str: string): string – принимает строку и возвращает строку.
• convertToLowerCase(str: string): string – принимает строку и возвращает строку.
• ConvertToStringBold (строка: строка): строка – принимает строку и возвращает строку.

Учитывая, что JavaВ скриптовом файле используется имя объекта StringChecks, и в итоге мы ссылаемся на это же имя в файле .d.ts:

declare var StringChecks: TestString.StringsFunc;

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

Вот файл test.ts, который использует файл 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);

Скомпилируйте файл test.js с помощью команды tsc test.ts:

/// <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="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

Выход:

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

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

Часто задаваемые вопросы (FAQ)