Install TypeScript compiler
To setup TypeScript on your computer, you need to setup
node.js with
npm. There is a good article, which will help you to do that, please find it using following link:
Installing Node.js and updating npm.
We just installed node.js and updated npm. So we are ready to install TypeScript on your computer. If you want you can install the latest build of TypeScript. To do that you have to run following command:
npm install -g typescript@next
Although you have the possibility to install nightly builds, I would recommend installing the latest stable version of the language. To do that type following command in cmd.exe and hit enter:
npm install -g typescript
Install Visual Studio Code with extensions
An extensible linter for the TypeScript language. TSLint supports:
- custom lint rules
- custom formatters (failure reporters)
- inline disabling / enabling of rules
- configuration presets (tslint:latest, tslint-react, etc.) & composition
To install TSLint extension: Open Visual Studio Code → Navigate to Extensions tab on left sidebar → Type 'TsLint' in search text-box → Install extension.
To make extension work you need to install tslint globally. To do that run in cmd.exe tool the command:
npm install -g tslint
Gulp Snippets
We are going to use Gulp to compile our TypeScript code, so let's install Visual Studio Code extension to help us with Gulp syntax.
Open Visual Studio Code → Navigate to Extensions tab on left sidebar → Type 'Gulp Snippets' in search text-box → Install extension.
Creating the project
First of all, you need to create the project folder. I will create mine with the name "TypeScriptBlog". Create the folder and open it in cmd.exe tool. Now we need to create package.json file. To do that run in cmd.exe command:
cd path/to/project
npm init
Open created folder in Visual Studio Code and check created file. It should contain something like this:
{
"name": "typescriptblog",
"version": "1.0.0",
"description": "Blog engine written on TypeScript",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT"
}
We are now ready to install the third party dependencies:
npm install --save-dev typescript
npm install --save-dev tslint
npm install --save-dev gulp
npm install --save-dev gulp-tslint
npm install --save-dev gulp-typescript
Compiling the project
Create gulpfile.js in the project's folder and copy following content to it:
var gulp = require("gulp"),
tslint = require("gulp-tslint"),
tsc = require("gulp-typescript");
var tsProject = tsc.createProject("tsconfig.json");
gulp.task("build-app", function () {
return gulp.src([
"app/**/**.ts"
])
.pipe(tsc(tsProject))
.js.pipe(gulp.dest("app/"));
});
gulp.task('watch', function() {
gulp.watch("app/**/**.ts", ['build-app']);
});
Create tsconfig.json file and copy following content to it:
{
"compilerOptions": {
"sourceMap": true
}
}
Now we can build our application. Press
Ctrl + Shift + P in Visual Studio Code → Type "Run Task" → run "
build-app" task. If you want to rebuild your code each time when any file changed, execute task with name "
watch".
To test that the Gulp is working you can use following files. Create app folder in the root folder and add files to app folder.
greeter.ts
class Greeter {
constructor(public greeting: string) { }
greet() {
return "<h1>" + this.greeting + "</h1>";
}
};
var greeter = new Greeter("Hello, world!");
document.body.innerHTML = greeter.greet();
greeter.html
<!DOCTYPE html>
<html>
<head><title> TypeScript Greeter </title></head>
<body>
<script src='greeter.js'></script>
</body>
</html>
Project structure
Linting the project
Earlier we installed all necessary tools for linting. Now it is time to configure them. Open cmd.exe and execute command:
cd path/to/project
tslint --init
After that you can find that
tslint.json file was added to the solution. This file contains default linting settings, if you would like to extend or change them, please use
https://palantir.github.io/tslint/rules/ for more info.
One more thing what we can do. We want
tslint be executed using
Gulp, so open
gulpfile.js file and add the following code to it:
gulp.task("lint", function () {
return gulp.src([
"app/**/**.ts"
])
.pipe(tslint({
formatter: "verbose"
}))
.pipe(tslint.report())
});
If 'lint' task does not appear in the task list, restart Visual Studio Code and try again.
Сonclusion
Now we know how to setup Visual Studio Code with TypeScript. With this article, I open a cycle of articles about TypeScript, in which we are going to create blog engine written on TypeScript. All the code you can find under repository
https://github.com/aliakseimaniuk/TypescriptBlog.
