在 TypeScript 文件中的光标下键入
Type under cursor in TypeScript file
我想研究 TypeScript 代码中的某些推断类型。这在文件正确的情况下特别有用，以确保推断的类型足够具体、准确和正确。
给定 TypeScript 文件如何获取其中特定位置的类型，类似于 flow type-at-pos?
除此之外我不需要任何额外的复杂工具，例如 IDE 集成。就是这个简单的功能。
不幸的是，TypeScript 不会以易于使用的方式公开此类内容。 TypeScript 确实有一个语言服务器，您可以使用它来查询类型信息。做起来相对容易，但是很麻烦。基本上你启动服务器并发送一些命令来打开一个项目和文件，然后发送一个命令来请求信息。
如果您全局安装了 typescript (npm install -g typescript)，您应该能够 运行 在 tsserver 可执行文件下的 typescript 服务器。否则，您可以 运行 通过将它定位在 typescript 模块的 bin 文件夹中。
命令从标准输入发送，响应通过标准输出发送。命令只是 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":[]}}
这是我测试时的完整 request/response：
> ./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":[]}}
可能有更有效的查询语言服务器的方法，但这是我在短时间内摆弄的结果。
您可以在此处查看所有可能的 request/response：https://github.com/Microsoft/TypeScript/blob/master/lib/protocol.d.ts
希望这对您有所帮助。
我想研究 TypeScript 代码中的某些推断类型。这在文件正确的情况下特别有用，以确保推断的类型足够具体、准确和正确。
给定 TypeScript 文件如何获取其中特定位置的类型，类似于 flow type-at-pos?
除此之外我不需要任何额外的复杂工具，例如 IDE 集成。就是这个简单的功能。
不幸的是，TypeScript 不会以易于使用的方式公开此类内容。 TypeScript 确实有一个语言服务器，您可以使用它来查询类型信息。做起来相对容易，但是很麻烦。基本上你启动服务器并发送一些命令来打开一个项目和文件，然后发送一个命令来请求信息。
如果您全局安装了 typescript (npm install -g typescript)，您应该能够 运行 在 tsserver 可执行文件下的 typescript 服务器。否则，您可以 运行 通过将它定位在 typescript 模块的 bin 文件夹中。
命令从标准输入发送，响应通过标准输出发送。命令只是 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":[]}}
这是我测试时的完整 request/response：
> ./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":[]}}
可能有更有效的查询语言服务器的方法，但这是我在短时间内摆弄的结果。
您可以在此处查看所有可能的 request/response：https://github.com/Microsoft/TypeScript/blob/master/lib/protocol.d.ts
希望这对您有所帮助。