Home > Development Tools > VSCode > Configuring TypeScript automatic compilation in VSCode

Configuring TypeScript automatic compilation in VSCode

青灯夜游
Release: 2021-11-02 09:31:29
forward
4381 people have browsed it

Configuring TypeScript automatic compilation in VSCode

Related recommendations: "vscode tutorial"

Install the TypeScript compiler

Visual Studio Code includes TypeScript language support, but The TypeScript compiler tsc is not included. You need to install the TypeScript compiler globally or in your workspace to convert TypeScript source code to JavaScript (tsc HelloWorld.ts).

The easiest way to install TypeScript is through npm, the Node.js package manager, -g means global installation.

Installation

npm install -g typescript
Copy after login

Check version - version information will be output if the installation is successful

tsc --version
Copy after login
xm@xm-Vostro-3670:~/project$ tsc --version
Version 3.3.3333
Copy after login

Create a new HelloWorld folder and hello_world.ts File

mkdir HelloWorld
Copy after login
const text:string = 'hello world';
console.log(text);
Copy after login

Configuring TypeScript automatic compilation in VSCode

##New Tsconfig.json

{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "outDir": "out",
      "sourceMap": true
  }
}
Copy after login

New task

Tenimal->Run Task

Configuring TypeScript automatic compilation in VSCode

Select

tsc:build-tsconfig.json

Configuring TypeScript automatic compilation in VSCode##Configuration completed

Press

F5

found that there is an additional

out

folder in the directory. The configuration is "outDir": "out",DEBUG CONSOLE Output hello world.

Configuring TypeScript automatic compilation in VSCodeModify

text

Save pressF5

Configuring TypeScript automatic compilation in VSCodeMore For programming related knowledge, please visit:

programming video

! !

The above is the detailed content of Configuring TypeScript automatic compilation in VSCode. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:juejin.im
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template