현재 저는 레거시 js/react 애플리케이션을 작업/유지 관리하고 있는데 typeript를 재작업할 수 있는 옵션이 없습니다. 그래서 jsDoc을 JS용 기존 개발 시간 유형 시스템으로 설정하는 이유입니다.

TLDR;

Typescript npm 모듈은 jsDoc에 의해 만들어졌으며, useDuck은 70LOC에서 redux의 황금 시대를 되살렸습니다. 개발 시 이 모듈의 주요 사용 사례는 복잡한 상태가 유형 안전을 유지하도록 돕는 경우입니다.

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

jsdoc-duck

jsDoc에 대한 타이프스크립트로 가는 길

가벼운 반응 상태 npm 라이브러리인 React-state-factory를 만들었을 때 TypeScript에 대한 내 경험이 좀 더 깊어졌습니다.

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

jsDoc 제한 테스트

내 작업을 돕기 위해 몇 가지 jsDoc 주석을 사용한 후 다음 단계는 좀 더 야심적입니다. 이 모듈을 jsDoc으로 재작업하는 것입니다. 언뜻보기에 이것은 불가능한 임무입니다. 하지만 jsDoc을 이해하기 위해 몇 주를 보낸 후 터널 끝에서 약간의 빛을 보았습니다.

유형 시스템의 공포: 감속기

리듀서 함수를 작성하려고 할 때 특정 지점에서 jsDoc 기능의 엄격한 한계를 발견했습니다. 결과는 Quack이지만 물론 빈 {}가 시작됩니다. 따라서 리듀서 실행이 끝나면 해당 유형이 요청된 모든 키를 포함하는 객체에 대해 궁금해하기 때문에 적절한 돌팔이가 생성됩니다. 그래서 지금까지 이 문제를 해결할 수 없었습니다. 누군가 이 문제를 해결할 수 있는 좋은 아이디어를 제공할 수 있다면 저와 공유하거나 이 모듈 개발에 공동 작업자로 참여해 주시기 바랍니다.

또 다른 함정: TS가 없으면 모듈에 유형이 없습니다.

처음에는 필요한 모든 jsDoc @typedef를 포함하는 단일 js 파일을 생성합니다. 조만간 이것이 작동할 것입니다. 그리고 그 순간 나는 그들을 위한 노드 모듈을 만드는 한 단계만 생각합니다.
그러나 슬픈 사실은 내보낸 유형이 포함된 npm 모듈에서는 jsDoc에서만 작동하지 않으므로 d.ts를 컴파일해야 하므로 마지막 jsDoc 모듈에서는 100% JS라고 말하지 않고 대신 빌드에서 typescript도 사용합니다.

jsdoc-duck 모듈의 @typedef

dev.to 포럼에서 알 수 있듯이 구문 강조 표시는 jsDoc을 인식하지 못합니다. 내 테스트에서 @typedef가 다른 잘못된 점은 한 줄만 작성하면 작동하므로 깔끔한 코드에 어긋납니다.

다음 블로그 게시물에서는 이 라이브러리의 구체적인 사용 사례인 sort: useReducer를 사용하여 반응 상태 처리를 단순화하고 유형 안전하게 작성하는 것입니다.

/**
 * @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
 */