Use Visual Studio Code to develop TypeScript

Use Visual Studio Code to develop TypeScript
Note:

Follow these steps to develop TypeScript on the Windows and OS X operating systems using Visual Studio Code.

Preface

To solve JavaScript: lack of object-oriented syntax, lack of errors during compilation, and so on. Microsoft provides an open-source TypeScript language that allows developers to write TypeScript program code using object-oriented language. Then, the program code is compiled into JavaScript program code through the TypeScript Compilation Program, you can build JavaScript program code that has passed the compilation check to provide platform usage.

This article describes how to use Visual Studio Code to develop TypeScript in Windows and OS X operating systems so that developers who have no budget to purchase related tools can, you can also learn the syntax of TypeScript. I mainly keep a record for myself and hope to help developers who need it.

Install Node. js

First, install Node. js. Later, you can use the NPM tool to install TypeScript Compiler. The Node. js installer can be downloaded from the Node. js official website.

• Https://nodejs.org/download/

Install TypeScript Compiler

After installing Node. js, you can use NPM to install TypeScript Compiler, and then compile TypeScript into JavaScript through this Compiler. Run the command prompt character (or terminal) and enter the following command to install TypeScript Compiler.

npm install -g typescript

Update TypeScript Compiler

Check the TypeScript Compiler installed in the previous step. The installed version is 1.4.1. However, because of the subsequent steps, you need to use the new features of version 1.5.0, so developers also use the command prompt character (or terminal), enter the following command to update TypeScript Compiler to version 1.5.0 or later.

npm update -g typescript

Remove environment variables (Windows only)

Some developers may have installed TypeScript-related tools on their computers. These tools Add the TypeScript Compiler installation path to the Windows environment variables. To uniformly use NPM to manage TypeScript Compiler versions, developers need to manually remove the installation path of TypeScript Compiler from the environment variable:

C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\

Install Visual Studio Code

After TypeScript Compiler is installed, install Visual Studio Code. Then, you can use Visual Studio Code to develop TypeScript program Code. The Visual Studio Code installer can be downloaded from the Visual Studio Code official website.

• Https://code.visualstudio.com/Download

Develop TypeScript to create a Workspace

After completing the installation steps, enable Visual Studio Code and select a folder as the working folder (Workspace) for developing TypeScript ).

Create tsconfig. json

Add a new file "tsconfig. json" to the Workspace and enter the following JSON settings parameters.

{    "compilerOptions": {        "target": "es5",        "noImplicitAny": false,        "module": "amd",        "removeComments": false,        "sourceMap": true    }}

Create. settings \ tasks. json

Add a new folder ". settings" In Workspace, add a new file "tasks. json" to the folder, and enter the following JSON setting parameters.

{    "version": "0.1.0",     "command": "tsc",    "isShellCommand": true,    "showOutput": "always",    "args": ["-p", "."],    "problemMatcher": "$tsc"}

Develop main. ts

After completing the preceding steps, add a new file "main. ts" to the Workspace and enter the following TypeScript program code.

class Greeter {    data: string;    constructor(data: string) {        this.data = data;    }    run() {        alert(this.data);         }}window.onload = () => {    var greeter = new Greeter("Clark");    greeter.run();};

Press the shortcut key Ctrl + Shift + B to view Visual Studio Code compiling TypeScript and output the corresponding JavaScript file: main. js.

var Greeter = (function () {    function Greeter(data) {        this.data = data;    }    Greeter.prototype.run = function () {        alert(this.data);    };    return Greeter;})();window.onload = function () {    var greeter = new Greeter("Clark");    greeter.run();};//# sourceMappingURL=main.js.map

Reference data

• Using TypeScript with Visual Studio Code on OSX-Michael Crump

Visual Studio Code simple trial

Visual Studio 2010 & Help Library Manager installation instructions

How to configure OpenCV 2.3.x/2.4.x in Visual Studio 2005/2008 and Visual Studio 2010

Use the opencv-2.4.0.exe file to compile the x86 or x64 platform Visual Studio 2005/2008/2010 target file

Visual Studio LightSwitch supports HTML5 and JavaScript

Visual Studio 11: use C ++ to develop a simplest Metro application

Visual Studio details: click here
Visual Studio: click here

This article permanently updates the link address: