What the f*** is TypeScript?

What is TypeScript?

As the TypeScript site says, TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor.

When to use it?

TypeScript was built to be used in projects where we want to be sure about the data we are receiving, this gives us the advantage to know if we are receiving the right parameters.

Why should i use it?

Let's a lot of different reasons to use it, but i would say that you should use cause your code will improve a lot, having the errors right in your editor giving the advantage of always knowing the data you want to receive. Also when you are desctructuring an object it will tell you if what you are desctructuring exists.

Type in Variables

When we declare a variable, we can optionally add a type annotation to explicitly specify the type of the variable

let first: string = 'Test'

Type in Functions

Functions are the primary means of passing data around in JavaScript. TypeScript allows us to specify the types of both input and output values of functions.

function hey(name: string){
  return 'Hey, ' + name + '!'
 }

function getMyNumber(): number {
 return 22
}

Object and optional propierties

When we are using TypeScript we will face a parameter for example that will receive an object and we will want to make sure to have the right paramaters.

function myName(obj:{first: string, last?: string}){
 return obj
}
myName({first:'Lautaro'});
myName({first:'Lautaro', last: 'Suarez'});

As we can see on the above code we are using a question mark on the 'last' and that's because we are saying that parameter is optional to be passed, so that way we do not an error if the parameter is not passed.

Type Aliases and Interfaces

Exists different ways of type, i've showed you how to write type annotations but i will show you how to make it reusable and cleaner.
Let's start with type alias

type Point = {
 x: number;
 y: number;
}

function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}

printCoord({ x: 100, y: 100 });

An interface declaration is another way to name an object type:

interface Point {
 x: number;
 y: number;
} 

function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}

printCoord({ x: 100, y: 100 });

Differences between Type Aliases and Interfaces

Type aliases and interfaces are very similar, and in many cases we can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

Extending an interface

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear() 
bear.name
bear.honey

Extending a type via intersections

type Animal = {
  name: string
}

type Bear = Animal & { 
  honey: boolean 
}

const bear = getBear();
bear.name;
bear.honey;

Adding new fields to an existing interface

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

A type cannot be changed after being created

type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

 // Error: Duplicate identifier 'Window'.

Literal Types

Literal types are exactly what they sound to be, are types that are literally what we will expect to receive.

function printText(s: string, alignment: "left" | "right" | "center") {
  // ...
}
printText("Hello, world", "left");
printText("G'day, mate", "centre");

Use 'any' to avoid getting frustrated

Let's talk about using 'any' when defining a type. It will basically gives the type any type of value which is basically like just using plain javascript. You can use it if you expect any type of value for a parameter for example even though it takes all the meaning of using TypeScript. I would recommend you to use if you are just starting to use TypeScript and you are feeling frustrated and just want to keep going with your project, it will not be the best use of TypeScript but it could work for you if you are just starting with TypeScript.

Conclusion

Nowadays most of new projects are using TypeScript so i would find really important to know how to learn it. It will improve your code quality and you will have less errors.

Hope someone found it useFul and i'm open to any suggestions about the post and happy to respond any questions you might have.

Lautaro.