Atualmente estou trabalhando/mantendo aplicativos js/react legados, onde não há opção de retrabalhar para typeript, por isso estou ativando o jsDoc como sistema de tipo de tempo de desenvolvimento existente para JS.

TLDR;

O módulo Typescript npm é feito por jsDoc, useDuck traz de volta a era de ouro do redux sob 70LOC. Este módulo é o principal caso de uso em tempo de desenvolvimento, quando ajuda seu estado complexo a permanecer seguro.

const [state, quack] = useDuck(reducer, initialState, actionsMap);

jsdoc-pato

Caminho para escrever datilografado para jsDoc

Minha experiência com TypeScript foi um pouco mais profunda quando criei uma biblioteca npm de estado de reação leve: react-state-factory

User declared 
state and actions types 
  -> useStateFactory 
  -> [state, dispatchedActoionCollection]

Testando os limites do jsDoc

Depois que comecei a usar algumas anotações jsDoc para ajudar em meus trabalhos, o próximo passo é um pouco mais ambicioso: retrabalhar este módulo para jsDoc. À primeira vista esta é uma missão impossível. Mas depois de passar algumas semanas para entender o jsDoc, vi alguma luz no final do túnel.

Horror do sistema de tipo: redutor

Em certo ponto, encontrei um limite rígido de capacidade do jsDoc, quando tento escrever uma função redutora, onde o resultado é um Quack, mas é claro que está iniciando um {} vazio. Portanto, apenas o final da execução do redutor criou o Quack adequado, porque esse tipo está curioso sobre o objeto que contém todas as chaves solicitadas. Então esse problema até agora não consegui resolver, se alguém puder dar uma boa ideia de como posso resolver por favor compartilhe comigo ou junte-se a este módulo de desenvolvimento como colaborador.

Outra armadilha: nenhum tipo de módulo sem TS

No início eu crio um único arquivo js que contém todos os jsDoc @typedef necessários, mais cedo ou mais tarde isso funcionará. E nesse momento acho que é apenas uma etapa para criar um módulo de nó para eles.

Mas o triste fato é que no módulo npm que contém tipos exportados não funciona apenas com jsDoc, então é obrigatório compilar um d.ts para que no final do módulo jsDoc não diga 100% JS, em vez disso, a construção também usa TypeScript.
@typedef no módulo jsdoc-duck

Como você reconhece no fórum dev.to, o destaque da sintaxe não reconhece o jsDoc. Outras coisas erradas, esse @typedef no meu teste só funciona se você escrever uma única linha, indo contra o código limpo.

Na minha próxima postagem do blog, escreverei o caso de uso concreto desta biblioteca, classificar: simplificar e digitar com segurança o tratamento do estado de reação com useReducer.

/** * @template T – Tipo de carga útil * @typedef {T estende { tipo: inferir U, carga útil?: inferir P } ? { tipo: U, carga útil ?: P }: nunca} ActionType */ // @ts-ignorar /** @template AM - Mapa de ações @typedef {{ [K in AM['type']]: K }} Rótulos */ // @ts-ignorar /** @template AM - Mapa de ações @typedef {{ [T in AM["type"]]: Extract extends { payload: infer P } ? (carga útil: P) => void : () => void }} Quack */ /** * @template ST - Estado * @template AM – Mapa de ações * @typedef {(estado: ST, ação: AM) => ST} Redutor */

/**
 * @template T - Payload Type
 * @typedef {T extends { type: infer U, payload?: infer P } ? { type: U, payload?: P } : never} ActionType
 */

// @ts-ignore
/** @template AM - Actions Map @typedef {{ [K in AM['type']]: K }} Labels */

// @ts-ignore
/** @template AM - Actions Map @typedef {{ [T in AM["type"]]: Extract extends { payload: infer P } ? (payload: P) => void : () => void }} Quack */

/**
 * @template ST - State
 * @template AM - Actions Map
 * @typedef {(state: ST, action: AM) => ST} Reducer
 */