Setting up Visual Studio code for typescript

Right now I use exercism with neovim, and command line based (yarn install; yarn test).

I want to setup my vscode to write typescript and run typescript tests.

But I see in my editor that these dependencies are not properly indexed.

Cannot find name ‘describe’. Do you need to install type definitions for a test runner? Try npm i --save-dev @types/jest or npm i --save-dev @types/mocha.ts(2582)

How can I setup vscode so that I can write the solutions for typescript using my editor and run tests?

Thank you,
Senthil

Did you follow the setup instructions here? Installing TypeScript locally | Exercism's Docs

1 Like

I had to do these to solve it at my end

 brew install corepack
 brew unlink yarn
 
 brew install corepack
 corepack enable
 
 node -v
 yarn -v
 yarn install
 npm i --save-dev @types/jest

For some reason, instead of just yarn install doing

yarn install && npm i --save-dev @types/jest is required for me so that vscode can identify jest test files.

The instructions are for setting up Typescript. There are many IDEs out there that people use. The instructions focus on what the track uses: Typescript. Editor setup, the second command there, isn’t covered by the Typescript docs.

VSCode has Automatic Type Acquisition, but that relies on importing symbols explicitly. As Exercism injects jest by typescript config, you need to setup a VSCode configuration for jest. See this GitHub issue for various methods to do so.

To be honest, I’m not sure why the track uses yarn instead of just npm. Myself, I change the scripts section in package.json to the following and just run with npm:

...
  "scripts": {
    "test": "npm run lint:types; jest --no-cache",
    "lint": "npm run lint:types && npm run lint:ci",
    "lint:types": "tsc --noEmit -p .",
    "lint:ci": "eslint . --ext .tsx,.ts"
  },
...

Most of it is just a 1:1 translation, the exception being that I replaced the && by ; for “test”. This allows me to more closely align to the behavior in the online editor, where linting doesn’t make tests fail. This is handy for things like resistor-color-duo, where you might want to declare narrow input types (e.g. [tens, ones, zeroes]: [Color, Color, Color]), which makes one test incorrect from a type perspective, but of course still valid on a JS level.

This way you can just run npm i && npm test for the first run.

In fact, what I do is I’ve placed a package.json in the parent typescript folder and I’ve run npm i there. This works because each project looks for node_modules in the hierarchy of parent folders if it doesn’t find it locally. Thus, I never have to run npm i again - except if an exercises were to require an additional library.

1 Like

@SleeplessByte Maybe you could chime in here?

I’ll check.

Obviously this was not an issue when the track was last configured – you do NOT need to install @types/jest as jest now bundles their own types. However, vscode not picking up those types is definitely something that can happen (and differs between versions).