Richard G Richard G - 7 months ago 34
TypeScript Question

How to setup VSCode to show typescript error inline

I'm trying to migrate an ES6 project to typescript. This is my first attempt at writing a typescript module in NodeJS.

It seems to work better in Angular-CLI so far.

I've got it compiling using command line

tsc
, but I'm not sure how to display errors and intellisense in the code editor?

In a directory I have the two files shown below. When it compiles it, as expected throws a compile error:
Supplied parameters do not match any signature of cal
l target.
. This is fine.

But VSCode is not showing any errors in the editor, even if I make a deliberate syntax error like taking out a bracket, or type errors like this one. How do I get VSCode to show inline syntax or compiler errors in the editor for .ts files?

validation-error.ts

/**
* Wrapper for a particular validation error.
*/
export class ValidationError extends Error {
private type: string;

constructor(error: any) {
super(error);
Error.captureStackTrace(this, this.constructor);
this.message = error.message;
this.type = 'ValidationError';
}
}


Then I'm trying to write simple spec to test out the workflow:

validation-error.spec.ts

import { ValidationError } from './validation-error';
import * as should from 'should';

describe('Validation Error', () => {
it('should create a new instance', () => {
const instance = new ValidationError();
should.exist(instance);
});
});


Edited Here:



I'm still plugging away at this - I've setup
tsc
to run automatically with this job in
tasks.json
:

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"taskName": "tsc",
"command": "tsc",
"isShellCommand": true,
"args": ["-w", "-p", "."],
"problemMatcher": "$tsc-watch",
"echoCommand": true
}


I suspect that if the errors were reported properly using
$tsc-watch
, the error would probably also show up in the editor. When I run the task I get output like:

running command$ tsc -w -p .
src/hello.ts(15,1): error TS2346: Supplied parameters do not match any signature of call target.
4:24:40 PM - Compilation complete. Watching for file changes.


But there are no problems reported in the
Problems
view - even though clearly there's a compiler issue.

Got the
$tsc-watch
setting from this page of the docs: https://code.visualstudio.com/docs/editor/tasks

Answer Source

Even without having installed TypeScript locally or globally, the following setup provides inline errors.

C:/temp
  index.ts
  tsconfig.json

index.ts

let x: number;
x = "foo";

tsconfig.json

{ }

Here is a screenshot that shows the inline error in x.

enter image description here

Please try that setup and report back on what happens.