There are some cool features that have been in the code base for a long time, like checking javascript files, that haven't been published to the marketplace for this extension. Wondering if this was on purpose because things aren't ready or just an oversight!

Thanks!

I have a GitHub action that shows TypeScript errors in Pull Requests (https://github.com/fersilva16/ts-report-action) and it would be cool to translate the errors for better readability.

Error Text

Class 'Main' defines instance member property 'log', but extended class 'ExtraMain' defines it as instance member function.

Supporting Information

Have a function defined on class Main and then override it on a class that extends Main

Example:

The original error is succinct and understandable enough. The "Can't find translation" section, along with bold and large text, needlessly steals attention from something that doesn't necessarily require a translation. I would prefer if this message didn't show up in such cases or, if it did, was smaller to reduce noise-to-info ratio.

Users should have the ability to sort long errors in reverse order/normal order, since many errors are BEST viewed in reverse order. We should probably also have the ability to hide explanations for some errors, because they can become repetitive.

For error ts(2554) Expected 1 arguments, but got 0,
I'm getting the translation The function you're trying to call needs {0} arguments, but you're passing {1}.
It should be The function you're trying to call needs 1 argument(s), but you're passing 0.

Here's the screenshot:

I fixed the issue and submitted a pull request.

By any change any plans for or ideas how to get this functionality over to intellij?

There's a lot to talk about in this project, enabling the discussions tab would help for brainstorming ideas and contributors' engagement with the project.

I want better error messages in my typescript checked js and jsx files as well :)

Would it be possible to port this to Sublime? I'd be happy to help and contribute.

If we look error 2345 in tsErrorMessages.json, we have the following description:

"Argument of type '{0}' is not assignable to parameter of type '{1}'."

But in file 2345.md, the description is:

"Property '{0}' is missing in type '{1}'."

Which seems to be the error 2324

• Issue Type: Performance
• Extension Name: ts-error-translator
• Extension Version: 0.8.0
• OS Version: Darwin x64 22.4.0
• VS Code version: 1.77.3

⚠️ Make sure to attach this file from your home-directory:
⚠️file:///var/folders/nt/khr0v91901sgw0sg7z2cq9c40000gn/T/mattpocock.ts-error-translator-unresponsive.cpuprofile.txt

profile.txt

Please add the Github repository link to the web service: ts-error-translator.vercel.app
※Easy to bookmark and find the repository.

It would be super helpful if the translator can prettify types inside type mistmatch errors so it's not a single line like it is with Typescript's default errors.

As a user it would be great if the extension also worked in SFC in Vue. i.e - .vue files.

I'm getting this problem where extension is checking node_modules files, is there any kind of setup to prevent this?

Hey 👋

So, just throwing random ideas here. Instead of a vscode extension or adding an additional package, this could be wrapped as a TypeScript Language Service Plugin.

Language Service Plugins allow to report additional errors such as from a linter and technically they should have access to original diagnostics so theoretically it'd be possible to add "translated" diagnostics along side original diagnostics.

Assuming this works, then user can simply add this to tsconfig:

{
    "compilerOptions": {
        "plugins": [{ "name": "ts-error-translator" }]
    }
}

So any IDE that uses TypeScript language service would be able to load the plugin and report errors in that IDE's native way for displaying/reporting errors/messages.

I haven't personally written a TS language service plugin before, I'm slightly familiar with the APIs thought which I learned for no reason lol. If there is interest in this I could try this out when I get some time.

Recently insert mode in vim on 300+ line typescript files has really slowed down. After enabling and disabling a few plugins I isolated this extension as the cause.

I'm not 100% sure but I feel like the slow down was introduced with the new tutorial features. I've been happily using the error translator for over a month without issue until the last few days.

Specs:

• Intel Macbook Pro 2018
• MacOS Ventura 13.1

VSCode:

• Version: 1.74.1
• Commit: 1ad8d514439d5077d2b0b7ee64d2ce82a9308e5a
• Date: 2022-12-14T10:33:40.793Z (6 days ago)
• Electron: 19.1.8
• Chromium: 102.0.5005.167
• OS: Darwin x64 22.2.0

I'd love to help fix this problem with a PR. Where can I get started? I've found the json file, but I don't know where to start.

I was opening an issue about the extension not working but i've luckly decided to testing in some file other than quokka scratchpad.

While the app seems to work ok in every ts file if you create a new file and select the language in VSCode setting it to typescript the typescript will check for typing errors but the extension will not translate.

This is my VSCode version

Version: 1.66.2 (user setup)
Commit: dfd34e8260c270da74b5c2d86d61aee4b6d56977
Date: 2022-04-11T07:46:01.075Z
Electron: 17.2.0
Chromium: 98.0.4758.109
Node.js: 16.13.0
V8: 9.8.177.11-electron.0
OS: Windows_NT x64 10.0.19044

Hey 👋

Do you think it makes sense to add syntax highlighting support for markdown code?

Also, a more useful feature. Does it maybe make sense to add diff support in markdown? This'd help to easily display inline suggestions of code than should be removed + added. Sort of like GitHub suggestions or diff markdown. For example: 👇

const foo = "bar";
- type a = (typeof);
+ type a = typeof foo;

I had this and I think it might be useful if the translation for TS2339 could detect that the RHS is a promise on the assignment:

const { x } = foo(); // foo is async

Property 'x' does not exist on type 'Promise<{ x: something }>'.

could be translated/hinted as

Property 'x' does not exist on type 'Promise<{ x: something }>'. Did you mean to await the promise?

Hey 👋

It looks like some files (e.g: engine.test.ts) were saved without formatting. In vscode - for instance - by default vscode formatter removes trailing spaces on save, so saving a file for me causes unrelated changes (removes trailing spaces and comma).

It'd be great if prettier (or any other auto-formatting tool) was set. This'd ensure there is a consistent code style regardless of code editor's default formatting.

Error Text

Type 'AxiosResponse<any, any>' is missing the following properties from type '{ token_type?: string | undefined; access_token: string; expires_in?: number | undefined; refresh_token: string; }': access_token, refresh_token

Supporting Information

Please provide other information which led to this error, and any specific questions you have about it:

Problem

As said here you care about web support, I think this line also uses the filesystem under the hood to read the JSON file from disk and parse it, so that's probably the reason why It's not supported for the web.

Personally, I can't see any incompatibility issues other than using the filesystem from reading the why VSC extensions might not be supported on the web, but you know better than me(cause you wrote it), can you notice any other incompatibility issues?

Recommended solution

Instead of writing bundleErrors.json to disk then reading it using the filesystem and parsing it, why not just write a JS file (ex: bundleErrors.js) containing the parsed object and read it as a JS file like this import * as bundleErrors from './bundleErrors.js';, so that It acts like if It was written inline as part of the source code, brilliant right?

Once I added new types via @types (AKA DefinitelyTyped) modules, I started to see all sorts of info entries under the VS Code Problems tab trying to give me tips on TypeScript features that I hadn't marked as learned yet:

Doesn't seem like something you'd want to see by default.

I also couldn't get rid of these via exclude or skipLibCheck.

Highlighted 'tips' reduces the visibility of highlighted 'errors' which is a bit frustrating.

Is there are way to avoid this using any vs code Setting ?

I use the scroll bar to navigate to errors in a large file , most often I find it easier to spot errors in a document using the default Typescript diagnostics.

So fixing this somehow would be really helpful to use tips alongside errors

Error Text

Module '".svg"' has no exported member 'ReactComponent'. Did you mean to use 'import ReactComponent from ".svg"' instead?

Supporting Information

Please provide other information which led to this error, and any specific questions you have about it:

At the very least, a link to this GitHub repository would be good to have. Otherwise how will people know to send you issues? 😄

I'd also like to add a Twitter link to https://twitter.com/mattpocockuk/ for credit.

Maybe this is a limitation in how typescript emits errors for range errors on a tuple type but I just ran into this and had to fix a package that was expecting a tuple of two strings but the library actually takes an array of numbers instead. This was the type

colors?: [string, string];

And when I had defined the prop like this

colors={[secondaryColor[500], secondaryColor[400], secondaryColor[200]]}

I get a few Typescript errors that don't properly describe the problem

This is one that once I realized what was going on makes sense

Type 'string' is not assignable to type 'undefined'.

Which means it expected everything after the first two props to be undefined and I gave it a string

This error makes more sense but still could be more descriptive

Type 'number[]' is not assignable to type '[string, string]'.

Basically it would be great if a more descriptive error was shown for a range error related to a tuple type, something like...

"Expected a tuple of [string, string] but you gave [string, string, string]"

Or

"Tuple type expected two arguments but received three"

I love this so much.

I'm wondering if there's a way for non-vscode users to get access to this amazing work. Any ideas?

Error Text

Parameter cannot have question mark and initializer.

Supporting Information

Please provide other information which led to this error, and any specific questions you have about it:

I'm infinitely getting this error every time after installing this package.

[error] Cannot read properties of undefined (reading 'filter'): TypeError: Cannot read properties of undefined (reading 'filter')
    at updateDiagnostics (~/.vscode/extensions/mattpocock.ts-error-translator-0.8.0/out/extension.js:62005:36)
    at ~/.vscode/extensions/mattpocock.ts-error-translator-0.8.0/out/extension.js:62026:13
    at d.invoke (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:145)
    at w.deliver (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:2029)
    at g.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:1667)
    at P.$acceptModelChanged (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:96:11193)
    at u.N (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:11208)
    at u.M (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:10926)
    at u.H (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:10019)
    at u.G (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:9000)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:7788
    at d.invoke (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:145)
    at w.deliver (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:2029)
    at g.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:1667)
    at h.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:72:14314)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:120:15804
    at d.invoke (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:145)
    at w.deliver (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:2029)
    at g.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:1667)
    at h.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:72:14314)
    at c.y (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:72:17324)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:72:15795
    at d.invoke (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:145)
    at w.deliver (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:2029)
    at g.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:63:1667)
    at g.acceptChunk (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:72:12045)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:72:11332
    at Socket.l (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:72:19792)
    at Socket.emit (node:events:526:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Here's my VSCode information

Version: 1.74.2 (Universal)
Commit: e8a3071ea4344d9d48ef8a4df2c097372b0c5161
Date: 2022-12-20T10:26:09.430Z
Electron: 19.1.8
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Darwin arm64 21.6.0
Sandboxed: No

Let me know what else I should provide :D

It would be interesting if there was an markdown file explaining how to contribute to the project web/vscode extension.

Hi there, I'm using VS Code 1.71.2 on Arch Linux.

Unfortunately I'm not getting any translated errors, I have checked the errors and they have translations here: https://ts-error-translator.vercel.app/.

I have tried reinstalling the extension, and noticed the Runtime status is "Not yet activated".

The language of my file is identified as "typescriptreact" and so should trigger activation as far as I can tell.

Is there any additional steps I need to do? Or is this a bug? I'm happy to share logs if you tell me from where.

Error Text

Operator '+' cannot be applied to types 'boolean' and 'boolean'.

Supporting Information

Please provide other information which led to this error, and any specific questions you have about it:

I've noticed that you've added a script in apps/vscode to bundle the errors into one Gigantic JSON file which will eventually be shipped with the extension.

And then you read this file which will eventually be Gigantic in src/extension.ts as the following:

import * as bundleErrors from "./bundleErrors.json";

That is probably going to be problematic in the future, cause the entire JSON file is loaded into memory as a static item that lives till the program exits.

That means that first of all, the extension startup is gonna be relatively slow cause It has to read the entire JSON file which is a lot of I/O, and then parse the content.

Secondly, the parsed JSON data is held in memory for the program's lifetime even though the user just needs a few fields from it at a particular time(avg. ~ 10).

It's best to stick to the previous workflow of just reading/parsing files only when needed (Ex: 1006.md & 1009.md) cause It does have a lot of advantages:

• Faster startup.
• Less I/O operations.
• Less memory usage.
• When you read a file say 1006.md and parse Its content and pass it to vscode to show it to the user, the held memory for that parsed file content will be automatically cleaned up by the garbage collector at the end of each loop iteration cause It's not a static item as if you use an import statement.

currently, the hover popup in vs code has a lot of extra whitespace covering other code:

what i'm suggesting that the TLDR should be on one/two lines:

basically just use less space for the tldr. we're not talking about how long that mockup took me 😓

Error Text

The left-hand side of an assignment expression must be a variable or a property access.

Supporting Information

Please provide other information which led to this error, and any specific questions you have about it:

Devcontainers is a simple way to lower the barrier for contributors. It helps to run a pre-defined dev environment as a docker container. The integration with VSCode is seamless.

Hi 👋

So, these lines of code:

let [, ...items] = matchElem.match(nonGlobalRegex)!;
items = Array.from(new Set(items));

I think this can be a mistake and probably there could be a better way to do it.
For example TS2345 states this Property '{0}' is missing in type '{1}'. but .. {0} and {1} can be the same value:

Property 'User' is missing in type 'User'.

Which results on:

You haven't passed all the required parameters to '{1}' - you've missed out User

There are a bunch of these kind of diagnostics where several args could be different .. but also refer to either the same type or a different type / property with the same name.

I don't yet have an idea how it could be solved, just opening an issue to track it.
Raw first thought (not a solution, just the first thing I typed after finding the issue haha):

> i = "{0} is {1} but {0}"
'{0} is {1} but {0}'
> i.match(/(?<Arg>{\d})/g)
[ '{0}', '{1}', '{0}' ]

When enabling the extension, a blue wavy underline appears under all types. I presume its point show the developer that they can hover this type, but it it's unnecessary and adds to the clutter.

VSCode provides quick fixes, it would be cool to see if this extension could translate the quick fixes so you know what it did to fix the error.

When using VScode online, in a service like https://gitpod.io (Dev environment in the cloud), you cannot access Microsoft's VSCode extensions marketplace.

There's an open-source alternative for that - https://open-vsx.org/about

Would you be willing to publish your wonderful extension there, so more people can use it?

Instructions here -
https://github.com/eclipse/openvsx/wiki/Publishing-Extensions

Please let me know if you have any questions.

Error Text

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ transparent: string; black: string; white: string; ink: string; base: ThemeColorSchema; primary: ThemeColorSchema; secondary: ThemeColorSchema; ... 4 more ...; disabled: ThemeColorSchema; }'.

Supporting Information

Please provide other information which led to this error, and any specific questions you have about it:

Would be highly appreciated :)

Error Text

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Supporting Information

Please provide other information which led to this error, and any specific questions you have about it:

As an user, I would expect the tooltip to automatically update when clicking on "Mark as learned", either update to "Unmark as learned" (+ changing colour?) or even disappearing from the tooltip.

I'm not familiar with VSCode Extensions API, but I guess this is possible.

I don't know if the present behaviour is a bug or a feature, but as a first time user this has surprised me.

Error Text

Unable to resolve signature of property decorator when called as an expression.

Supporting Information

Please provide other information which led to this error, and any specific questions you have about it: