# Introduction

* Superset of Javascript
* Compiles to plain JavaScript
* Strongly Typed
* Class based Object-Oriantation

## References

Handbook - <http://www.typescriptlang.org/Handbook>

Playground - <http://www.typescriptlang.org/Playground>

Typescript Demo with Webpack - <https://github.com/hesing/typescript-webpack-demo>

## Install Typescript

```
// Install node js 1st
npm install typescript -g
```

## Using Typescript

```
// just simple
tsc test.ts

// watch changes
tsc test.ts -w

// change output filename
tsc myfile.ts myoutput.js

// compile multiple ts file in one shot
tsc a.ts b.ts --out myoutput.js
```

## Typescript compiltation with Sublime Text 3

install `TypeScript` plugin using sublime package manager. use `Ctrl + B` to compile typescript file.

![ts build](https://3405273326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7_vQwVFSod3RRvW_7f%2Fsync%2F5d4a9266a8e34c5c33bd5754f1a0795957eed894.png?generation=1589774258318961\&alt=media)

it also help in code completion...

![code completion](https://3405273326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7_vQwVFSod3RRvW_7f%2Fsync%2Fb2b9729fdce5ad568e287f579d084430166b69b2.png?generation=1589774257271805\&alt=media)

Also you want to install sublime text 3 `tslint` to get immediate error notification.

## Typescript compiltation with Webpack

```
npm install ts-loader --save-dev
```

in webpack.config.js include `ts-loader` ...

```javascript
module.exports = {  
  entry: './app.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}
```

now we can use typescript like below\...

```javascript
require('../tssample/test.js');
or
require('../tssample/test.ts');
```