TypeScript tutorials, self-taught learning, ... Starting from the bottom, now you're here.

• 1.1. How to run examples
• 1.2. What is TypeScript
• 1.3. Installing and using TypeScript
• 1.4. IDE
• 1.5. Lite-server
• 1.6. Types
  • 1.6.1. Core types
  • 1.6.2. Type inference
• 1.7. Troubleshooting data types
• 1.8. Configuring the Typescript compiler
  • 1.8.1. Watch
  • 1.8.2. Several files to watch/compile
  • 1.8.3. Sourcemaps
• 1.9. Next gen Javascript
• 1.10. Classes and interfaces
  • 1.10.1. Object-oriented Programming
  • 1.10.2. Access modifiers
  • 1.10.3. Keywords
  • 1.10.4. Interfaces
    • 1.10.4.1. Why
• 1.11. Generics
  • 1.11.1. Constraints
• 1.12. Decorators
  • 1.12.1. Factory decorators
  • 1.12.2. Validators
• 1.13. Webpack
  • 1.13.1. Why
    • 1.13.1.1. "Normal" setup
    • 1.13.1.2. With Webpack
  • 1.13.2. Dependencies and settings

TypeScript Course for Beginners 2021: https://www.youtube.com/watch?v=BwuLxPH8IDs

1.1. How to run examples

tl;dr

# In a first shell
npm install   # install the dependencies
npm start     # start the local server with live reload (open a new browser tab)

# In another shell
# Found the example you want to try and copy/paste its content into app.ts
npm run compile:watch

# The browser shows the result (you may need to open your dev console (F12))!

1.2. What is TypeScript

• Youtube timecode: https://youtu.be/BwuLxPH8IDs?t=118
• TypeScript = JavaScript superset
• TypeScript is compiled to JavaScript
• In JavaScript, developers can still write invalid code (simple example: '2' + '3' = '23' instead of '5')
• TypeScript is a tool that helps developers write better code (but only helps during development, i.e. before the code gets compiled)
• JavaScript uses "dynamic types", TypeScript uses "static types"
• TypeScript helps during development while JavaScript checks should help during runtime

1.3. Installing and using TypeScript

• Youtube timecode: https://youtu.be/BwuLxPH8IDs?t=391
• Official website: TypeScript - Download TypeScript
• Prerequisites: Node.js + npm installed (+ node_modules/bin folder added to your system PATH)

npm install -g typescript

• Compile *.ts files with the command

cd examples/B-typescript-basics
tsc using-ts.ts

• Convert a string parameter num1 to a number one as +num1 (not in method signature)
• TypeScript add
  • types
  • next-gen JavaScript features (compiled down for older platforms/browsers)
  • non-JavaScript features like interfaces or generic
  • meta-programming features like decorators
  • much configuration options
  • modern tooling that helps even in non-TypeScript projects

1.4. IDE

• Visual Studio Code: https://code.visualstudio.com/download
• Extensions:
  • Eslint: dbaeumer.vscode-eslint
  • Path intellisense: christian-kohler.path-intellisense
  • Prettier: esbenp.prettier-vscode

1.5. Lite-server

Allow live reload of the .js files

npm install --save-dev lite-sever

Add a new "start" npm script

{
  "scripts": {
    "start": "lite-server"
  }
}

Run the Lite server

npm start

Now, you just have to compile the .ts files to see the result into your browser without refreshing the page

1.6. Types

1.6.1. Core types

• number: integers, floats, negative integers (1, 5.3, -10)
• string: text values ('Hi', "Hi", Hi)
• boolean: true or false, no "truthy"/"falsy" values like 0
• object: {age: 30}, any JavaScript object, more specific types (type of object) are possible
• Array: [1, 2, 3], any JavaScript array, type can be flexible or strict (regarding the element types)
• Tuple: [1, 2], JavaScript array with fixed-length and fixed-type
  • When you know the exact length of an array and the exact datatype in advance then you might want to consider a tuple of an array to get even more strictness into your app
• Enum: enum {NEW, OLD}, automatically enumerated global constant identifiers (can be [upper/lower]case)
• Any: *, any kind of value, no specific type assignment (avoid Any whenever possible)
  • The compiler can't check anything, the Any datatype takes away all advantages TypeScript gives you

1.6.2. Type inference

TypeScript does not need to get the type of a const when setting it, the "TypeScript type inference" feature will understand which type is a certain variable, constant.

const number1 = 5; // 5 is a number so number1 is a number constant
const myStr = "hello world"; // 'hello-world' is a string so myStr is a string constant
const isReady = true; // true is a boolean so isReady is a boolean constant

Datatype shouldn't be added if the value is set but it could if we don't initialize it immediately

// Correct
let number1;

// Better
let number1: number;

// Wrong: break the inferred type: Type "'5'" is not assignable to "number"
let number2: number;
number2 = "5";

1.7. Troubleshooting data types

• Duplicate function implementation ts(2393) warning from the IDE: the filename.ts and filename.js are both open, close the filename.js file tab
• Type "'5'" is not assignable to "number" error means we're breaking the inferred type of a constant/variable

1.8. Configuring the Typescript compiler

1.8.1. Watch

To prevent running manually the compiler after each file change, use the --watch flag

tsc app.ts --watch

1.8.2. Several files to watch/compile

If you have several files to watch and compile, init a Typescript config file

tsc --init

1.8.3. Sourcemaps

Sourcemaps allow to "map" the *.ts files to their *.js dist file. It improves debugging on important project by allowing to debug *.ts files directly into the dev console's debugger.

In the tsconfig.json file, enable the "sourceMap" option

{
  "compilerOptions": {
    // ...
    "sourceMap": true /* Create source map files for emitted JavaScript files. */
    // ...
  }
}

1.9. Next gen Javascript

Resources:

• ECMAScript 6 compatibility table

1.10. Classes and interfaces

1.10.1. Object-oriented Programming

• Objects
  • The things you work with in code
  • Instances of classes (= based on classes)
  • Class-based creation is an alternative to using object literals
• Classes
  • Blueprints for objects (theoretical definition)
  • Define how objects look like, which properties and methods they have
  • Classes make creation of multiple, similar objects much easier

1.10.2. Access modifiers

Access modifiers can be used for properties and methods and set the accessibility of resources by other classes.

• public
  • Default access modifier
  • Accessible from any other classes
• private
  • Accessible only by the current class
  • Not accessible by the inheriting classes
• protected
  • Accessible by the current class and its inheriting classes only

1.10.3. Keywords

• static
  • Property or method which can be used without instantiate an instance of the class
• abstract
  • Force inheriting classes to implement the property or method to specialized its behavior
• readonly
  • Prevent the property to be mutate after its initialization

1.10.4. Interfaces

Interfaces are almost the same that the custom types usage but the interfaces leads to a clearer readability. An interface can implements and extends several interfaces while classes can only extends one another class.

A major difference between interfaces and abstract classes is that interfaces do not implement methods, it only provide the signatures.

Interfaces can't be instantiated and are not compiled. Using union types or arbitrary types are not a valid use-case for interfaces.

1.10.4.1. Why

We want to insure that a class has a set of methods and we want TypeScript to check methods existence.

1.11. Generics

Generics are a fundamental feature of statically-typed languages, allowing developers to pass types as parameters to another type, function, or other structure. When a developer makes their component a generic component, they give that component the ability to accept and enforce typing that is passed in when the component is used, which improves code flexibility, makes components reusable, and removes duplication.

Source

The Generics allow to inform TypeScript about the type of a property to complete the inference of the property and have a better TypeScript support while being as flexible as possible.

Utility types documentation: https://www.typescriptlang.org/docs/handbook/utility-types.html

1.11.1. Constraints

While being flexible, Generics could also integrates Javascript silent errors and generate unexpected behavior. Check the working Generics constraints example

1.12. Decorators

A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

Source

1.12.1. Factory decorators

Factory decorators are a way to customize how the decorator is applied to a declaration.

Documentation: typescriptlang.org

1.12.2. Validators

Decorators can be used to validate data too. Have a look to the working example.

Available class validators: typestack/class-validator

1.13. Webpack

Webpack is a static module bundler for Javascript applications. It builds a dependency graph which maps every module the project needs and generates one ore more bundles.

Documentation: Webpack concepts

1.13.1. Why

1.13.1.1. "Normal" setup

• Multiple .ts files and imports thru HTTP requests
• Unoptimized code (not as small as possible)
• "External" development server needed (lite-server to reload our website whenever we perform a change)

1.13.1.2. With Webpack

• Code bundles, less imports required Optimized (minified) code, less code to download More builds steeps can be added easily

1.13.2. Dependencies and settings

For a new Node.js project using TypeScript and Webpack, install the following modules

npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

In the tsconfig.json

• compilerOptions.target: "es5" or "es6"
• compilerOptions.module: "es2015" or "es6"
• compilerOptions.outDir: "./dist"
• compilerOptions.sourceMap: "true"

Add a webpack.config.js file to the root of the project. It will be the development config file.

In the code files, do not precise the import files extension aka .js

In the index.html, change

<script src="dist/app.js" defer></script>

to

<script src="dist/bundle.js" defer></script>

In the package.json, update the scripts

{
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "build:prod": "webpack --config webpack.config.prod.js"
  }
}

Add another webpack.config.prod.js file to the root of the project. It will be the production config file.