> For the complete documentation index, see [llms.txt](https://hemantajax-2.gitbook.io/javascript-step-by-step/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hemantajax-2.gitbook.io/javascript-step-by-step/master.md).

# Introduction

Most popular programming language on the web.

## Agenda

### Types

### Interface

### Class

### Module

### Function

### Generics

## References

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

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

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

## Insatll Typescript

```
npm install typescript -g
```

## Using Typescript

```
tsc myfile.ts myoutput.js

// compile multiple ts file in one shot
tsc 1.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](/files/-M7_vf4uPP5VEk4VgMKT)

it also help in code completion...

![code completion](/files/-M7_vf4vzAT0JLCmniQe)

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');
```