我想研究TypeScript代码中的某些推断类型。对于正确的文件,以确保推断的类型足够具体,准确和正确,这将特别有用。
给出TypeScript文件如何以类似于flow type-at-pos
的方式在其中的特定位置获取类型?
除此以外,我不需要任何其他复杂的工具,例如IDE集成。只是这个简单的功能。
不幸的是,TypeScript不会以易于使用的方式公开类似的内容。 TypeScript确实具有语言服务器,可用于查询类型信息。这是相对容易做到的,但是很麻烦。基本上,您启动服务器并发送一些命令以打开项目和文件,然后发送命令以请求信息。
如果已在全球范围内安装了打字稿(npm install -g typescript
),则应该能够在tsserver
可执行文件下运行打字稿服务器。否则,您可以通过在打字稿模块内的bin
文件夹中找到它来运行它。
命令从stdin发送,响应通过stdout发送。这些命令只是JSON,并以新行终止。
您要发送的第一个命令是openExternalProject
:
{"type":"request","command":"openExternalProject","arguments":{"projectFileName":"/path/to/tsconfig.json","rootFiles":[],"options":{}}}
用/path/to/tsconfig.json
文件的路径替换tsconfig.json
。>>
下一个命令是打开文件:
{"type":"request","command":"open","arguments":{"file":"/path/to/file.ts"}}
并且获得类型信息的最后命令是
quickinfo
:
{"type":"request","command":"quickinfo","arguments":{"offset":9,"line":5,"file":"/path/to/file.ts"}}
将
line
值替换为您要提供信息的类型的行,并将offset
替换为行偏移量。
您应该从服务器获得类似于以下的响应:
{"seq":0,"type":"response","command":"quickinfo","success":true,"body":{"kind":"alias","kindModifiers":"","start":{"line":5,"offset":8},"end":{"line":5,"offset":19},"displayString":"(alias) const MyComponent: new () => MyComponent\nimport MyComponent","documentation":"","tags":[]}}
这是我测试此内容时的完整请求/响应:
> ./tsserver Content-Length: 76 {"seq":0,"type":"event","event":"typingsInstallerPid","body":{"pid":63491}} {"type":"request","command":"openExternalProject","arguments":{"projectFileName":"/test/tsconfig.json","rootFiles":[],"options":{}}} Content-Length: 526 {"seq":0,"type":"event","event":"telemetry","body":{"telemetryEventName":"projectInfo","payload":{"projectId":"489d647358fb01382e6efc991212c7fd2bd8d16a91e6b960aa17b2c86ff9cb25","fileStats":{"js":0,"jsSize":0,"jsx":0,"jsxSize":0,"ts":0,"tsSize":0,"tsx":0,"tsxSize":0,"dts":0,"dtsSize":0,"deferred":0,"deferredSize":0},"compilerOptions":{},"typeAcquisition":{"enable":true,"include":false,"exclude":false},"compileOnSave":true,"configFileName":"other","projectType":"external","languageServiceEnabled":true,"version":"3.7.2"}}} Content-Length: 87 {"seq":0,"type":"response","command":"openExternalProject","success":true,"body":true} Content-Length: 415 {"seq":0,"type":"event","event":"setTypings","body":{"projectName":"/test/tsconfig.json","typeAcquisition":{"include":[],"exclude":[],"enable":true},"compilerOptions":{"allowNonTsExtensions":true,"noEmitForJsFiles":true},"typings":["/Users/so-test/Library/Caches/typescript/3.7/node_modules/@types/react/index.d.ts"],"unresolvedImports":[],"kind":"action::set"}} Content-Length: 415 {"seq":0,"type":"event","event":"setTypings","body":{"projectName":"/test/tsconfig.json","typeAcquisition":{"include":[],"exclude":[],"enable":true},"compilerOptions":{"allowNonTsExtensions":true,"noEmitForJsFiles":true},"typings":["/Users/so-test/Library/Caches/typescript/3.7/node_modules/@types/react/index.d.ts"],"unresolvedImports":[],"kind":"action::set"}} {"type":"request","command":"open","arguments":{"file":"/test/App.tsx"}} Content-Length: 272 {"seq":0,"type":"event","event":"projectLoadingStart","body":{"projectName":"/test/tsconfig.json","reason":"Creating possible configured project for /test/App.tsx to open"}} Content-Length: 150 {"seq":0,"type":"event","event":"projectLoadingFinish","body":{"projectName":"/test/tsconfig.json"}} Content-Length: 239 {"seq":0,"type":"event","event":"configFileDiag","body":{"triggerFile":"/test/App.tsx","configFile":"/test/tsconfig.json","diagnostics":[]}} {"type":"request","command":"quickinfo","arguments":{"offset":9,"line":5,"file":"/test/App.tsx"}} Content-Length: 283 {"seq":0,"type":"response","command":"quickinfo","success":true,"body":{"kind":"alias","kindModifiers":"","start":{"line":5,"offset":8},"end":{"line":5,"offset":19},"displayString":"(alias) const MyComponent: new () => MyComponent\nimport MyComponent","documentation":"","tags":[]}}
也许有一种更有效的查询语言服务器的方法,但这是我在花时间的短时间内想到的。
您可以在这里查看所有可能的请求/响应:https://github.com/Microsoft/TypeScript/blob/master/lib/protocol.d.ts
希望这会有所帮助。