Эта статья — вольный перевод свежего стрима ThePrimeTimeagen (бывший разработчик Netflix, харизматичный чувак с усами)

"I'm just the normy, but everyone is so bad at their crap, so I just rise to the top"

Цитата:
«Я просто обычный разработчик, но все вокруг настолько плохо справляются со своей работой, что на их фоне я кажусь топовым»

Я понимаю что вся эта информация в текстовом виде не очень то похожа на стендап, поэтому очень советую посмотреть оригинальный стрим. Многие примеры я видела впервые и мне было реально смешно :)

WTF №1 — Проверка лишних свойств

У нас есть тип, который имеет свойства firstName и age, а также функция, которая принимает объект типа Person и просто печатает его:

type Person = { firstName: string, age: number };

function logPerson(person: Person) {
	console.log(person);
}

Чтобы вызвать функцию, мы просто сделаем вот так:

logPerson({ firstName: 'trash', age: 21 });

И это — совершенно ожидаемое поведение. Если мы передадим лишнее поле, то получим ошибку:

logPerson({ firstName: 'trash', age: 21, extraProp: 21 }); // ошибка

Object literal may only specify known properties, and 'extraProp' does not exist in type 'Person'.ts(2353)

Но есть одна интересная деталь: если мы вынесем объект в переменную и передадим её в функцию, ошибки не возникает:

const person = {
	firstName: 'trash',
	age: 21,
	extraProp: 21
};

logPerson(person); // нет ошибки

Мы можем отловить ошибку, если укажем тип объекта явно:

const person: Person = {
	firstName: 'trash',
	age: 21,
	extraProp: 21 // Object literal may only specify known properties, and 'extraProp' does not exist in type 'Person'.ts(2353)
};

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

const person: Person = {
	firstName: 'trash',
	age: 21,
	...{ extraProp: 21 } // ошибки нет
};

WTF №2 — Enums

У нас есть Enum с цветами и функция, которая принимает конкретное значение из этого Enum. Если мы передадим Colors.Green, всё работает. Но если передать строку, совпадающую по значению, то ничего не получится

enum Colors {
	Green = 'green',
	Orange = 'orange',
	Red = 'red',
}

function isTheBestColor(color: Colors) {
	// some code
}

isTheBestColor(Colors.Green); // работает ❤️

isTheBestColor('green'); // не работает ?

Но...

Если использовать Enum с числовыми значениями:

enum Status {
	Pending = 0,
	Declined = 1,
	Approved = 2,
}

function validateStatus(status: Status) {
	// some code
}

// работает ❤️
validateStatus(Status.Declined);

// работает!? ?‍?
validateStatus(1);

Некоторые разработчики предпочитают такую запись, чтобы обойти Enum:

const Foo = {
  FAILED: 'failed',
  SUCCESS: 'success',
} as const;

type Bar = typeof Foo;
type BarKeys = keyof Bar;
type BarValues = Bar[BarKeys];

const x = (f: BarKeys) => f;
x('FAILED');

const y = (f: BarValues) => f;
y('failed');

Такая запись позволяет при вызове соответствующей функции сразу выбирать из предзаполненных вариантов и видеть конкретное значение в реальном времени при логировании

WTF №3 — .filter()

Существует популярный способ отфильтровать все falsy-значения с помощью filter

const arr = [1, undefined, 3].filter(Boolean);

console.log(arr); // [1, 3]

В этом примере мы ожидаем, что тип arr будет number[], но на самом деле получаем (number | undefined)[], потому что TypeScript не может точнее определить тип возвращаемого значения. Это неудобно: ты точно знаешь, что в рантайме undefined не будет, но в типах обязан это учитывать

WTF №4 — {} vs object vs Object

Существует несколько способов описать объект.

Когда мы хотим создать пустой объект, обычно пишем let foo = {}, но забавно, что мы можем присвоить этой переменной любое примитивное значение — кроме null и undefined. Если же задать тип явно как object, он работает ожидаемо — не принимает примитивы

let foo: object;

foo = { hello: 0 };   ✅  
foo = [];             ✅  
foo = false;          ❌  
foo = null;           ❌  
foo = undefined;      ❌  
foo = 42;             ❌  
foo = 'bar';          ❌  

А теперь let foo: {}

foo = { hello: 0 };   ✅  
foo = [];             ✅  
foo = false;          ✅  
foo = null;           ❌  
foo = undefined;      ❌  
foo = 42;             ✅  
foo = 'bar';          ✅  

WTF №5 — Бонусный

У нас есть массив строк и функция, которая принимает массив строк или чисел. Ошибки нет, хотя после изменения тип массива остаётся прежним. WTF?

const foo: string[] = ["1", "2"];

function bar(thing: (number | string)[]) {
    thing.push(3);
}

bar(foo);

console.log(foo); // ['1', '2', 3]