Отказ от ответственности

]

Эй, прежде чем мы начнем, позвольте мне что-то уточнить: Хотя я много расскажу о своей пакете, ts-runtime-picker , это не рекламная статья. Я просто делюсь своим опытом и путешествием, которое я совершил, прежде чем построить его. (, но эй , если вам любопытно, вот ссылка на пакет?).

]

]

---

]

] , как TypeScript привел меня к новой идее (и пакете) ]

]

давайте немного перемотаем. Итак, я уже давно работаю с Typescript. Я бы не назвал себя Pro TypeScript, но я создал несколько крупных проектов и работал с ним в моей компании. Вы знаете, обычные - некоторые проекты «Hello World», некоторые немного более сложные и, конечно, справедливую долю поездок в Google, чтобы выяснить, что «что, черт возьми, означает эта ошибка?» или «Как мне снова выбрать поля из интерфейса?» (Вы понимаете.?)

Однажды я столкнулся с проблемой, работая с функциями облака Firebase. Я был на createUser конечной точки, написав свою логику проверки, обрезку данных и обрабатывая обычное безумие запроса CRUD. Все двигалось гладко, пока я не столкнулся с этим кусочком кода от предыдущего разработчика:
]

]

firebase.collection("users").add(request.data.user);

]

... и мой внутренний типовой Pro кричал. ?

]

я имею в виду, поступить , это был массивный красный флаг. Верно? Вставка нефильтрованных пользовательских данных непосредственно было рискованно - что, если в данных запроса отсутствовали какая -то проверка, и мы в конечном итоге вставили нежелательные поля в базу данных? Не велик.

]

я быстро снял код, но затем я замерз на секунду. ? Я смотрел на свой экран, думая: «Удерживаться, если я просто назначу request.data на тип пользовательского интерфейса, разве TypeScript не помешает мне делать что -то подобное? Разве это не решает проблему?» (Подсказка на мою идею, ожидая, когда появятся красные волнистые линии.)

, но подождите…? Это только проверка времени компиляции, верно? Это не существует во время выполнения. TypeScript - это маска для безопасности типа, но на самом деле она ничего не обеспечивает соблюдение при запуске кода. Это не действительно остановить дополнительные поля от вставки во время выполнения. ] Итак, я позвонил одному из моих товарищей по команде и спросил: «Эй, братан, если у нас есть объект с именем алфавита со всеми буквами в алфавите, и мы создаем только интерфейс только для этого, которые разрешают буквы« а »и« б », что происходит, когда мы отбрасываем объект алфавита в этот интерфейс?

]

// объект со всеми буквами алфавита const alphabets = { A: 'Apple', Б: «Банан», C: 'Cherry', D: 'Date', E: «Баклант», F: «Рис.», // ... вплоть до z }; // интерфейс, который только позволяет «» и «B» интерфейс только twoletters { A: String; b: строка; } // Создание алфавитов только в const filemedalphabets = алфавит как только twoletters; console.log (Filteredalphabets);
]

, не пропуская ни одного удара, мой товарищ по команде сказал: «Ха -ха, вы все равно получите все буквы алфавита, потому что TypeScript не может остановить это во время выполнения».

// Object with all alphabet letters
const alphabets = {
  a: 'Apple',
  b: 'Banana',
  c: 'Cherry',
  d: 'Date',
  e: 'Eggplant',
  f: 'Fig',
  // ... all the way to z
};

// Interface that only allows 'a' and 'b'
interface OnlyTwoLetters {
  a: string;
  b: string;
}

// Casting alphabets to OnlyTwoLetters
const filteredAlphabets = alphabets as OnlyTwoLetters;

console.log(filteredAlphabets);

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

в надежде

, этот типографист мог волшебным образом помешать мне делать ошибки во время выполнения. ?

] , но тогда он поразил меня: что, если TypeScript может привести это во время выполнения? Что если бы мы могли бы разыграть объект в конкретный интерфейс и иметь TypeScript автоматически выбросить

любые свойства, которые не были определены в интерфейсе?

] это

решит мою проблему.

] ] ]

] Рождение TS-Runtime-Picker

---

]

] Итак, с этим световым моментом я подумал: «Почему бы не сделать это реальностью?» Если бы я мог разыграть request.data в пользовательский интерфейс, TypeScript может помочь мне автоматически

удалить любые дополнительные свойства, делая объект безопасным для вставки в Firebase. ?

] и точно так же, идея для ts-runtime-picker

родилась. Цель была проста: создать пакет, который позволил бы пользователям TypeScript отфильтровать нежелательные свойства из объекта, на основе полей, определенных в определенном интерфейсе.

] лучшая часть? Это спасет меня от ручной проверки и фильтрации полей. Прошли дни: ]

]

const filteredData = { имя: requestData.name, Возраст: requestData.age, }; firebase.collection («Пользователи»). Добавить (FilteredData); // больше работы, меньше веселья.
]

]

const filteredData = {
  name: requestData.name,
  age: requestData.age,
};

firebase.collection("users").add(filteredData);  // More work, less fun.

, как это работает: Let TypeScript выполняет свою работу

---

]

] с ts-runtime-picker

, весь процесс автоматизирован. Вы можете поднять объект в интерфейс, и пакет обеспечит сохранение только свойств, определенных в интерфейсе. Вот как это работает в действии:

] ] перед: ручной проверкой

]

] пользователь интерфейса { Имя: String; Возраст: число; } const requestData = {name: 'John', возраст: 30, адрес: '123 Street'}; // Вручную проверьте и удалите нежелательные поля: const filemedData = { имя: requestData.name, Возраст: requestData.age, }; firebase.collection ('users'). Add (FilteredData); // не очень элегантно. ]

]

interface User {
  name: string;
  age: number;
}

const requestData = { name: 'John', age: 30, address: '123 Street' };

// Manually check and remove unwanted fields:
const filteredData = {
  name: requestData.name,
  age: requestData.age,
};

firebase.collection('users').add(filteredData);  // Not very elegant.

]

] import {pick} из 'ts-runtime-picker'; Интерфейс пользователь { Имя: String; Возраст: число; } const requestData = {name: 'John', возраст: 30, адрес: '123 Street'}; // автоматически фильтруют несуществующие свойства: const safedata = pick (requestData, пользователь); firebase.collection («пользователи»). Добавить (safedata); // намного чище! ]

лучшая часть? Этот код

import { pick } from 'ts-runtime-picker';

interface User {
  name: string;
  age: number;
}

const requestData = { name: 'John', age: 30, address: '123 Street' };

// Automatically filters out non-existent properties:
const safeData = pick(requestData, User);

firebase.collection('users').add(safeData);  // Much cleaner!

по умолчанию. Нет необходимости в ручных проверках или манипуляциях с объектами. TS-Runtime-Picker автоматически обрабатывает его для вас, отфильтровывая все поля, которые не существуют в пользовательском интерфейсе. Вы можете просто сосредоточиться на своей основной логике, не беспокоясь о случайной вставке поля. ?

] ] ]

сила лени (и как это может привести к инновациям)

---

]

] Итак, вам может быть интересно: «Это исходило из чистой лени?» И к этому я говорю: да, но также, нет.

?

, конечно, начальная искра этой идеи исходила от меня немного ленивой - я не хотел вручную фильтровать поля каждый раз, когда мне нужно было вставить данные. Но эй, иногда лень приводит к блеска! Желание сделать вещи проще

может быть движущей силой для инноваций.

Фактически, несмотря на первоначальную «лень», я потратил 8 часов

на создание пакета. Да, это верно. ?

] , но это так иногда. «Необходимость порождает изобретение», и это необходимо избежать утомительных повторяющихся проверок, привело к новому решению, которое в конечном итоге сделало мою жизнь (и, надеюсь, многие другие жизни) намного проще. ]

Итак, в то время как я могу

обвинить

лень за то, что он запустил мяч, это была необходимость решить проблему, которая породила

ts-runtime-picker . И вот как иногда застрять или ленивый не обязательно плохо - это место рождения чего -то нового и полезного! ] ] ]

Заключение

---

] ] и это история за ts-runtime-picker

. Путешествие от разочарования TypeScript до создания инструмента, который решает реальную проблему. Этот пакет - мой способ помочь пользователям TypeScript в полной мере пользуется безопасностью типа - не только во время разработки, но и во время выполнения.

] , если вы устали от вручную фильтровать поля или обеспокоены нежелательными данными, пробирающимися, дайте ts-runtime-picker

выстрел. Это на одну меньше, чтобы беспокоиться, и это делает работу с TypeScript немного умнее. ?

] ] ]