V2

Примитивные типы данных

// Типы данных
const isFetching: boolean = true;
const isLoading: boolean = false;
let int: number = 25;
const msg: string = 'hello';
  
const numberArray:number[] = [1, 2, 3];
// 2 равнозначные записи
const numberArray2:Array<number> = [1, 2, 3];
// Array<number> - дженерик типы, она указывает в треугольных скобках из чего состоит класс или объект
  
// тип данных Tuple - создаём массив из разных типов данных
const contact:[string, number] = ['user', 123456];
  
// тип данных Any - для переобределения типов
let variable:any = 42;
variable = [];
  
// тип данных для входящих переменных в функциях
function saveMyName(name: string):void {
    console.log(name);
}
saveMyName('uses abuser');
  
// тип данных Never - когда функция возвращает ошибку и никогда не заканчивает своё выполнение, либо что либо делает
function throwError(message: string): never {
    throw new Error(message);       
}
function infinite(): never {
    while(true){}
}
  
// Создание своих собственных типов через Type
type Login = string;
const login1: Login = 'user1';
  
type ID = string | number;
const id1: ID = 'sdasdasd';
const id2: ID = 546;
  
// типы данных null и undefined
type SomeType = string | null | undefined;

Интерфейсы

/*
Модификаторы
readonly - только для чтения
? - необязательный параметр
| - логическое или

*/


// Интерфейсы тип который описывает поля класса или объъекта. Они ни во что не компилируются

interface Rect {
    readonly id: string | number
    color?: string
    size: {
        width: number
        height: number
    }
}

const rect1:Rect = {
    id: 1234,
    size: {
        width: 20,
        height: 30
    }
}


// Можно указывать к какому типу относится объект

const rect3 = {} as Rect;
// альтернативная запись
// const rect4 = <Rect>{};

продолжение

// Наследование интерфейсов

interface RectWithArea extends Rect{
    getArea: () => number; // тип данных который долже быть возвращён
}

const rect5 : RectWithArea = {
    id: 12,
    size: {
        width: 12,
        height: 25
    },
    getArea(): number {
        return this.size.width * this.size.height;
    }
}

// Интерфейсы могут взаимодействовать с классами
// Большая буква I вначале говорит о том что это интерфейс
interface Iclock {
    time: Date
    setTime(date: Date): void
}

class Clock implements Iclock {
    time: Date = new Date();
    setTime(date: Date) {
        this.time = date;
    }
}
//========================
// Необходимо создать интерфейс для объекта у которого большое количество динамических ключей
// в квадратных скобках [] указываем тип ключа
// есть ключевое слово key для обозначения ключа
interface Styles {
    [key: string]: string
}

const css: Styles = {
    border: '1px solid red',
    marginTop: '2px',
    paddingTop: '2px',
}

https://youtu.be/nyIpDs2DJ_c?t=1938

https://www.typescriptlang.org/play#code/LAKFqA