TypeScript — компилируемый язык со статической типизацией.

После названия переменной следует поставить : и указать её тип.

В JavaScript типы делятся на примитивы (string, number, boolean, symbol, null, undefined и bigint) и объекты.

const Name: string = 'Yura';
const Year: number = 33;
let floatNumber: number = 3.14;
let isTrue: boolean = true;
let bigInteger: biging = 123n;
const key: key = Symbol("foo");
let undefinedVar: undefined = undefined;
let nullVar: null = null;

Теперь если присвоить Name число или Year строку. IDE выдаст такую ошибку: Type ‘number’ is not assignable to type ‘string’.

Соответственно, ошибки при передаче name в print не возникнет. TypeScript проверит тип и сообщит нам, что поможет от провала ещё до сборки приложения!

Большинство существующих IDE поддерживают синтаксис языка, так что TypeScript оперативно сообщает об ошибках или выдаёт подсказку в процессе компиляции.

Объекты

const audi: object = {
  country: "Germany",
  foundingDate: 1909
};

Но если определить страну основания Audo, получим ошибку на этапе компиляции: Property ‘country’ does not exist on type ‘object’.

В этом случае лучше указать тип не всего объекта, а отдельно всех его полей:

const audi: { country: string; foundingDate: number } = {
  country: "Germany",
  foundingDate: 1909
};

Его ещё называют анонимным типом. Внутри него в фигурных скобках указывают типизацию полей объекта. Так поле country должно быть типа string, а поле foundingDate тип number. Теперь при обращении к country или к foundingDate ошибка не возникнет. А ещё не удастся присвоить полю другой тип.

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

Enum — перечисление на языке TypeScript

enum Family {
  husban = 'Yura',
  wife = 'Anna',
  daughter = 'Alena',
}

enum Gender {
  male,
  female
}
//где male = 1, а female = 0

Массивы

При объявления массива нужно указать тип его элементов и добавить [].

const cars: string[] = ['Audi', 'BMW', 'Volkswagen', 'Toyota', 'Nissan', 'Mazda'];
const numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

Tuple

Кортеж, или tuple, — массив определённой длины.

const seasons: [string, string, string, string] = [
    "winter",
    "spring",
    "summer",
    "autumn"
  ];
const vaz: [string, number] = ['Russia', 1966];

Any

Тип, который указывает, что переменная может быть абсолютно любым типом. Иначе говоря, с типом any мы откатываемся назад к динамической типизации JavaSсript.

let num: any = 12;
num = 'а вот уже я строка';
num = [1, 3, 4];

Тип any можно использовать лишь в случае, когда нужно мигрировать большой проект с JavaScript на TypeScript. Сразу бывает сложно указать все необходимые типы, особенно в больших проектах, например интернет-магазинах.

Unknown

В версии TypeScript 3.0 появился новый тип, который считается безопасным аналогом any — unknown. Их поведение похоже, типу unknown может быть присвоен любой другой тип.

let unknownType: unknown = 1;
unknownType = 'string';

Но в отличие от any сам он не может быть присвоен.

let numberOne: string = unknownType;
// Type 'unknown' is not assignable to type 'string' 

Ещё одно отличие — невозможность обратиться к полям или методам переменных, если их тип неизвестен. Создадим две функции и попробуем обратиться к абстрактному методу raveOn.

const doSmth = (arg: any) => {
  arg.raveOn();
};

const doSmthSafe = (arg: unknown) => {
  arg.raveOn();  
} 

При написании doSmthSafe мы получим ошибку уже на этапе компиляции (parameter) arg: unknown Object is of type ‘unknown’.ts(2571). А вот с doSmth всё будет в порядке, пока мы не вызовем эту функцию. Например, с числом doSmth(999);. В этом случае ошибка отобразится только в момент выполнения, ведь у чисел нет функции raveOn.

Void

Void тип в TypeScript, который указывает на отсутствие любого типа.

Этот тип используют, чтобы показать, что функция ничего не возвращает.

const printHello = (text: string): void => {
    console.log(text);
  }

printHello("Hello");

Literal Types

С их помощью можно задать конкретную строку как тип.

let color: 'blue' = 'blue';
color = 'red';
//Type '"red"' is not assignable to type '"blue"'.ts(2322)

Для указания нескольких значений типа, их надо записать через |.

let display: 'flex' | 'grid' | 'block' | 'inline-block' | 'none' | 'table'= 'block';
console.log('display =', display);
//block
display = 'flex';
console.log('display =', display);
//flex

Объектно-ориентированное программирование (ООП) в TypeScript

Кроме подсказок и статической типизации, TypeScript предоставляет расширенное (по сравнению в JavaScript) ООП.

В TypeScript существуют модификаторы доступа public, private, protected. С их помощью можно инкапсулировать поля и методы классов.

class ProgramPlayer {
  model: string = "Касета";
  private setting: string = "";

  constructor() {
    console.log("Конструктор плеера");
  }

  protected soundTrack() {
    console.log("Выбрать другой трек");
  }

  public play() {
    console.log("Играть");
  }

  pause() {
    console.log("Пауза");
  }
}

const player = new ProgramPlayer();

player.play();
//Играть
player.pause();
//Пауза

• Модификатор public. С помощью player мы получаем доступ ко всем публичным членам класса. Можно вызвать player.play() и даже player.pause(), хоть тут и не указано public. По умолчанию члены класса имеют модификатор public. Ещё в классе Player публичными являются constructor и поле model. В JavaScript все члены классов — публичные.
• Модификатор private. А вот к settings можно обратиться только внутри класса Player.
• Модификатор protected тоже ограничивает доступ, но не так радикально, как private. Если мы захотим унаследовать новый класс от класса Player, то в этом классе будет доступен soundTrack. А вот вызвать метод через экземпляр класса player.soundCheck() уже не получится.

const division = (x: number, y: number): number => {
  return x / y;
} 

const answer = division
(6, 2);
//3

Функция division принимает два числа и возвращает их частное. Поэтому два её аргумента и результат вычисления имеют тип number. Тип переменной задаётся с помощью :. Получается, что в функцию division можно передать только числа и в ответе получить число. Если передать в функцию другой тип, на этапе компиляции возникнет ошибка: Argument of type ‘string’ is not assignable to parameter of type ‘number’.

Примеры:

enum Age {
  Adult = 18,
}

const funcYear = (member: number) => {
  if (member >= Age.Adult) {
    console.log("Совершеннолетний");
  } else {
    console.log("Несовершеннолетний");
  }
};

enum numbers {
  one = 3,
  two = 2
}

const multiplication = (x: number, y: number):number => {
  return x*y
}

console.log(multiplication(numbers.one, numbers.two));
//6

  function SQRT (x: number, y: number): number {
    return x+y;
  }

  console.log(SQRT(4, 8));

  function StringText (s: string): string {
    return s.trim().toUpperCase();
  }

  console.log(StringText("hello"));

  interface IPosition {
    x: number | undefined,
    y: number | undefined
  }

  interface IMyPisition extends IPosition {
    default: string
  }

  // function position(): IPosition;
  // function position(a: number): IMyPisition;
  // function position(a: number, b: number): IPosition;

  function position(a?: number, b?:number) {
    if(!a && !b) {
      return {x: undefined, y: undefined}
    }
    if (a && !b) {
      return {x: a, y: undefined}
    }
    return {x: a, y: b}
  }

  console.log("empty", position());
//{x: undefined, y: undefined}
  console.log("1 arg", position(1));
//{x: 1, y: undefined}
  console.log("2 arg", position(2, 4));
//{x: 2, y: 4}

Полезные ссылки:

https://bobbyhadz.com/blog/react-type-jsx-element-not-assignable-type-functioncomponent

interface ID {
  calories: number | undefined,
  carbohydrates: number | undefined,
}

interface IA {
  data: ID,
  indexIngredient: string,
}

let y:IA = {
  data: {
    calories: 4,
    carbohydrates: 5,
  },
  indexIngredient: "534"
}

let t: Array<IA> = [
  {
    data: {
      calories: 12,
      carbohydrates: 3
    },
    indexIngredient: "4"
  },
  {
    data: {
      calories: 1234324,
      carbohydrates: 3324324
    },
    indexIngredient: "433333"
  }
]

console.log('t=', t[0].data.calories);
//12

let igredientsDetails: Array<IData & {id?: string}> = [];

---

Filed under: TypeScript - @ 04.01.2023 22:30