TypeScript Lesson #1 - Installing and using

What is TypeScript, and why u need it? TypeScript is a jаvascript plugin what extends default typization. Thats can helps, when u have big team or big project. Because crooked programmers will be able to make fewer mistakes. TypeScript will create a model for variable, object and classes. That will prevent change variable type, like from numeric to string, add readonly variables, add models for object data. But before i will explain all, we need to install typescript.

Let's starts.

Install TypeScript

If u try to learn TypeScript, i think u know all about npm, and how to install packages. 

U will have two ways to install TypeScript:

1. From npm - typescript - npm (npmjs.com)

2. From official site- TypeScript: How to set up TypeScript (typescriptlang.org)

Ill recommend install with node

npm i typescript -g

After installing create new file, 1.ts anywhere. And write in this file: 

const valera: string = "is name?"

After in terminal:

tsc 1.ts

Thats command will compile our 1.ts (TypeScript) file, into 1.js. If all ok, go next.

As u can see, after compiling, 1.js have no code of typescript. TypeScript working only like preprocessor, like sass or stylus, but for JS. 

With command tsc <filename> u can compile ts files. But if u using webpack or gulp, u can use their plugins for do that:

1. gulp-typescript - npm (npmjs.com)

2. TypeScript | webpack

Webpack TypeScript config:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Ofc u need to install ts-loader. npm i ts-loader

Gulp typescript config:

var gulp = require('gulp');
var ts = require('gulp-typescript');
 
gulp.task('default', function () {
    return gulp.src('src/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            outFile: 'output.js'
        }))
        .pipe(gulp.dest('built/local'));
});

For this one u need npm i gulp-typescript

---

If all done let's go to next lesson.