[PART 1] Typescript for beginners. Translation of docks with code examples.

Всеx приветствую.
Сегодня мы будем учить typescript, сразу же появляется запрос "нахуя оно мне нужно?", а затем, что ts исправляет одну главную проблему js - это слишком слабая типизация. В ts тип переменной не может быть изменен в ходе выполнения программы. Это позволяет снизить большое количество ошибок и выявить многие из них еще на этапе компиляции.

Перед гайдом вы должны знать javascript на уровне ООП.

Начинаем​

Окружение:

Писать я буду в playground на офф. сайте тайпскрипта, чтоб добавить его в свой проект надо написать

npm i typescript

, и настроить конфиг (в следующих частях). Так-же тут в окне справа виден тот код, в который преобразуется ваш код на typescript


Типы данных:

Чтоб объявить тип переменной надо написать

let <название переменной>: <тип данных>

​

Boolean - базовый логический тип, может являться true или false:

let isTrue: boolean = true;

JavaScript

let isTrue: boolean = true;

Number - число, под этот тип подходят целые числа, числа с плавающей точкой, а так-же числа десятичного, шестнадцатиричного, бинарного и восьмеричного типа:

let decimal: number = 6;
let float: number = 4.3;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

JavaScript

let decimal: number = 6;

let float: number = 4.3;

let hex: number = 0xf00d;

let binary: number = 0b1010;

let octal: number = 0o744;

String - текстовые данные , поддерживает все виды кавычек (

"

,

'

,

`

)

let name: string = "string";
name = 'sosi';
let stroka: string = `${name}`
name = 4 //Error, другой тип

JavaScript

let name: string = "string";

name = 'sosi';

let stroka: string = `${name}`

name = 4 //Error, другой тип

Array - массив одинаковых данных:

let list: number[] = [1, 2, 3];
//or
let list: Array<number> = [1, 2, 3];

JavaScript

let list: number[] = [1, 2, 3];

//or

let list: Array<number> = [1, 2, 3];

Turple - если вы хотите чтоб в массиве были [строка, число], или [булеан, строка] используйте этот тип данных:

let x: [string, number]; // Объявление типа tuple
x = ['hello', 10]; // OK

//Элементы в массиве должны быть в таком-же порядке, как была создана переменная
x = [10, 'hello']; // Error

JavaScript

let x: [string, number]; // Объявление типа tuple

x = ['hello', 10]; // OK



//Элементы в массиве должны быть в таком-же порядке, как была создана переменная

x = [10, 'hello']; // Error

Enum - это фишка ts, подобное есть в C#, тип enum - это более удобный способ задания понятных имен набору численных значений. Первый элемент enum-а начинается с 0, каждые следующие элементы имеют индекс на 1 больше предыдущего:

enum Color {
Red, //0
Green, //1
Blue //2
};

console.log(Color[1]) //Green
console.log(Color['Green']) //1, ts сразу добавляет двойное связывание


//Хотите чтоб перечесление начиналось не с нуля? Легко
enum Animals {
Dog = 3,
Cat, //4
Govno //5
}

console.log(Animals[4]) //Cat
console.log(Animals['Govno']) //5

//Перешагнуть в середине списка тоже не сложно
enum Countries {
Russia, //0
USA = 4,
UK // 5
}

console.log(Countries[4]) //USA
console.log(Countries['Russia']) //0

JavaScript

enum Color {

    Red, //0

    Green, //1

    Blue //2

};



console.log(Color[1]) //Green

console.log(Color['Green']) //1, ts сразу добавляет двойное связывание





//Хотите чтоб перечесление начиналось не с нуля? Легко

enum Animals {

    Dog = 3,

    Cat, //4

    Govno //5

}



console.log(Animals[4]) //Cat

console.log(Animals['Govno']) //5



//Перешагнуть в середине списка тоже не сложно 

enum Countries {

    Russia, //0

    USA = 4,

    UK // 5

}



console.log(Countries[4]) //USA

console.log(Countries['Russia']) //0

Any - Нам может потребоваться описать тип переменных, который мы не знаем, когда пишем наше приложение. Эти значения могут быть получены из динамического контента, например от пользователя или от сторонней библиотеки. В этих случаях мы хотим отключить проверку типов и позволить значениям пройти проверку на этапе компиляции. Чтобы это сделать, нужно использовать тип any:

let notSure: any = 5;
notSure = "maybe a string instead";
notSure = true; // OK, ошибки никакой нет

JavaScript

let notSure: any = 5;

notSure = "maybe a string instead";

notSure = true; // OK, ошибки никакой нет

Тип any - это мощный способ работы с существующим Javascript, который позволяет вам постепенно включать все больше проверок типов на этапе компиляции. Вы можете ожидать, что Object будет играть такую же роль, какую и в других языках. Но переменные типа Object позволяют вам только присваивать им любое значение. Вы не можете вызывать у них необъявленные методы, даже те, которые могут существовать на этапе исполнения программы:

let notSure: any = 4;
notSure.ifItExists(); // ifItExists может существовать на этапе исполнения
notSure.toFixed(); // метод toFixed существует (но компилятор не проверяет это)

let prettySure: Object = 4;
prettySure.toFixed(); // Ошибка: Свойство 'toFixed' не существует у типа 'Object'.

JavaScript

let notSure: any = 4;

notSure.ifItExists(); // ifItExists может существовать на этапе исполнения

notSure.toFixed(); // метод toFixed существует (но компилятор не проверяет это)

 

let prettySure: Object = 4;

prettySure.toFixed(); // Ошибка: Свойство 'toFixed' не существует у типа 'Object'.

Так-же этот тип можно использовать при инициализации массива:

let arr: any[] = [1, true, "free"];

arr[1] = 100;
console.log(arr[1]) //true

JavaScript

let arr: any[] = [1, true, "free"];

 

arr[1] = 100;

console.log(arr[1]) //true

Void - чаще всего применяются к функции, которая ничто не возвращает:

function warnUser(): void {
alert("This is my warning message");
}

JavaScript

function warnUser(): void {

    alert("This is my warning message");

}

Приведение к типу (Type assertions) - Иногда вы попадаете в ситуацию, когда знаете больше о значении переменной, чем Typescript. Обычно это случается, когда вы знаете, что тип некоторой сущности может быть более специфичным, чем ее текущий.

Type assertions - это способ сказать компилятору "поверь мне, я знаю, что делаю". Type assertion это как приведение к типу в других языках, но оно не делает никаких специальных проверок или реструктуризаций данных. Приведение к типу не имеет никакого воздействия на этапе выполнения программы и используется только компилятором. Typescript предполагает, что программист сделает все необходимые проверки, которые потребуются.

Приведение к типу может быть сделано двумя способами. Первый это использование синтаксиса угловых скобок:

[CODE=javascript]let someValue: any = "this is a string";


let strLength: number = (<string>someValue).length;
</string>[/CODE]
И другой - использование ключевого слова as:
[CODE=javascript]let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;[/CODE]На сегодня всё, выпускать 2-ую часть?