Базовые типы в typeScript

Это будут числа, строки, булевые и так далее.

number

Для объявления переменной типа число используется простой синтаксис, где тип ставится после двоеточия. let a:number = 1;.

let a:number = 1; // В этой переменной может хораниться только числовой тип!

string

Аналогично и для строк.

let b:string = 'str';

Если же мы попытаемся записать туда число, то ts нам выдаст об этом ошибку.

let b:string = 1; // Type 'number' is not assignable to type 'string'

boolean

Все тоже самое.

let c:boolean = false;

Если не указывать тип данных

В таком случае ts на основе значения будет автоматически выставлять тип.

let c = false;
c = 'str'; // Type 'string' is not assignable to type 'boolean'.

any

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

let hi:any = 1; // number
hi = 'hi'; // теперь string. Ошибок нет.

null и undefined

null и undefined: соответствуют значениям null и undefined в javascript, но в ts их тип будет any

let c:undefined = undefined;
let b:null = null;
b = 1; // Ошибка

Если мы просто положим их в переменные, то автоматически они будут равны типу any

let c = undefined;
let b = null;
b = 1; // Ошибок нет. 

И так далее.

Массивы

Синтаксис такой же как и был, но добавляем две скобки const arr:string[]

string array

const arr:string[] = ['hi','br/o']; // массив только из строк 

number array

Тоже самое и для чисел.

const arr:number[] = [1,2,3,4,5];

И так далее.

Типизация функций

Объявим обычную функцию

function test (a) { // здесь у аргумента a вы увидите предупреждение о том, что аргумент типа any
return ''
}

Так происходит когда у нас нет явного типа, везде будет any как с null и undefined. Эту подсказку можно отключить в tsconfig.json. В строке "noImplicitAny": true нужно просто указать false. Но лучше не нужно)

Аргументы

Давайте теперь зададим аргументам тип, делается все так же через двоеточие.

function test (a:number,b:number) {
return ''
}

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

Тип возвращаемого функцией

Для это ставится двоеточие после аргументов и сам тип.

function test (a:number,b:number): number {
return 0;//  здесь была бы ошибка, мы возвращали пустую строку, поэтому ставим 0.
}

Теперь наша фукнция принимает два числа и возвращает тоже только число!

void

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

function some(a:number):void {
    return;
}

Знак | (union тип)

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

function test (a:number,b:number): number | string {
return ''; // вернули строку, но ошибок нет
}

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

let a:string | number = 2; // ошибок нет

Мы можем сделать например вот так.

let a:string[] | number = 's'; // тут будет ошибка. 
// у нас должен быть или массив строк или число
let b:string[] | number = ['s'];  // все ошибок нет

Объекты

Создадим функцию которая принимает в себя объект.

function countCoord (coord: {lat:number, long:number}) {
    
}

Тем самым мы объявили, что наша функция ожидает объект из двух свойств с числами. Так же мы можем указать, что какое-то из этих свойств не является обязательным.

Знак ?

Знак ? указывает, что свойство не обязательное.Ставится перед двоеточием.

function countCoord (coord: {lat:number, long?:number}) {
    
}

По сути этот знак, это короткая запись тип который указали | undefined.
Вот что мы увидим, если наведем на наш аргумент

Проверка на тип

Например у нас в функции аргумент union тип. Нам нужно применить к аргументу какой нибудь метод, в нашем случае для числа или строки.

function a (id: string | number) {   
    console.log(id.toUpperCase); // будет ошибка 
}

Сначала нам нужно явно узнать, что находится в id строка или все же число. Поэтому проверяем.

function a (id: string | number) { 
    if(typeof id === "string") {
        console.log(id.toUpperCase);
    }  
}

isArray

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

// мы просто проверяем аргумент методом isArray() на массив.
function sum(a:number[] | number) {
    if(Array.isArray(a)) {
        let num = a.reduce((sum:number,current:number) => {
            return sum + current; // если массив, то вернем сумму чисел
        })
        return num;
    } else {
        return a; // если одно число, то его и вернем.
    }
}