Introduction to TypeScript

What
is
TypeScript?

TS = Babel + Types

What
is a
Transpiler?

JS built-in types

null
undefined
boolean
number
string
object*
symbol (ES6)
Array*

* very customizable in TypeScript

type of

typeof "text";
// string

null

undefined

let a = null;
console.log(a);
// null

There are two features of null you should understand:

null is an empty or non-existent value.
null must be assigned.

https://codeburst.io/javascript-null-vs-undefined-20f955215a2

Undefined most typically means a variable has been declared, but not defined.

You can also explicitly set a variable to equal undefined:

let b;
console.log(b);
// undefined

var d = {};
console.log(d.fake);
// undefined

var u = undefined;

boolean (binary)

true or false

1 or 0

let a = true;
console.log(a);
// true

let b = 1;
console.log(b);
// 1

console.log(a == b);
// true

console.log(a === b);
// false

let c = false;
console.log(c);
// false

let c = 0;
console.log(d);
// 0

console.log(c == d);
// true

console.log(c === d);
// false

let a = true;
typeof a;
// boolean

let b = 1;
typeof b;
// number

number

integer, float

let a = 123;
typeof a;
// number

let b = 12.3;
typeof b;
// number

console.log(a > b);
// true

let c = "123";
typeof c;
// string

let d = "12.3";
typeof d;
// string

console.log(c > d);
// true

string (text)

anything between quotes (", ', `)

let a = "John";
typeof a;
// string

let b = 'Doe';
typeof b;
// string

console.log(a + b);
// 'JohnDoe'

console.log(a + " " + b);
// 'John Doe'

let a = `John`;
typeof a;
// string

let b = `Doe`;
typeof b;
// string

console.log(`${a} ${b}`);
// 'John Doe'

typeof `123.00`;
// string

` (back-ticks)

object

let person = {
  firstName: "John",
  lastName: "Doe"
};

typeof person;
// object

typeof person.firstName;
// string

typeof window;
// object

typeof document;
// object

function / class*

var hello = (name) => {
  return `hello ${name}`;
}

typeof hello;
// function

class Calculator {
  sum = (a, b) => a + b
}

typeof Calculator;
// function

*syntax sugar for functions

symbol (ES6)

var a = Symbol('example');
typeof a
// Symbol(example)

Symbol('foo') === Symbol('foo');
// false

primitive data type

array (collection)

let mixed = Array(1, 2, 'text', {name: 'John'})
// mixed = [1, 2, 'text', {name: 'John'}] // same

typeof mixed
// object

Array.isArray(mixed)
// true

typeof mixed[0];
// number

typeof mixed[2];
// string

typeof mixed[3];
// object

typeof mixed[4];
// undefined

JavaScript syntax

let user = "John Doe"

declaration

set

value

name

TypeScript syntax

let user: string = "John Doe"