DEV Community

Tony Kharioki
Tony Kharioki

Posted on

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
Enter fullscreen mode Exit fullscreen mode

To compile typescript we use

npx tsc <file-name>
Enter fullscreen mode Exit fullscreen mode

A little about typescript

Declaring primitive types in TypeScript

// explicit types
let character: string;
let age: number;
let isLoggedIn: boolean;
Enter fullscreen mode Exit fullscreen mode

Declaring arrays

// arrays
let avengers: string[];
Enter fullscreen mode Exit fullscreen mode

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');

Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

let uid: string | number;
Enter fullscreen mode Exit fullscreen mode

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 = [];
Enter fullscreen mode Exit fullscreen mode

You can further define properties types

let secondAvenger: {
    name: string,
    alias: string,
    age: number,
}
Enter fullscreen mode Exit fullscreen mode

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' };
Enter fullscreen mode Exit fullscreen mode

Functions -

// Functions
let greet: Function;

// then
greet = () => console.log('Waaaaassssuuuppp!!!');
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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`);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)