부인 성명

이봐, 우리가 시작하기 전에, 내가 무언가를 명확히하겠습니다. ts-runtime-picker 에 대해 많은 이야기를 할 것입니다. 이것은 홍보 기사가 아닙니다. 나는 단지 내 경험과 그것을 만들기 전에 취한 여행을 나누고 있습니다. (하지만 Hey , 궁금하다면 여기에 패키지에 대한 링크가 있습니까?).

---

TypeScript가 새로운 아이디어 (및 패키지)

조금 되감기합시다. 그래서 저는 한동안 TypeScript로 작업 해 왔습니다. 나는 나 자신을 TypeScript Pro라고 부르지 않지만 몇 가지 큰 프로젝트를 제작하고 회사에서 작업했습니다. 평소 - 일부 "Hello World"프로젝트, 약간 더 복잡한 프로젝트, 그리고 물론 "이 오류가 무엇을 의미하는지"를 알아 내기 위해 Google 로의 여행의 상당한 부분을 알고 있습니다. 또는 "인터페이스에서 다시 필드를 선택하려면 어떻게해야합니까?" (당신은 요점을 얻습니다.?)

어느 날, 나는 Firebase Cloud 함수로 작업하는 동안 문제를 일으켰습니다. 나는

createUser endpoint에 있었고, 내 검증 로직을 작성하고, 데이터를 다듬고, 일반적인 CRUD 요청 광기를 처리했습니다. 이전 개발자 로부터이 코드를 만날 때까지 모든 것이 원활하게 움직였습니다.

firebase.collection ( "사용자"). add (request.data.user);

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

... 그리고 내 내부 타입 스크립트 프로가 비명을 지르고있었습니다. ?

내 말은,

어서 , 이것은 거대한 붉은 깃발이었다. 오른쪽? 필터링되지 않은 사용자 데이터를 직접 삽입하는 것은 위험했습니다. 요청 데이터에 약간의 유효성 검사가 누락되어 원치 않는 필드를 데이터베이스에 삽입 한 경우 어떻게해야합니까? 좋지 않습니다.

코드를 빠르게 제거했지만 잠시 얼어 붙었습니다. ? 화면 생각을 응시했습니다. "request.data를 사용자 인터페이스 유형에 할당하면 TypeScript가 이와 같은 일을하는 것을 막지 않습니까? 문제를 해결하지 않아야합니까?" (빨간 삐걱 거리는 선이 나타나기를 기다리는 내 IDE를 희망적인 눈에 띄는 신호.)

하지만 기다립니다… 컴파일 타임 체크 일뿐입니다. 런타임에는 존재하지 않습니다. TypeScript는 유형 안전을위한 마스크이지만 실제로 코드가 실행될 때는 아무것도 시행하지 않습니다.

실제로 추가 필드가 런타임에 삽입되는 것을 중지하지 않습니다. 그래서 나는 팀원 중 한 명에게 전화를 걸어“알파벳에 모든 글자가있는 알파벳이라는 객체가 있다면, 우리는 글자 'a'와 'b'만 허용하는 인터페이스 만 그 인터페이스에 알파벳 객체를 캐스팅 할 때 어떻게됩니까? "

// 모든 알파벳 문자가있는 물체 const alphabets = { A : 'Apple', B : '바나나', C : '체리', D : '날짜', E : '가지', F : 'fig', // ... z까지 끝까지 }; // 'a'및 'b'만 허용하는 인터페이스 인터페이스 전용 TWOLETTERS { A : 문자열; B : 문자열; } // 알파벳을 전용으로 만 캐스팅합니다 const filternalphabets = 알파벳 전용으로 전용; Console.log (Filternalphabets);

비트를 놓치지 않으면 서 팀원은 다음과 같이 말했습니다 :“하하, 당신은 여전히 ​​런타임에서이를 멈출 수 없기 때문에 모든 알파벳 문자를 얻을 수 있습니다.”

// 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가 이것을 시행 할 수 있다면 어떻게됩니까? 특정 인터페이스에 객체를 시전하고 TypeScript 가 인터페이스에 정의되지 않은 속성을 자동으로 제거 할 수 있다면 어떨까요?

는 내 문제를 해결할 것입니다.

TS-Runtime-Picker의 탄생

---

그래서,이 전구 순간으로, 나는 다음과 같이 생각했습니다.“왜 이것을 현실로 만들지 않습니까?” request.data를 사용자 인터페이스에 캐스트 할 수 있다면 TypeScript가 자동으로 추가 속성을 제거하여 객체를 FireBase에 안전하게 삽입 할 수 있습니다. ?

그리고 그와 마찬가지로 ts-runtime-picker 에 대한 아이디어가 탄생했습니다. 목표는 간단했습니다. TypeScript 사용자가 특정 인터페이스에 정의 된 필드를 기반으로 객체에서 원치 않는 속성을 필터링 할 수있는 패키지를 만듭니다.

가장 중요한 부분은? 수동 유효성 검사 및 필드 필터링에서 저를 절약 할 수 있습니다.

const filterddata = { 이름 : requestData.Name, 나이 : requestData.age, }; firebase.collection ( "사용자"). Add (FilterdData); // 더 많은 작업, 덜 재미.

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

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

---

ts-runtime-picker 를 사용하여 전체 프로세스가 자동화됩니다. 객체를 인터페이스에 시전 할 수 있으며 패키지는 인터페이스에 정의 된 속성 만 유지되도록합니다. 작동 방식은 다음과 같습니다.

이전 : 수동 유효성 검사

인터페이스 사용자 { 이름 : 문자열; 나이 : 숫자; } const requestData = {이름 : 'John', Age : 30, 주소 : '123 Street'}; // 원치 않는 필드를 수동으로 확인하고 제거합니다. const filterddata = { 이름 : requestData.Name, 나이 : requestData.age, }; firebase.collection ( '사용자'). Add (FilterdData); // 그다지 우아하지 않습니다.

후 : ts-runtime-picker

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.

'ts-runtime-picker'에서 {pick} 가져 오기; 인터페이스 사용자 { 이름 : 문자열; 나이 : 숫자; } const requestData = {이름 : 'John', Age : 30, 주소 : '123 Street'}; // 존재하지 않는 속성을 자동으로 걸러냅니다. const safedata = pick (requestData, User); firebase.collection ( '사용자'). Add (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!

게으름의 힘 (그리고 그것이 혁신으로 이어질 수있는 방법)

---

그래서, 당신은 궁금 할 것입니다 : "이것은 끔찍한 게으름에서 나왔습니까?" 그리고 나는 다음과 같이 말합니다 : 예, 또한 아니요, 아니요 ?

물론, 아이디어의 초기 불꽃은 조금 게으르다. 데이터를 삽입해야 할 때마다 필터를 수동으로 필터링하고 싶지 않았다. 그러나 때로는 게으름이 빛을 발합니다! 를 더 쉽게 만들려는 욕구 는 혁신의 원동력이 될 수 있습니다.

실제로, 초기 "게으름"에도 불구하고, 나는 패키지를 만드는 8 시간 8 시간을 보냈다. 예, 맞습니다. ?

하지만 때때로 그 방법입니다. "필요성은 발명을 낳아야한다.

그래서, 내가 볼을 굴리는 것에 대한 를 비난 할 수는 있지만 ts-runtime-picker

를 일으킨 문제를 해결해야했습니다. 그리고 때때로,

가 갇히거나 게으른

가 반드시 나쁜 것은 아닙니다. 새롭고 유용한 것의 발상지입니다!

결론 그리고 그것이

ts-runtime-picker

---

패키지의 비하인드 스토리입니다. 타입 스크립트 좌절에서 실제 문제를 해결하는 도구 만들기까지의 여정. 이 패키지는 TypeScript 사용자가 개발 중뿐만 아니라 런타임에서도 유형 안전을 최대한 활용하는 데 도움이되는 방법입니다.

수동으로 필드를 필터링하거나 원치 않는 데이터가 몰래 들어가는 것에 지친 경우 ts-runtime-picker

샷을 제공하십시오. 걱정할 필요가 없으며 TypeScript 작업을 조금 더 똑똑하게 만듭니다. ?