Вам трудно адаптировать JavaScript после изучения другого языка программирования? Вот как TypeScript может помочь вам перейти на другой язык
JavaScript – это уникальный язык программирования. Он создан для веб-разработки и имеет правила, отличные от правил других языков программирования
Одним из наиболее заметных отличий является то, что JavaScript динамически типизирован, что означает, что вам не нужно объявлять типы при создании переменных. Такие языки, как C, C# и Java, заставляют вас объявлять типы переменных. Такие переменные называются статически типизированными
Языки, использующие статически типизированные переменные, обеспечивают большую стабильность и уменьшают количество ошибок в коде.TypeScript преодолевает разрыв между JavaScript и традиционными правилами программирования
Типы переменных
Тип type переменной – это информация, которую вы планируете хранить в переменной
Вот, например, переменная Java:
int myNumber = 10;
Эта переменная является int , что является сокращением от integer. Это дает вам знать, что переменная myNumber планирует хранить целое число. Если вы попытаетесь сохранить в переменной другое значение, например, строку символов, программа не будет выполняться
Вот еще несколько типов переменных, которые вы могли использовать:
- int—правильные числа.
- float — десятичные числа.
- char–одиночные символы, такие как ‘x’ или ‘a’.
- string — серия символов, таких как ‘Hello’ и ‘This is a string’.
- булевы – истинные или ложные значения.
JavaScript не требует, чтобы вы объявляли типы переменных. Хотя это дает вам больше свободы, это может привести к некоторым довольно плохим привычкам. Именно здесь TypeScript облегчает вашу работу
Что такое TypeScript?
TypeScript – это версия JavaScript, разработанная компанией Microsoft, которая вводит в код типы переменных. Это не совершенно новый язык; считайте его оберткой над обычным JavaScript. Его синтаксис очень похож на синтаксис JavaScript, поэтому с ним легко начать работу
Чтобы показать, насколько они похожи, вот строка кода на JavaScript и TypeScript
JavaScript:
let myNumber = 10;
TypeScript:
let myNumber: number = 10;
Когда вы объявляете переменную в TypeScript, вы одновременно объявляете и тип. Это небольшое изменение, которое оказывает большое влияние
TypeScript – это компилируемый язык, в отличие от JavaScript, который запускается в браузере. Компилируемые языки могут быть быстрее и приводить к более эффективным программам
Никакого дополнительного программного обеспечения загружать не нужно; файлы TypeScript компилируются в обычные файлы JavaScript, которые можно использовать в любом веб-приложении. Файлы TypeScript сохраняются в виде файлов .TS
Как установить TypeScript
Легко начать работу с TypeScript:
- Через менеджер пакетов Node.js (NPM).
- Установка плагинов TypeScript в Visual Studio.
Установка с помощью NPM проста с помощью командной строки:
> npm install -g typescript
Если вы используете Visual Studio 2017 или Visual Studio 2015 Update 3, у вас уже установлен TypeScript. Если он не установлен, вы можете загрузить его через веб-сайт TypeScript
Преимущества TypeScript
JavaScript уже довольно хорош, какие преимущества использования TypeScript вместо него? Существует множество причин использовать TypeScript для веб-разработки
Типизированные переменные
TypeScript позволяет назначать типы переменным в коде. Вы видели пример в начале, но как это поможет вам?
Присвоение типов переменным может сделать вас лучшим кодером. Это заставляет вас продумывать каждую переменную, которую вы пишете при планировании приложения. Это предотвращает ошибки в коде, делает ваше приложение легко читаемым и позволяет легко тестировать код
TypeScript предоставляет вам множество возможностей для создания переменных
Числа.
let myNumber: number = 10;
Строки
let myString: string = 'TypeScript';
Булевы переменные
let myBoolean: boolean = true;
Массивы
Когда вы определяете массив, вы используете тип значения, содержащегося в массиве, за которым следуют квадратные скобки
let myArray: number = 1,2,3 ;
Любой
Этот тип переменной используется, когда вы хотите, чтобы TypeScript позволял присваивать переменной любой тип. Это дает вам больше гибкости, когда вы не уверены в том, во что может превратиться ваша переменная
Вы можете свободно изменять значение этих переменных
let anyType: any = 10;
anyType = 'Hello'; //No error
anyType = true; //Still no error
Пустота
Типы Void используются, когда вы хотите, чтобы переменной не присваивался никакой тип. Это удобно для функций, которые не возвращают никаких значений
function randomMessage(): void { Console.log('This is just a message'); }
Null
Просто выдает нулевое значение
let myNull: null = null; //This is all you can do
Undefined
Так же просто, это дает вам неопределенное значение
let myUndefined: undefined = undefined; //This is all you can do
Добавленные функции
TypeScript предоставляет вам некоторые дополнительные возможности и типы, которые позволяют вам делать больше с JavaScript
Tuple
Кортеж – это специальный массив, который вы объявляете с фиксированным количеством элементов. Эти элементы могут иметь различные типы, но кортеж должен придерживаться типов в том порядке, в котором вы их объявили
let myTuple: number,string ;
myTuple = 45, 'Hello' ;
myTuple = 'Hello', 45 ; // Error
Типы Enum
Типы Enum – это специальный тип, который присваивает серии числовые значения
enum Color { Red, Green, Blue }
В этом перечислении красному цвету присвоено значение 0, зеленому – 1, а синему – 2. Перечисления имеют нулевую индексацию, как и массивы в JavaScript
Классы объектов
Классы объектов, интерфейсы и наследование поддерживаются в TypeScript
В JavaScript нет настоящей системы классов для объектно-ориентированного программирования.JavaScript использует систему прототипов, которая очень похожа, но не совсем то же самое. Если вы знакомы с объектно-ориентированным программированием, одно это может заставить вас отказаться от TypeScript
Вы можете создать класс с конструкторами
class Student {
Name: string; constructor(first,middle,last) {
this.Name = first + ' ' + middle + ' ' + last; }
}
let newStudent = new Student('John', 'Leonard','Smith');
Вы можете создать интерфейс и использовать его в качестве типа
interface Person {
personName: string;
function sayHello(person: Person) {
return 'Hello ' + person.personName;
}
Функции
TypeScript также объявляет типы в функциях
function addNum(num1: number, num2: number) {
return num1 + num2;
}
Вы также можете использовать параметры по умолчанию в своих функциях. Они полезны, когда у вас есть значение, которое вы хотите установить в параметрах на случай, если ваша функция будет запущена без аргумента
function addNums(num1: number, num2 = 15) {
return num1 + num2;
}
addNums(5,5); // This will return 10
addNums(5); // This will return 20. There was no second value, so the default parameter of 15 is used
Компилятор TypeScript помогает тестировать код
JavaScript, работающий в веб-браузере, хорош тем, что он прост.TypeScript использует компилятор для преобразования кода в файл JavaScript, но разве это не лишняя работа?
Вовсе нет! Компилятор TypeScript может помочь вам протестировать ваш код в процессе написания. Когда вы запускаете файл TypeScript в вашей IDE, он будет отмечать ошибки по ходу работы
Сокращение этих ошибок в вашей IDE приведет к очистке вашего кода. К моменту компиляции в обычный JavaScript ваш код уже проверен на точность типов. Компилятор TypeScript можно настроить в соответствии с вашими предпочтениями в программировании
Открытый исходный код
TypeScript является открытым исходным кодом и создан компанией Microsoft. У программного обеспечения с открытым исходным кодом есть множество преимуществ. Сообщество разработчиков постоянно работает над устранением любых ошибок или добавлением новых функций
TypeScript хорошо работает с Visual Studio и Visual Studio Code.Visual Studio Code является лучшим выбором для работы с JavaScript, поэтому вы получите преимущество, если решите использовать его
Работает с другими веб-фреймворками
Если вы разрабатываете веб-приложение, фреймворки призваны сэкономить ваше время. Поскольку JavaScript является королем сценариев веб-разработки, существует множество фреймворков, которые используются. Многие из этих фреймворков очень популярны
TypeScript не удерживает вас от использования этих очень полезных веб-фреймворков. Он совместим с React, Angular, Express, Babel, Vue.js, ASP.NET Core и React Native
Веб-разработка и JavaScript
TypeScript был создан для того, чтобы облегчить разработчикам JavaScript разработку веб-сайтов и приложений. Очень важно, чтобы у вас были основы JavaScript и его работы, прежде чем погружаться в TypeScript
Хотите испытание? Скачайте TypeScript и попробуйте выполнить обычный проект, например, создать слайд-шоу на JavaScript. Развивайте свои знания, и очень скоро вы станете экспертом в области веб-разработки!
Комментировать