microsoft / microsoft/monaco-editor

Type Checking in JS File allows invalid JavaScript

Open
#2,496 6 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

feature-request typescript
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

monaco-editor version: Latest
Browser: Chrome
OS: Windows
Playground code that reproduces the issue: Extending Language Services > Configuring JavaScript Defaults

(Set noSemanticValidation to false on line 8)

// Add additonal d.ts files to the JavaScript language service and change.
// Also change the default compilation options.
// The sample below shows how a class Facts is declared and introduced
// to the system and how the compiler is told to use ES6 (target=2).

// validation settings
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
	noSemanticValidation: false,
	noSyntaxValidation: false
});

// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
	target: monaco.languages.typescript.ScriptTarget.ES6,
	allowNonTsExtensions: true
});

// extra libraries
var libSource = [
	'declare class Facts {',
	'    /**',
	'     * Returns the next fact',
	'     */',
	'    static next():string',
	'}',
].join('\n');
var libUri = 'ts:filename/facts.d.ts';
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
// When resolving definitions and references, the editor will try to use created models.
// Creating a model for the library allows "peek definition/references" commands to work with the library.
monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));

var jsCode = [
	'"use strict";',
	'',
	'class Chuck {',
	'    greet() {',
	'        return Facts.next();',
	'    }',
	'}'
].join('\n');

monaco.editor.create(document.getElementById('container'), {
	value: jsCode,
	language: 'javascript'
});

In this editor, the language is set to javascript and semantic validation is turned on for type checking. (Equivalent to // @ts-check in VSCode).

Since the compiler is TypeScript, it allows any valid TypeScript, which can be invalid JavaScript.

Take the following code block for example:

let x = 10;
x.nonExistantMethod();

let y: any = 20;

type MyType = string;

Expected Behaviour (from VSCode)

let x = 10;
x.nonExistantMethod(); // Error: Property 'nonExistantMethod' does not exist on type 'number'.

let y: any = 20; // Error: Type annotations can only be used in TypeScript files.

type MyType = string; // Error: Type aliases can only be used in TypeScript files.

Actual Behaviour (in playground)

let x = 10;
x.nonExistantMethod(); // Error: Property 'nonExistantMethod' does not exist on type 'number'.

let y: any = 20; // No Error

type MyType = string; // No Error

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.