Configuring which TypeScript version is used?

[ffMathy]

Can we make it so that I can configure which version of TypeScript to use? Can I (for instance) install typescript@next and use that?

[aleclarson]

It would be great if changing the "typescript" version in package.json worked as expected. 😎

[bengry]

Is this deployed yet? I can't seem to get CodeSandbox to use any TypeScript version other then 3.3.3

[aleclarson]

@bengry From #1843:

This doesn't change which version is used by the editor yet, I'm meaning to change this later by introducing a BrowserFS backend that can handle UNPKG.

[bengry]

@aleclarson so what does this change?

[TPReal]

I guess the issue is that the new syntax cannot be used on the online editor, so this change did not really fix the issue, just prepared for the fix if I understand correctly.

[ffMathy]

Shouldn't this be re-opened again then?

[gaui]

Could this be re-opened? 🙏

[ackvf]

What's the current status? I see that changing typescript in devDependencies doesn't work?

[CompuIves]

It only changes the TypeScript version used by the bundler right now. It's not in the editor yet, as it would require us to dynamically update the VSCode Extensions. I can tackle that one this weekend, it slipped my todo.

[uicowboy]

@CompuIves voicing my support for this as well and checking to see if you have any updates on this issue? Cheers

[mikeplus64]

@CompuIves voicing my support for this as well and checking to see if you have any updates on this issue? Cheers

Bump: same =). I have a library that depends on TS 4.0+ and would like to demo it but it's pretty awkward having lots of type errors there.

[MichaelDeBoey]

I think this one can be closed since #4583 is merged.
Can anybody check this out?
I’m currently not on my laptop

[github-actions]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[phryneas]

@MichaelDeBoey if I interpret this right, adding

{
  "dependencies": {
    "typescript": "4.1.2"
  },
}

to the package.json should make the editor use TS 4.1, correct?

Because right now, it seemingly doesn't 😞

(Quick CSB for checking: link)

[CompuIves]

Oh that's right, we don't dynamically set it based on dependencies, but rather based on a string in our code. That's what the mentioned PR fixed. I took a look at the time to see if we could initialize it based on the sandbox config, but I wasn't able to make it work yet as the extension host starts before we fetch the sandbox.

That's the most challenging part, it surely is possible, but we need to restart the extension host whenever the TypeScript version changes (eg. you add it as dependency) or when you change sandbox. Because of this we make the extension host dependent on the sandbox, which will slow the editor initialization for a bit (first we need to fetch the sandbox before we can load the editor). It's something that I think should happen, but it's not implemented yet.

[tianzhich]

Oh that's right, we don't dynamically set it based on dependencies, but rather based on a string in our code. That's what the mentioned PR fixed. I took a look at the time to see if we could initialize it based on the sandbox config, but I wasn't able to make it work yet as the extension host starts before we fetch the sandbox.

That's the most challenging part, it surely is possible, but we need to restart the extension host whenever the TypeScript version changes (eg. you add it as dependency) or when you change sandbox. Because of this we make the extension host dependent on the sandbox, which will slow the editor initialization for a bit (first we need to fetch the sandbox before we can load the editor). It's something that I think should happen, but it's not implemented yet.

Thank you for your clarify. The stackblitz also has this problem. We just confusing and thought it could be "dynamic" updated cause this issue closed and a fixed pr linked to this...

[phryneas]

@CompuIves in the long run, it would be great if we had this option of switching, especially for new TS betas etc.
In the meantime: could you please bump the CS TS version up to TypeScript 4.1? That would be a very big short-time win :)

[JamesACS]

Duplicate of #5598

[phryneas]

@JamesACS This is not a duplicate. #5598 was about updating TypeScript for all CodeSandboxes of all users to 4.2, this is a request to be able to configure the TS version per SandBox.

[JamesACS]

@phryneas Apologies if I'm misunderstanding - it should be possible to add a new Typescript version through the dependencies on a sandbox by sandbox basis

[barrymay]

@JamesACS if you're saying that's a feature in place today or there's workarounds for this, it's not true from my experience.

The problem is that the codesandbox doesn't let you choose which TS to have the IDE evaluation code against (even if you manually add the ts version), which leads to those false positives.

[JamesACS]

Ah @barrymay I'm with you now - I'll raise this as a feature request

[barrymay]

Thanks! By the way I think that #5598 and this are in the same vein.

If a new Sandbox used the currently latest stable TS and (if possible) let users switch the version for ide evaluation (in the same vein that VSCode does natively) it would solve both issues. It only started out at 4.2 because that's how long this has been going on.

[JamesACS]

I've added it as a sub-feature request on our end. The main topic being upgrading the TS version, then as a side making the version selectable in the client if possible :)

[bstro]

I use Codesandbox primarily to reproduce issues to share on Github. It happens often enough that I run into a type error with a particular version of Typescript, but not in another. This is my usecase for needing to be able to select an arbitrary Typescript version. Just wanted to add this in case it helps.

[IanVS]

Hi there, it's a shame that stackblitz/core#337 had to be locked due to poor behavior from a user. But the last status update on that thread was:

I’m happy to share that there’s a big upgrade coming out later this year that will enable this.

I'm just wondering if there's

1. a way to find the TypeScript version being used
2. a way to change that version

It's a bit confusing to see typescript errors in a project that specifies a version of typescript that supports the syntax I'm using, so I think it would help avoid a lot of confusion if it was clear what version of TS is being used, at least.

[kc0tlh]

Update: This issue has been resolved in stackblitz/core/issues/337.

TL;DR
When you open a TypeScript file in the latest StackBlitz editor, the Typescript version is shown in bottom right corner:

You can also pick the workspace version, allowing you to configure your typescript versions on a per repo basis if desired. Addition context in the issue if anyone's interested!

[CompuIves]

I think I lost track of this issue, but the new editor of CodeSandbox also supports this. It will use the version of Typescript that you have installed in your workspace. The new editor is enabled by default for Cloud Sandboxes, and we're slowly enabling this as well for browser sandboxes.

[CompuIves]

I'll close this issue as soon as we've made the full move, but for now if you want to use it already, we have an option in the editor to convert your sandbox to a cloud sandbox. This would also allow you to get our AI & VSCode integration for that sandbox.

[LoganDark]

The new editor is enabled by default for Cloud Sandboxes, and we're slowly enabling this as well for browser sandboxes.

@CompuIves how do I enable it now?

[CompuIves]

It should be enabled by default by now! We're also going to release Web VS Code mode soon for all users which allows you to install extensions. If you want to use it already you can do enable it from your experiments (is in the user settings in the editor).

[LoganDark]

It should be enabled by default by now! We're also going to release Web VS Code mode soon for all users which allows you to install extensions. If you want to use it already you can do enable it from your experiments (is in the user settings in the editor).

Unfortunately even with VS Code Web enabled it doesn't seem to have a version selector.

I can go to https://codesandbox.io/p/sandbox/muddy-hill-sjfzwl, focus a TSX file, and whether I have VS Code Web enabled or not, this is all that displays:

and clicking it brings this up:

no way to select the version.

If you check my tsconfig.json, I have a compiler plugin that's not being picked up by the language server.

[CompuIves]

Interesting, we should use the TypeScript version that's defined in devDependencies in package.json for sandboxes. Could you try to change the version of typescript in devDependencies, refresh, and see if it works?

[LoganDark]

@CompuIves How do I verify which version is being used? If you're just cloning the specified version it won't work with compiler plugins, which are what I'm trying to do here (it offers autocomplete for CSS Module imports).

[phryneas]

You can use this:

import { TSVersion } from "@phryneas/ts-version";

type Version = `${TSVersion.Major}.${TSVersion.Minor}`;

and then hover Version.

[LoganDark]

Good to know that it's using a version of TS almost two years out of date and completely ignoring devDependencies which says 5.4.5.

Also, devDependencies are not being installed at all. If I place @phryneas/ts-version in devDependencies there's no way to install it, even if I manually trigger "install missing dependencies" from the command palette, I just get a toast saying there aren't any missing dependencies. But the moment I move the dependency to regular dependencies and save, then it appears instantly without me having to trigger anything. So I tried putting "typescript": "5.4.5" in regular dependencies also and that does install it but the editor still doesn't use it, it still says 4.9. I even tried refreshing and that didn't help. Even switching editors between VS Code Web and not does not help.

See: https://codesandbox.io/p/sandbox/prod-glitter-qqr586

Keep in mind this is web and not a cloud container/devbox/whatever. I need this to work in web.