TypeScript... what is it?

What is TypeScript?

It is a programming language that can be used as an alternative to Javascript. It is basically a superset of Javascript, meaning it extends the features of Javascript and syntax.

• by default, browsers do not understand typescript. Meaning when we write typescript, we have to compile it into javascript in order for browsers to understand it.
• Typescript speeds up your development experience by catching errors and providing fixes before you even run your code
• Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly
• It is entirely Open Source

What are some interesting features of typescript?

• Allows use of strict types - once variables are declared to be a certain type, they cannot be changed later on in that variable. This makes error checking and debugging easy. Contrary Javascript uses dynamic types
• Supports modern es6 features such as arrow functions, let, const, destructuring etc...
• Includes extra features that don't appear in Javascript such as generics, interfaces, tuples and more

What should I know before diving into TypeScript?
It is recommended that you have a basic understanding:

• Javascript
• Asynchronous functions
• javascript classes
• DOM and DOM tree

Some other tools you may need:

• nodeJS
• a text editor. Personally I use VsCode(has built-in typescript support).
• typescript compiler installed.
• some patience. Typescript may take a while to grasp.

How to install TypeScript

You can install TypeScript via npm

npm install -g typescript

To compile typescript we use

npx tsc <file-name>

A little about typescript

Declaring primitive types in TypeScript

// explicit types
let character: string;
let age: number;
let isLoggedIn: boolean;

Declaring arrays

// arrays
let avengers: string[];

when initializing empty arrays, it is necessary to use = [] if we intend to use array methods like push

let avengers: string[] = [];
// this should work
avengers.push('Captain America');

Union types - using union types, we basically define that a variable may have one of two or three types.

We initialize types like:

// union types
let mixed: (string | number | boolean)[] = [];
// any of these should work
mixed.push('hello');
mixed.push(20);
mixed.push(false);

we can also initialize primitive union types. notice that we dont place the parantheses like we did for the array.

let uid: string | number;

objects

// objects
let firstAvenger: object;
// you could declare an object
firstAvenger = { name: 'Steve Rogers', alias: 'Captain America', age: 102 };
// or you could declare an array
firstAvenger = [];

You can further define properties types

let secondAvenger: {
    name: string,
    alias: string,
    age: number,
}

Dynamic types - we define dynamic types using "any". This may be useful when you don't know what type a variable will be. (not recommended, could lead to bugs)

// Dynamic types
let userAge: any = 25;

// this could also work
userAge = true;
console.log(userAge);
// this too
userAge = 'Kiki';
console.log(userAge);

let hero: { name: any, home: any };
hero = { name: 'kharioki', home: 'westlands' };

Functions -

// Functions
let greet: Function;

// then
greet = () => console.log('Waaaaassssuuuppp!!!');

you can define a function that takes optional parameters- you add the ? symbol after the parameter that is optional. (remember to always put the required parameters first and optional parameters last).

const add = (a: number, b: number, c?: number| string) => console.log(a+b);

add(5, 10);

A function in typescript returns void when we do not have a return value, e.g.

const add = (a: number, b: number, c?: number | string): void => console.log(a + b);

Aliases

when we need to reuse type definitions, we can use aliases to avoid repetition
you can define aliases as shown below:

// aliases
type StringOrNum = string | number;
type objWithName = { name: string, uid: StringOrNum };

and then use the aliases like so:

// using the alias
const deets = (uid: StringOrNum, item: string) => console.log(`${item} has a uid of ${uid}`);

const sayHi = (user: objWithName) => console.log(`${user.name} says hello`);

Function signatures

basically describes the general structure of a function i.e. what arguements it takes in and what type of data it returns.

// Function signatures
let holla: (a: string, b: string) => void;
let calc: (a: number, b: number, c?: string) => number;

using function signatures

holla = (name: string, msg: string) => console.log(`${name} says ${msg}`);
calc = (num1: number, num2: number, action: string) => {
  if(action === 'add'){
    return num1 + num2;
  } else {
    return num1 - num2;
  }
}

Okay, this is getting quite long, so let's end it here.
If you'd like to check out more implementation of Typescript, specifically DOM manipulation, Type casting, modules, interfaces, make sure to check out this repo. It shows a simple implementation of TypeScript in a web app.