Why my console does not shows types errors in typescript

Question

I recently started a vue3 project and decided to use TypeScript. Once I had studied some basics I intentionally made a typing mistake but no error appeared:

<script setup lang="ts">

interface Fichier {
  nom: string,
  taille: number,
  contenu: object,
  isLoaded: boolean,

}

let itv: Fichier = {
  nom: "Fichier 1",
  taille: 45,
  contenu: [],
  isLoaded: false,
  etat: []
}

console.log(itv)

I expected the console to show an error but nothing appears.

Answer 1

Judging by the <script> tag you're working in a browser.

Browsers don't run TypeScript. TypeScript needs to be transpiled to JavaScript to run in a browser.

To get a feel for the language without setting up a local environment you can try the TypeScript playground. Here's a link with the code you posted:

Playground

It clearly shows an error:

Another way is using an editor like VS Code, which shows errors immediately without transpiling to JavaScript.

Answer 2

In your case console.log should not throw an error, the compiler should throw an error and you should not be able to run the app. Probably something with your compiler is wrong if you are able to run the app.

I would not suggest that you add typescript in application like this:

<script setup lang="ts">

From what I can see you have been following the script setup from the official documentation which will not add a compiler to the IDE and will not prompt errors like you suggested. I would suggest you to:

To install and setup typescript compiler properly in order to work (see the last line for official documentation).

Install the TypeScript package:

npm install --save-dev typescript

Create a tsconfig.json file in your project:

npx tsc --init

Edit vue.config.js file to configure the TypeScript compiler:

 module.exports = {
  configureWebpack: {
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    }
  }
}

the picture below is example when you have proper typescript compiler (you will receive complilation error)

For full configuration please follow the official documentation: