TypeScript support for VS Code notebooks

[c3danielxu]

🔍 Search Terms

"TypeScript", "VS Code", "VS Code notebooks", "notebook", "intellisense", "JavaScript cell"

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

We would like to have d.ts files affect JavaScript cells in a VS Code notebook. For the full context, the original feature request was for VS Code: microsoft/vscode#195745 We were encouraged by the VS Code team to create a request here because intellisense functionality comes from TypeScript.

Currently, JavaScript cells in a VS Code notebook is using some non-configurable intellisense and cannot be affected by a jsconfig.json. It would be great if we could have this working for non-Jupyter notebooks. For example, in the "include" configuration in the jsconfig, in addition to **/*.js we could have **/*.ipynb and **/*.foobarnb.

📃 Motivating Example

VS Code notebooks are very powerful and are increasingly used to develop software. TypeScript intellisense is an extremely useful feature for JS/TS developers and it would benefit developers if you can use that in a notebook. Currently, you need to write your code in a *.js JavaScript file, configure the jsconfig to include that file, then repeatedly copy paste the file content into a JavaScript cell in a notebook.

💻 Use Cases

Multiple teams at my workplace are using a JavaScript notebook to develop software. We can't execute some code in a file using Node.js because we need some integrations that are only in the notebook. We need intellisense from various JavaScript classes we have that are given in the .d.ts files.

Currently, there are two workarounds we are using:

1. Live without intellisense - there is no autocompletion and you need to type your classes and functions correctly the first try or rely on the notebook to display a syntax error after you've run the code
2. Use existing intellisense in a JavaScript file, write your code in that file, then repeatedly copy paste the file contents into the JavaScript notebook to test your code

[sheetalkamat]

we have plugin support to add external files and external files that act as js using plugins getExternalFiles and vscode command to add extension support using protocol.Configure request which other plugins like vue etc use to add extra files to the project. This should use similar approach to extend the additional files to be added instead of any changes to tsserver

[c3danielxu]

@sheetalkamat Thanks for your response. Can you explain what you mean by this the getExternalFiles and protocol.Configure? Is this something on jsconfig.json? Or is there some change that needs to be done in VS Code codebase?

[sheetalkamat]

Here are some links for language service plugins and how it interacts with tsserver:
https://github.com/Microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin
here is example of plugin that gives extra files using getExternalFiles https://github.com/angular/angular/blob/main/packages/language-service/src/ts_plugin.ts

[DanielRosenwasser]

@c3danielxu are you using some built-in functionality, or have you tried out https://github.com/DonJayamanne/typescript-notebook ?

[c3danielxu]

Thanks @sheetalkamat I will take a look at the resources you linked. @DanielRosenwasser I have a custom implementation of a Node.js notebook (inspired by the TypeScript notebook) but the feature request is more generic. For example, even with minimal files I can go to definition for my class Calculator but does not work in TypeScript notebook.

[c3danielxu]

@sheetalkamat @DanielRosenwasser I was under the impression that TypeScript cannot support notebooks natively due to not using the Language Server Protocol. Is that something that is on your radar or planned in the foreseeable future? That way VS Code can bump their TypeScript version and hopefully that will allow for intellisense in notebooks.

[jakebailey]

LSP is fairly unrelated to whether or not notebooks are supported. There are a slew of other concerns for some sort of in-house notebook support.