TypeScript가 유형을 계산하는 방법을 어떻게 알 수 있습니까?


18

문제 : 이전에 정의 된 조건부 유형에서 유형을 파생시키는 많은 조건부 유형이있는 파일을 작업 중이며 유형이 파생되는 방식을 디버깅하기가 매우 복잡하고 어려워졌습니다.

TypeScript 컴파일러가 조건부 유형을 결정하고 궁극적 인 유형을 도출하기 위해 경로를 선택하는 방법을 "디버그"하거나 나열하는 방법을 찾으려고합니다.

컴파일러 옵션을 살펴본 결과 아직 해당 영역에서 아무것도 찾지 못했습니다 ...

내가 지금 찾고있는 것과 비슷한 DEBUG=express:*것은 Express 서버가하고있는 것을보고 싶을 때 사용할 수있는 설정 유형과 같습니다 .

그러나 해결하려는 실제 문제는 대형 복잡한 계층 유형 정의에서 유형이 파생되는 방식을 해체하고 디버깅하는 것입니다.

중요 사항 : TypeScript 프로젝트의 런타임 실행을 디버깅하지 않습니다. TypeScript 컴파일러가 유형을 계산하는 방법을 디버깅하려고합니다.


좋은 IDE를 사용하고 유형을 인스턴스화하고 편집기에서 열린 소스 파일의 값 위로 마우스를 가져 가십시오. 이 제안을 사용하여 놓친 추가 정보가 있습니까?
Patrick Roberts

@ PatrickRoberts-답장을 보내 주셔서 감사합니다. 그렇게하면 중첩 된 조건부 유형이있는 복잡한 유형을 가리 킵니다. 그것은 또 다른 유사한 복잡한 유형을 가리키고 계속 진행되며 때로는 분명하지 않은 방식으로 분기됩니다. 해당 유형 구성 분기가 발생하는 이유를 디버그하는 방법을 연구하려고합니다.
Guy

1
귀하의 질문에 이것을 보여주는 구체적인 예가 도움이 될 것이라고 생각합니다. 예를 들어, 일반 (나는 또한 당신이 전에 설명하고있는 상황이 발생했지만, 일반적으로 내가 해결 방법은 그들 중 하나를 더 불투명 한 것 같은 그 유형을 재 작성 포함 찾을 interface대신 일반의 자체 문서화 컨테이너 이름의 type시도가 확장하는 것을 그 복잡한 조건부 유형의 전체 사용을 피하기 위해 소스를 리팩토링하면 IDE 툴팁에서 정의)
패트릭 로버츠

@PatrickRoberts는이 리포지를 Hapi / Joi @ 16으로 업그레이드하고 유형 생성을 디버그하려고 시도하면이 질문이 발생합니다. github.com/TCMiranda/joi-extract-type
Guy

@PatrickRoberts 이것은 상황에 대한 업그레이드 자체를 논의하는 특정 문제입니다. github.com/TCMiranda/joi-extract-type/issues/22
Guy

답변:


1

원하는 정보를 로그 아웃하기위한 내장 스크립트에는 내장 메커니즘이 없습니다. 그러나 내부 작업을 이해하고 싶다면 실제로 조건부 유형을 해결하는 소스 코드가 있습니다.

에서이 장소를 살펴보세요 checker.ts.

LN : 13,258 instantiateTypeWorker()
LN : 12,303 getConditionalType()
LN : 12,385 getTypeFromConditionalTypeNode()
LN : 12772getTypeFromTypeNode()


부주의하게 정리 한 반 완료 타입 스크립트 플러그인이 첨부되어 있습니다. 의 원시 데이터 구조를 로그 아웃합니다 ConditionalType. 이 구조체를 이해하려면 types.ts ln : 4634를 확인하십시오 .

이 플러그인의 UX는 끔찍하지만 그 구조체는 typescript가 조건부 유형의 최종 값을 결정하는 방법을 알려줍니다.

이 플러그인을 실행하기위한 성가신 세부 지침 :

  1. mkdir my-ts-plugin && cd my-ts-plugin
  2. touch package.json 쓰기 { "name": "my-ts-plugin", "main": "index.js" }
  3. yarn add typescript fast-safe-stringify
  4. 이 스 니펫을 복사하여 붙여넣고 index.tstsc를 사용하여index.js
  5. yarn link
  6. 이제 cd자신의 ts 프로젝트 디렉토리에 실행하십시오.yarn link my-ts-plugin
  7. { "compilerOptions": { "plugins": [{ "name": "my-ts-plugin" }] } }당신의에 추가tsconfig.json
  8. (.vscode/settings.json)이 줄을 설정하여 작업 공간에 추가하십시오 .{ "typescript.tsdk": "<PATH_TO_YOUR_TS_PROJECT>/node_modules/typescript/lib" }
  9. vscode 명령 팔레트를 열고 다음을 실행하십시오.
    1. TypeScript: Select TypeScript Version... -> Use Workspace Version
    2. TypeScript: Restart TS Server
    3. TypeScript: Open TS Server Log
  10. 플러그인 로그 아웃을 볼 수 있어야합니다 "PLUGIN UP AND RUNNING". 이제 ts 코드 파일을 열고 일부 조건 유형 노드로 마우스를 가져 가면 로그 파일에 loooooong json 데이터 구조가 추가되어 있어야합니다.

@hackape 주셔서 감사합니다. 나는 그것을 해킹 해왔고 VSCode를 사용할 때 대화식으로보고있는 것을 흥미롭고 거의 나열하는 몇 가지 로그를 생성 할 수 있으므로 내가있는 곳보다 훨씬 멀지 않습니다. 플러그인을 작동시키는 방법에 대한 좋은 지침.
Guy

나는 당신에게 현상금을 주었다. 솔루션을 얻지 못했지만 플러그인을 수정하기 위해 더 많은 노력을 기울이면 아마도 거기에 갈 수 있고 가까운 장래에 더 나은 솔루션이 있다고 이미지 할 수 없다고 생각합니다. 당신의 도움과 노력에 감사드립니다!
Guy

1
@Guy 현상금을 주셔서 감사합니다. 그래서 어제 몇 시간 더 유용한 결과를 얻으려고 노력했습니다. 네가 옳아. 위의 데이터 구조는 조건부 유형 체인의 AST-ish 객체를 캡처하지만 평가 결과가 아니라 구문 분석 된 결과 일뿐입니다. 유형 리졸버가 평가할 때 "이유"또는 어떤 조건부 분기가 수행되는지에 관해서는, 모든 중간 단계의 결과를 덤프해야합니다 debugger.
hackape

1
나는 커스텀 빌드 타입 스크립트를 만들기 위해 getConditionalType()in checker.ts을 수정 하여 도중에 중간 정보를 버리는 부작용 로직을 삽입했습니다. 그리고 이번에는 좀 더 유용한 것을 얻었습니다. 코드를 정리하고 나중에 요점을 첨부하겠습니다.
hackape 08

1
@Guy 요점은 여기
hackape
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.