TypeScript Essential Training

Lynda.com video by Jess Chadwick

Notes

  1. TypeScript is a superset of the JavaScript programming language
    • adds the concepts of static typing
  2. Dynamic vs Static Languages
    • Dynamic languages allow for Duck-Typing
    • Static requires explicit definitions of attributes and methods
      • enables pre-run error catching
  3. Typescript allows you to use static typing when you want; and, to tell it use dynamic when you want
  4. Javascript Transpiler --> converts your code into fully compliant ECMAScript X code

Install TypeScript and useful commands

  1. Install via command line:
sudo npm install -g typescript
  1. Transpile a ts to a js file
tsc ./app.ts
  1. Transpile a ts to a js file and listen for changes without having to reload website
tsc -w ./app.ts
  1. Make a tsconfig.json file to setup environment options:
tsconfig.json

{
    "compilerOptoins": {
        "target": "es5"
    }
}
  1. When the transpiler starts (tsc) it looks for this tsconfig.json in the root folder, if it finds it, it treats the whole folder and all children as one big project and automatically applies the configurations
  2. Now we can simple type:
tsc -w

and the tsc will watch all files and auto transpile on the fly

TypeScript Free Online Editor

  1. www.typescriptlang.org/Playground
  2. Lite-server - to install:
sudo npm install -g lite-server
  • allows for the server to listen to changes on website so that you do not have to keep hitting refresh

ECMAScript 6 Language Features

  1. Optional Parameters - allows for a default parameter to be used if an optional one is not passed in
function countdown(initial, final = 0, interval = 1) {}
  1. Template strings
var displayName = `Todo #${todo.id}`;
<i class="${ todo.completed ? "": "hidden" }
  1. Let and const
    • let respects block scope
    • const - initialize variable and never let it change
  2. For...of loops
for (var value of array) {
    console.log(`${value}`);
}
  1. Lambdas
    • => functions, need to learn more about this
  2. destructing
var array = [123, "Pick up drycleaning", false];
var [id, title, completed] = array;

OR

var a = 1;
var b = 5;

[a,b] = [b,a];

OR

function countdown({
    initial,
    final: final = 0,
    interval: interval = 1,
    initial: current
    }) {}

  1. spread operator
    spread operator is a variable prefixed by three ...
  2. computer properties

Static Type Support

ECMAScript 5 Types:

  • boolean
  • number
  • string
  • null / undefined
  • object

JavaScript Functions
JavaScript Arrays

Object Literal - define and instantiate an object literal

TypeScript will infer a properties type through static analysis

Any Type - the most unrestrictive and dynamic type of them all

Union Types - A way to allow each argument to allow one or the other type of argument x: (string | any[])

Type gaurd syntax

if ( x instance of Array ) {
    x.push('abc');
}

Overloaded Functions - TypeScript supports overloaded functions, but not in the same way as other languages

Custom TypeScript Types

Interfaces

  1. interface - acts as a contract that describes the data and behaviors for others to interact with
    • syntax: interface Todo {}
  2. Interfaces are not converted to js. They are only used during compile and not at run time
interface Todo {
  name: string;
  completed?: boolean;
}

var todo: Todo = {
  name: 'Pick up drycleaning'
};
  • the ? in the interface property completed, means that the completed boolean is optional, however, if present, it must be boolean
  1. Interfaces can also have method signatures

Classes

  1. Classes
class TodoService {

    static lastID: number = 0;
    
    constructor(private todos: Todo[]) {}
    
    add(todo: Todo) {
        var newId = TodoService.getNextId();
    }
    
    getAll() {
        return this.todos;
    }
    
    static getNextId() {
        return TodoService.lastId += 1;
    }
}
  1. Abstract Base Classes - add abstract to front of class or method

  2. Access Modifiers - TypeScript provides three access modifiers:

    • private: most restricted, only methods defined on this class may access it
    • public: can be accessed by any other type (default)
    • protected: middle, only methods on this class inherited or extended

Enums

  1. Enums - a way to define a set of meaningful and constant values that you can use to replace the magic strings and numbers that you would otherwise use. Example
enum TodoState {
    New = 1,
    Active,
    Complete,
    Deleted
}

Additional Notes

  1. Anonymous Type - You can declare interfaces right inline anywhere that accepts a type
function totalLength(x: { (property) length: number }, y: { length: number}): number {
    var total: number = x.length + y.length;
    return total;
}
  1. The most common way that JavaScript assigns a prototype to an object is with a constructor (new). When you initialize an object with the (new) keyword, JavaScript does three things:
    • creates a new object
    • sets the new object's prototype to the constructor function's prototype
    • executes the function that you called with the new keyword, referring to the new object as this within that method

Generics

  1. Generics - are a way to create functions and classes that define behavior that can be reused across many different types while retaining the full information about that type
function clone<T>(value: T): T {
    let serialized = JSON.stringify(value);
    return JSON.parse(serialized);
}

Modules

  1. Putting all of your code in the Global namespace is BAD
    • encourages implicit sharing between components
    • difficult to determine component boundaries
    • difficult to determine component dependencies

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Immediately Invoked Function Expression

  1. IIFE for short, popular pattern to encapsulate code while it executes and then choose which parts of the code will be exposed to the rest of the world by specifying them as the return value, simple syntax:

    • 1st, create a normal function
    • 2nd, follow the function with a set of parentheses
    • 3rd, wrap the function in a set of parenthesis
    • 4th, pass an object into the function that the function may refer to
  2. A TypeScript namespace is really syntactic sugar for an IFFE

  3. Things declared in a namespace are private unless you explicitly expose them via export

External Module Approach

  1. External Module - file as scope
  2. also, must be exported
  3. TypeScript offers two Module Import Syntaxes:
    • Requrie (like Node.js)
    • ECMAScript 2015 (ECMAScript standard)
  4. To use external modules, you must add the "module" setting to the tsconfig.json -- any will work, maybe "system"
  5. ECMAScript 2015 syntax - import * as Model from './model';
    • import { Todo as TodoTask, TodoState } from './model';
  6. System.js module loader - attempts to implement the proposed ECMAScript specification
  7. Remove all your script imports and simply load the module loader via two methods:
  8. Might have to include a special statement:
<script type="text/javascript>
    System.defaultJSExtensions = true;
    System.import('app')
</script>

Random Notes

  1. Use declare to setup a var that only is used by Typescript...for example to reference an external non TypeScript, third party library OR
  2. Use a declaration file by, adding "declaration": true to the tsconfig.json

Debugging

  1. add "sourceMap": true to the tsconfig.json file to debug in TypeScript

Decorators

  1. decorators are a proposed ECMAScript syntax that allow you to implement the decorator design pattern to modify the behavior of a class, method, property, or parameter in a declarative fashion
TypeScript Essential Training
Share this