DEV Community 👩‍💻👨‍💻

Cover image for TypeScript: Intro to JavaScript's mature younger brother
Hunt Navar
Hunt Navar

Posted on

TypeScript: Intro to JavaScript's mature younger brother

If you are familiar with JavaScript, then you are probably familiar with the surplus of small errors that come while coding it.
What if I were to tell you there was a way to code and avoid many of these errors? If you are unfamiliar with TypeScript you would most likely think I was lying.

TypeScript is the older brother of JavaScript, and as its name implies; there are types present within the language. Being the oddball mature younger brother the language is stricter than its sibling JavaScript.

To start a type can be declared as any with the any flag.

let anyType: any = 23
Enter fullscreen mode Exit fullscreen mode

Unfortunately, this defeats the point of TypeScript as there is no real check.

A better use of TypeScript would be to declare a type like so:

let numberType: number = 23
Enter fullscreen mode Exit fullscreen mode

This would force a type of number onto our variable and would not allow the variable to be redeclared. While this seems trivial declaring types can be done for every single JavaScript data type.

This would allow for function parameters and return values to be declared. For example:

function exponentiate(x: number, y: number) : string {
return Math.pow(x, y).toString();
} 
Enter fullscreen mode Exit fullscreen mode

In this instance we declared our parameters both as numbers and our return value as a string.

By having to do this pre-emptively, many mistakes are avoided due to fully thinking our function out and not writing spaghetti code.

The last piece of TypeScript I want to talk about are interfaces.

An interface allows for object class types to be created.
It also prevents objects from having incorrect data being passed in.

interface Person {
first: string;
last: string;
[key: string]: any
}
Enter fullscreen mode Exit fullscreen mode

Notice the difference in the syntax compared to an object.
This would force an object with a Person interface to be forced to have a first and last name with string.

Utilizing the interface for an object would look like this:

const person: Person = {
first: "Hunt",
last: "Navar",
fast: true
}
Enter fullscreen mode Exit fullscreen mode

This allows for first and last names to be forced but the fast parameter is optional!

I hope you learned something about JavaScript's brother. Use your new found powers for good!

Thanks for reading!

Top comments (5)

Collapse
 
lukeshiru profile image
Luke Shiru

A better use of TypeScript would be to declare a type like so:
const numberType: number = 23

A better use yet, is to not use a types when TS can infer them:

const numberType = 23; // inferred as type `number`
Enter fullscreen mode Exit fullscreen mode

Same applies to the example function you provided, no need to type the output, it's inferred:

function exponentiate(x: number, y: number) {
    return Math.pow(x, y).toString(); // inferred type `string`
}
Enter fullscreen mode Exit fullscreen mode

Also consider that TS supports modern JS, so instead of doing Math.pow(x, y).toString() you can do:

const exponentiate = (x: number, y: number) => `${x ** y}`;
Enter fullscreen mode Exit fullscreen mode

An interface allows for object class types to be created.

Not quite. Interfaces allow you to do "duck typing" or "structural subtyping", so you're describing the "shape" of a type. You can also use type instead of interface. Also you should avoid any, unknown is a better type for when you don't actually know the type of something:

type Person = {
    first: string;
    last: string;
};

const person: Person = {
    first: "Hunt",
    last: "Navar",
    fast: true
};
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
 
kibranoz profile image
Kibranoz

Typescript is not JS older brother, it was made after it as it is a superset of JavaScript

Collapse
 
ipreda profile image
Iulian Preda • Edited on

It's more of a more mature younger brother

Collapse
 
hnavar profile image
Hunt Navar

You are thinking too literally and didnt understand my analogy!

Collapse
 
hnavar profile image
Hunt Navar

you didnt get my analogy!

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.