Visual Studio Code Development typescript

[Tool] Using visual Studio code development typescript Note

You can use visual Studio code to develop typescript onWindows,os Xoperating systems, as per this procedure.

Objective

To resolve javascript: lack of object-oriented syntax, lack of compile-time error checking ... And so on. Microsoft provides an open-source typescript language that enables developers to write Typescript program code using object-oriented programming, and then compiles program code into JavaScript code through typescript compilers, will be able to build a compiled and checked JavaScript program code to provide platform use.

This article describes how to develop typescript in theWindows,os Xoperating system through the Visual Studio Code tool, so that developers who do not have the budget to purchase relevant tools can also learn the grammar of typescript. Keep a record for yourself, and hope to help developers in need.

Install node. js

To install node. JS First, you can use NPM as a tool to install Typescript Compiler. The node. JS Installer can be downloaded from the node. JS website.

• https://nodejs.org/download/

Installing the typescript Compiler installation typescript Compiler

After installing node. js, you can then use NPM to install Typescript Compiler, which can then be compiled into JavaScript through this Compiler. The developer uses the command prompt character (or terminal) to complete the installation of the Typescript compiler by entering the following instructions.

npm install -g typescript

Update Typescript Compiler

Viewing the typescript Compiler installed in the previous step, you will find that the installed version is 1.4.1. However, because of the next steps, you need to use the new feature to 1.5.0, so the developer also uses the command prompt character (or terminal), enter the following instructions to update typescript compiler to 1.5.0.

npm update -g typescript

Remove environment variables (Windows only)

Some developers ' computers may have previously installed typescript related tools that add typescript compiler installation paths to Windows environment variables. To unify the use of NPM to manage the version of Typescript compiler, developers need to manually remove the Typescript compiler installation path from the environment variable:

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

Install Visual Studio Code

After installing Typescript Compiler, install Visual Studio Code, and then you can develop Typescript program code through Visual Studio code. The installation program for Visual Studio code can be downloaded from the Visual Studio Code website.

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

Development Typescript Build Workspace

After completing the installation steps, open visual Studio Code and choose a folder to be the working folder (Workspace) for development typescript.

Establish Tsconfig.json

Next, add a new file "tsconfig.json" in workspace and enter the following JSON setting parameters.

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

Established. Settings\tasks.json

Come again in Workspace add a new folder ".settings", and add a new file to this folder "tasks.json", and then enter the following JSON setting parameters.

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

Development Main.ts

After completing the above steps, add a new file "main.ts" in 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();
};

Finally press the shortcut key "ctrl+shift+b", you can see the visual Studio code compiled 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 Development typescript