Làm thế nào tôi có thể thấy cách TypeScript tính toán các loại?


18

Vấn đề: Tôi đang làm việc trên một tệp có nhiều loại điều kiện xuất phát từ loại có điều kiện được xác định trước đó và điều này trở nên rất phức tạp và khó gỡ lỗi về cách một loại được tạo ra.

Tôi đang cố gắng tìm cách "gỡ lỗi" hoặc liệt kê cách trình biên dịch TypeScript đưa ra quyết định của mình về một loại điều kiện và chọn một đường dẫn để lấy ra loại cuối cùng.

Tôi đã xem qua các tùy chọn trình biên dịch và chưa tìm thấy gì trong khu vực đó ...

Sự tương tự với những gì tôi đang tìm kiếm ngay bây giờ là tương đương với DEBUG=express:*loại cài đặt mà người ta có thể sử dụng nếu bạn muốn xem máy chủ tốc hành đang làm gì.

Tuy nhiên, vấn đề thực tế mà tôi đang cố gắng giải quyết là có thể giải cấu trúc và gỡ lỗi làm thế nào một loại có nguồn gốc trong một định nghĩa loại phân cấp phức tạp lớn.

Lưu ý quan trọng: Tôi không cố gắng gỡ lỗi thực thi thời gian chạy của dự án TypeScript. Tôi đang cố gắng gỡ lỗi cách các loại được tính toán bởi trình biên dịch TypeScript.


Chỉ cần sử dụng một IDE tốt, khởi tạo kiểu của bạn và di chuột qua giá trị trong tệp nguồn được mở trong trình chỉnh sửa của bạn. Có một số thông tin mong muốn bổ sung mà bạn bỏ lỡ bằng cách sử dụng đề xuất đó?
Patrick Roberts

@PatrickRoberts - cảm ơn bạn đã trả lời. Khi tôi làm điều đó, nó trỏ đến một loại phức tạp có các loại điều kiện lồng nhau. Điều đó lần lượt chỉ ra một loại phức tạp tương tự khác và nó vẫn tiếp tục và đôi khi nó sẽ phân nhánh theo cách không rõ ràng. Cố gắng tìm ra cách gỡ lỗi tại sao kiểu xây dựng đó đang xảy ra.
Guy

1
Tôi nghĩ rằng câu hỏi của bạn sẽ được hưởng lợi từ một ví dụ cụ thể để chứng minh điều này. Tôi cũng đã gặp tình huống mà bạn mô tả trước đây, nhưng thông thường tôi thấy cách giải quyết liên quan đến việc viết lại các loại sao cho chúng mờ hơn (ví dụ: chung interfacevới tên container tự ghi tài liệu thay vì chung chung typecố gắng mở rộng định nghĩa trong tooltip của IDE) hoặc chỉ tái cấu trúc nguồn để tránh lạm dụng hoàn toàn các loại điều kiện phức tạp.
Patrick Roberts

@PatrickRoberts cố gắng nâng cấp repo này lên Hapi / Joi @ 16 và gỡ lỗi thế hệ loại là điều dẫn đến câu hỏi này. github.com/TCMiranda/joi-extract-type
Guy

@PatrickRoberts đây là vấn đề cụ thể thảo luận về việc nâng cấp chính nó cho bối cảnh. github.com/TCMiranda/joi-extract-type/issues/22
Guy

Câu trả lời:


1

Không có bất kỳ cơ chế tích hợp nào trong bản thảo để đăng xuất thông tin mong muốn được đề cập. Tuy nhiên, nếu bạn quan tâm đến việc tìm hiểu công việc nội bộ, thì đây là vị trí trong mã nguồn nơi thực sự giải quyết các loại điều kiện.

Hãy nhìn vào những nơi này checker.ts.

ln: 13258 instantiateTypeWorker()
ln: 12303 getConditionalType()
ln: 12385 getTypeFromConditionalTypeNode()
ln: 12772getTypeFromTypeNode()


Kèm theo là một plugin kiểu chữ được thực hiện một nửa tôi bất cẩn kết hợp. Nó đăng xuất cấu trúc dữ liệu thô của a ConditionalType. Để hiểu cấu trúc này, hãy kiểm tra các loại.ts ln: 4634.

UX của plugin này rất tệ, nhưng cấu trúc đó cho bạn biết cách bản thảo quyết định giá trị cuối cùng của một loại điều kiện.

Một số hướng dẫn chi tiết gây khó chịu để chạy plugin này:

  1. mkdir my-ts-plugin && cd my-ts-plugin
  2. touch package.json và viết { "name": "my-ts-plugin", "main": "index.js" }
  3. yarn add typescript fast-safe-stringify
  4. sao chép-dán đoạn mã này vào index.ts, sử dụng tsc để biên dịch nó thànhindex.js
  5. yarn link
  6. bây giờ cdđến thư mục dự án ts của riêng bạn, chạyyarn link my-ts-plugin
  7. thêm { "compilerOptions": { "plugins": [{ "name": "my-ts-plugin" }] } }vào của bạntsconfig.json
  8. thêm vào không gian làm việc thiết lập (.vscode/settings.json)dòng này:{ "typescript.tsdk": "<PATH_TO_YOUR_TS_PROJECT>/node_modules/typescript/lib" }
  9. mở bảng lệnh vscode và chạy:
    1. TypeScript: Select TypeScript Version... -> Use Workspace Version
    2. TypeScript: Restart TS Server
    3. TypeScript: Open TS Server Log
  10. bạn sẽ có thể thấy đăng xuất plugin "PLUGIN UP AND RUNNING", bây giờ hãy mở tệp mã ts và di chuột đến một nút loại có điều kiện, bạn sẽ thấy cấu trúc dữ liệu loooooong json được thêm vào tệp nhật ký.

Cảm ơn vì điều đó @hackape. Tôi đã hack xung quanh nó và có thể tạo ra một số nhật ký thú vị và liệt kê khá nhiều những gì tôi thấy tương tác khi sử dụng VSCode vì vậy nó không giúp tôi tiến xa hơn nơi tôi đang ở. Hướng dẫn tốt về cách làm cho plugin đó hoạt động.
Chàng trai

Tôi đã đưa tiền thưởng cho bạn. Mặc dù nó không đưa tôi đến giải pháp, tôi nghĩ rằng với nhiều nỗ lực hơn trong việc sửa đổi plugin đó, tôi có thể có thể đến đó và tôi không thể hình dung rằng có một giải pháp tốt hơn cho vấn đề này trong tương lai gần. Cảm ơn sự giúp đỡ và nỗ lực của bạn!
Guy

1
@Guy Cảm ơn vì tiền thưởng. Vì vậy, tôi đã dành thêm một vài giờ ngày hôm qua để cố gắng có được kết quả hữu ích hơn. Bạn đúng. Cấu trúc dữ liệu ở trên nắm bắt đối tượng AST-ish của chuỗi loại có điều kiện, nhưng đó chỉ là kết quả được phân tích cú pháp, không phải là kết quả được đánh giá. Đối với "tại sao" hoặc phân nhánh có điều kiện mà trình phân giải loại thực hiện khi đánh giá, nó yêu cầu loại bỏ kết quả của tất cả các bước trung gian, giống như đặt debuggertạm dừng ở đâu đó sau đó xem thủ công các phạm vi cục bộ trong ngăn xếp cuộc gọi.
hackape

1
Tôi đã sửa đổi phần getConditionalType()trong checker.tsđể tạo một bản thảo xây dựng tùy chỉnh, chèn một số logic hiệu ứng phụ để loại bỏ thông tin trung gian trên đường đi. Và lần này tôi có một cái gì đó hữu ích hơn một chút. Tôi sẽ dọn sạch mã của mình và đính kèm một ý chính sau.
hackape

1
@Guy ý chính ở đây
hackape
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.