"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Beyond Type Segurança: Análise detalhada do seletor de tempo de execução do TypeScript

Beyond Type Segurança: Análise detalhada do seletor de tempo de execução do TypeScript

Postado em 2025-03-12
Navegar:514

Beyond Type Safety: making TypeScript smarter by Building a Runtime Picker

Isenção de responsabilidade

ei, antes de começarmos, deixe-me esclarecer algo: enquanto eu vou falar muito sobre o meu pacote, ts-runtime-picker , este não é um artigo promocional. Estou apenas compartilhando minha experiência e a jornada que fiz antes de construí -la. ( Mas hey , se você está curioso, aqui está o link para o pacote?).


Como o TypeScript me levou a uma nova ideia (e um pacote)

Vamos retroceder um pouco. Então, estou trabalhando com o TypeScript há um tempo. Eu não me chamaria de Typescript Pro, mas construí alguns grandes projetos e trabalhei com ele na minha empresa. Você sabe, os projetos usuais - alguns “Hello World”, alguns um pouco mais complexos e, claro, uma boa parte de viagens ao Google para descobrir “O que diabos esse erro significa?” Ou "Como escolho os campos de uma interface novamente?" (Você entendeu.?)

Um dia, encontrei um problema ao trabalhar com funções da Firebase Cloud. Eu estava no createUser endpoint, escrevendo minha lógica de validação, aparando dados e lidando com a loucura usual do Crud Secutne. Tudo estava se movendo suavemente até que eu encontrei este pedaço de código de um desenvolvedor anterior:

;
firebase.collection("users").add(request.data.user);
... e meu inten typyscript Pro estava gritando. ?

quero dizer,

vamos em , este foi uma enorme bandeira vermelha. Certo? Inserir dados de usuário não filtrados diretamente como esse eram arriscados - o que se os dados da solicitação estavam faltando alguma validação e acabamos inserindo campos indesejados no banco de dados? Não é ótimo.

removi rapidamente o código, mas depois congelei por um segundo. ? Eu olhei para a minha tela pensando: "Espere, se eu apenas atribuir a solicitação.data ao tipo de interface do usuário, o TypeScript não me impediria de fazer algo assim? Isso não deveria corrigir o problema?" (Cue um olhar esperançoso para o meu IDE, esperando as linhas vermelhas onduladas aparecerem.)

Mas espere…? ‍♂️ TypeScript é

não Magic. É apenas uma verificação de tempo de compilação, certo? Não existe no tempo de execução. O TypeScript é uma máscara para a segurança do tipo, mas na verdade não aplica nada quando o código está em execução. Não realmente impede que os campos extras sejam inseridos no tempo de execução.

Então, liguei para um dos meus colegas de equipe e perguntei: “Ei, mano, se temos um objeto chamado alfabetos com todas as letras do alfabeto, e criamos uma interface que apenas os coletores que apenas permitem as letras 'a' e 'b', o que acontece quando lançamos os alfabets a serem interface?”


// objeto com todas as letras do alfabeto const alfabets = { A: 'Apple', B: 'banana', C: 'Cherry', D: 'Date', E: 'berinjela', f: 'fig', // ... todo o caminho para z }; // interface que apenas permite 'a' e 'b' interface apenas twoletters { a: string; b: string; } // Lançando alfabetos para apenas twoletters const filterletedalphabets = alfabets como apenas twoletters; console.log (FilleredAlphabets);
// 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);

Droga. Eu sabia. Eu estava sob o efeito da esperança -

esperando

que o TypeScript poderia magicamente me impedir de cometer erros no tempo de execução. ?

Mas então, ele me atingiu: e se o TypeScript pudesse fazer cumprir isso em tempo de execução? E se pudéssemos lançar um objeto para uma interface específica e ter o TypeScript retirado automaticamente

quaisquer propriedades que não foram definidas na interface?

que

resolveria meu problema.

O nascimento de TS-Runtime-Picker

Então, com este momento da lâmpada, pensei: "Por que não tornar isso realidade?" Se eu pudesse lançar o request.data para a interface do usuário, o TypeScript poderá me ajudar automaticamente

remover quaisquer propriedades extras, tornando o objeto seguro para inserir no FireBase. ?

e assim, a ideia para ts-runtime-picker

nasceu. O objetivo era simples: crie um pacote que permitisse que os usuários do TypeScript filtrem propriedades indesejadas de um objeto, com base nos campos definidos em uma interface específica.

A melhor parte? Isso me salvaria da validação e filtragem manual de campos. Longe foram os dias de:

const filterData = { Nome: requestData.name, idade: requestData.age, }; FireBase.Collection ("Usuários"). Add (filtredData); // mais trabalho, menos divertido.

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

firebase.collection("users").add(filteredData);  // More work, less fun.
como funciona: deixe o TypeScript fazer seu trabalho

com ts-runtime-picker

, todo o processo é automatizado. Você pode lançar um objeto para uma interface e o pacote garantirá que apenas as propriedades definidas na interface sejam mantidas. Veja como funciona em ação:

antes: validação manual

usuário do usuário { Nome: String; idade: número; } const requestData = {nome: 'John', idade: 30, endereço: '123 Street'}; // Verifique manualmente e remova os campos indesejados: const filterDData = { Nome: requestData.name, idade: requestData.age, }; FireBase.Collection ('Usuários'). Add (filtredData); // Não é muito elegante.

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} de 'ts-runtime-picker'; Usuário da interface { Nome: String; idade: número; } const requestData = {nome: 'John', idade: 30, endereço: '123 Street'}; // filtra automaticamente propriedades inexistentes: const SafeData = Pick (requestData, usuário); FireBase.Collection ('Usuários'). Add (SafeData); // muito mais limpo!

A melhor parte? Este código é
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!
por padrão. Não há necessidade de verificações manuais ou manipulação de objetos. O TS-Runtime-Picker lida automaticamente para você filtrando todos os campos que não existem na interface do usuário. Você pode apenas se concentrar na sua lógica principal sem se preocupar com a inserção acidental de campo. ?

O poder da preguiça (e como isso pode levar à inovação)

Então, você pode estar se perguntando: "Isso saiu de pura preguiça?" E para isso, eu digo: sim, mas também, não.

?

! Mas ei, às vezes a preguiça leva ao brilho! O desejo de tornar as coisas mais fáceis pode ser uma força motriz para a inovação.

Na verdade, apesar da “preguiça” inicial, gastei 8 horas construindo o pacote. Sim, está certo. ?

Mas é assim que acontece às vezes. "A necessidade dá à luz a invenção" e essa necessidade de evitar cheques repetitivos tediosos levaram a uma nova solução que acabou tornando minha vida (e espero que muitas outras vidas) muito mais fáceis. Então, embora eu possa

culpar

preguiça por fazer a bola rolar, foi a necessidade de resolver o problema que deu origem a

ts-runtime-picker

. E é assim que às vezes, ficar preso ou preguiçoso não é necessariamente uma coisa ruim - é o local de nascimento de algo novo e útil! Conclusão


e essa é a história por trás do pacote ts-runtime-picker . Uma jornada da frustração do texto datilografado para a criação de uma ferramenta que resolve um problema real. Este pacote é minha maneira de ajudar os usuários do TypeScript a aproveitar ao máximo a segurança do tipo - não apenas durante o desenvolvimento, mas também em tempo de execução.

Se você está cansado de filtrar manualmente campos ou preocupado com dados indesejados, dê ts-runtime-picker uma foto. É uma coisa a menos que se preocupe e torna o trabalho com o TypeScript um pouco mais inteligente. ?

Declaração de lançamento Este artigo é reproduzido em: https://dev.to/hichemtab-tech/beyond-type-safety-making-typescript-sarter-by-building-a-runtime-picker-26d5?1 Se houver alguma infração, entre em contato com [email protected] para Delete.
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3