stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
230 stars 22 forks source link

Can't get typescript auto complete to work on ts and tsx files #213

Open noam-honig opened 1 month ago

noam-honig commented 1 month ago

Describe the bug

I'm writing a tutorial that uses typescript, and I can't get typescript auto complete to work on the code editor (and also typecheck)

Link to a StackBlitz project which shows the error

No response

Steps to reproduce

Here's my repo: https://github.com/noam-honig/play-with-tutorial-kit/tree/typescript-typing

I use a vite typescript project for the template.

I added a file: src\content\tutorial\1-basics\1-introduction\1-welcome_files\test.ts

type Person = {
  firstName: string;
  lastName: string;
};

export function test() {
  var p: Person = {
    // try typing firstName / lastName - I don't get any typing errors
  };

  alert(p.firstName + " " + p.lastName);
}

When I try to type firstName inside the new object, it doesn't auto complete, nor does it type check that I spelled it correctly.

image

Expected behavior

I expect auto complete to display firstName and lastName, and if I type a wrong value, to get some error highlighting as I do in stackblitz Screenshot from stackblitz image

Screenshots

No response

Platform

Additional context

No response

AriPerkkio commented 1 month ago

Currently the code editor does not have type aware intellisense. However this is something we are planning to improve in future.

noam-honig commented 1 month ago

@AriPerkkio thanks for getting back to me, I see that in the angular tutorial it seems to work (at least partially) https://angular.dev/tutorials/learn-angular

Is this a different engine?

AriPerkkio commented 1 month ago

Is this a different engine?

Looks like Angular's tutorial is using the same editor (CodeMirror) that TutorialKit uses. This simply hasn't been implemented on TutorialKit's side.

noam-honig commented 3 weeks ago

Hi Guys,

Just saying that this is my top priority feature - my tutorial (learn.remult.dev) is in typescript, and remult takes full advantage of typescript - but without the editor support, its missing the point a little.

So just in case you were wondering what's a priority for me - this is the one :)

Thanks