Learn TypeScript Basics in 2 days

Install TypeScript and TSLint

1
$ npm install -g typescript tslint

Compile ts files on changes

1
$ tsc -w

Use VisualStudioCode

Basics

View day2.ts file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
// Data types in TypeScript
let a: boolean = false;
let b: number = 42;
let c: string = "Helo";
let d: any = "this is anything but not `never`"
let e: never; // Can not assign to never type

// Function Interface
let f: Function = function f() {};

// Ommit data type (TypeScript auto detect it if it can)
let g = "YOLO, Who needs type ?"

// Array or Collections
let h: number[] = [1,2,3]; // Short syntax
let i: Array<number> = [4,5,6]; // Array type

// Emum
enum Gender { MALE, FEMALE } // Start from MALE = 0
let gender: Gender = Gender.FEMALE;
enum Ranking { FIRST = 1, SECOND, THIRD } // Specify a custom start number
let ranking: Ranking = Ranking.SECOND; // 2
enum OrderStatus { WAITING = "waiting", PROCESSING = "processing", COMPLETED = "completed"}
let orderStatus : OrderStatus = OrderStatus.PROCESSING; // processing

// Typehint on parameters and returned value
function sum(a: number, b: number): number {
return a + b;
}

// void : mean no returning a value
function hello(name: string): void {
console.log("Hello " + name);
}

// Fat arrow
let func1 = (x: number) => { return x * 2; } // return type inferred
let func2 = (x: number) : number => { return x * 2; } // explicit return type
let func3 = (x: number) => x * 2; // return type inferred without braces

// Interface : contract for properties, methods of class
interface Field {
name: string;
data_type: string;
}
interface Model {
name: string; // property
primary_key?: string; // ? marked for optional
fields: Array<Field>; // Nested another interface
save(): Model; // return itself
}

// Object implements interface
let userModel: Model = {
name: "user",
fields: [
{ name: "id", data_type: "number"},
{ name: "username", data_type: "string"},
{ name: "password", data_type: "string"},
],
save: function () {
return this;
}
}

// Interface for function
interface EasingFunction {
(currentTime: number, startValue: number, endValue: number, duration: number): number
}

let cubicEasing: EasingFunction;
cubicEasing = function(currentTime: number, startValue: number, endValue: number, duration: number): number {
const t = currentTime / duration;
const distance = endValue - startValue;
return distance*t*t*t + startValue;
}

// Short interface for function
let f5: (x: number) => void = (x: number) => { console.log(x) }
f5(123);
let f6 = (x: number) => { console.log(x) }
f6(456);
let f7 = () => { console.log('Inferred interface') }
f7();

// Classes
class Point {
// property
x: number;

constructor(x: number, public y: number = 0) { // can declare "y" in constructor
this.x = x;
}

// method
dist(): number { return Math.sqrt(this.x * this.x + this.y * this.y); }

// static
static origin = new Point(0, 0);
}

let p1: Point = new Point(1, 2); // (1; 2)
let p2: Point = new Point(10); // (10; 0)

class Point3D extends Point {
constructor(x: number, public y: number = 0, public z: number = 0) {
super(x, y); // overide constructor must use `super`
}

dist(): number {
const d = super.dist();
return Math.sqrt(d * d + this.z * this.z);
}

static origin = new Point3D(0, 0, 0);
}

// Module
module Database {
export class Connection {
user: string;
passwd: string;

constructor(
user: string,
passwd: string,
public host: string = "127.0.0.1",
public port: number = 3306
) {
this.user = user;
this.passwd = passwd;
}
connect(): void {
// do something to connect
}
}
}

const dbConnection = new Database.Connection("root", "hardtoguessme");
dbConnection.connect();

// Generics
class List<T> {
protected items: T[] = [];
push(item: T) {
this.items.push(item);
}
}

const listOfPoint = new List<Point>();
listOfPoint.push(new Point(1, 4));
listOfPoint.push(Point.origin);

// String Interpolation with Template Strings
let myName: string = "KhanhIceTea";
let helloString = `Hello ${myName},
how is it going ? :))`; // Multiline is supported
console.log(helloString);

// WELL DONE
console.log("Well done !!!! WELCOME TO TYPESCRIPT !!!");

Learn Webpack Basics in 2 days

Introduction

Learn from https://webpack.js.org/guides/getting-started/

Clone my repo to follow commit hash by section : https://github.com/khanhicetea/learn-n-earn

Day 1 , <51ede10>

webpack.config.js

1
2
3
4
5
6
7
8
9
const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

Bash

1
$ ./node_modules/.bin/webpack --config webpack.config.js

Learned

  • entry : start point to dive in dependency graph.
  • output : output after pack the web modules
    • filename : bundle filename
    • path : dist path

Day 2

Import assets , <07591ed>

  • CSS file : use style-loader and css-loader
  • Image file : use file-loader
  • WebFont file : use file-loader
  • Data file use json-loader, xml-loader or csv-loader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.(png|jpe?g|gif|webp)$/,
use: [
'file-loader'
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}

Dynamic output and entry ,

entry config can be a dictionary where key is entry name and value is entry file path
output.filename could use [name] in syntax to generate dynamic output filename

1
2
3
4
5
6
7
8
9
10
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

HtmlWebpackPlugin

HtmlWebpackPlugin by default will generate its own index.html file, even though we already have one in the dist/ folder

1
npm install html-webpack-plugin --save-dev

Cleaning /dist folder

To clean up dist folder automatically !

1
npm install clean-webpack-plugin --save-dev
1
2
3
4
5
6
const CleanWebpackPlugin = require('clean-webpack-plugin');

...
plugins: [
new HtmlWebpackPlugin(['dist']),
],

Development

Source map , <4eea0dc>

To enable source map for js and css file, use inline-source-map option in devtool config

1
2
3
4
5
...
devtool: 'inline-source-map',
plugins: [
...
],

ONLY USE THIS OPTION FOR DEVELOPMENT MODE

Development server (watch file changes) ,

  • watch mode : add option --watch to webpack cli run command
  • webpack-dev-server : use npm package webpack-dev-server and add devServer: { contentBase: './dist' } to webpack config, when start a dev server use another command instead webpack-dev-server --open
  • express webpack-dev-middleware : use webpack-dev-middleware as Express middleware

Ready for production , <1ddcee3>

Tree shaking

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export.

1
$ npm install --save-dev uglifyjs-webpack-plugin
1
2
3
4
5
6
7
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

...
plugins: [
...
new UglifyJSPlugin(),
]

ONLY USE IN PRODUCTION WEBPACK CONFIG

Setup multi environments ,

1
$ npm install --save-dev webpack-merge

webpack.common.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new HtmlWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

webpack.dev.js

1
2
3
4
5
6
7
8
9
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});

webpack.prod.js

1
2
3
4
5
6
7
8
9
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(common, {
plugins: [
new UglifyJSPlugin()
]
});

package.json

1
2
3
4
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack-dev-server --open --config webpack.dev.js"
}

Run command

  • npm run dev : running dev server with hot reload
  • npm run build : build production dist

Specify the Environment

Many libraries will key off the process.env.NODE_ENV variable to determine what should be included in the library. We can use webpack’s built in DefinePlugin to define this variable for all our dependencies

webpack.prod.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(common, {
plugins: [
new UglifyJSPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
]
});