Rashi Chouksey

Typescript Made Easy

June 10, 2022

Index

  • Introduction
  • Why Typescript?
  • Typescript For JavaScript Programmer
  • Types Of Typescript

1. Introduction

  • Typescript is the JavaScript with the syntax of its types.
  • Typescript is a strongly typed programming language Useful: In programming, we call a language loosely typed when you don’t have to explicitly specify types of variables and objects. A strongly typed language on the contrary wants types specified.
  • Typescript is completely built on  JavaScript.

2. Why Typescript?

JavaScript is already a very popular language and it is one of the best script languages so why do we use typescript instead of typescript? So, let’s discuss why you should prefer typescript over JavaScript.

  • Typescript helps us to find out bugs before we run the program so we can say typescript is more reliable than JavaScript.
  • Typescript is preferably used for large projects for its strongly typed programming language behavior.

3. Typescript For JavaScript Programmer

In this section we will go through some of the similarities and differences between JavaScript and typescript as this will be help programmers who have familiarity with JavaScript or came from JavaScript background.

Types By Interface


let helloWorld = "Hello World"; –1
let helloWorld: string  –2

Typescript automatically assigns a type to the variable from the JavaScript code.

Defining Types

In simple JavaScript code, we can define an object like this without an issue.

const user = {
 name: "Hayes",
 id: 0,
};

Using typescript Interface type we can create objects like this

interface User {
 name: string;
 id: number;
}

And can use it as given below

const user: User = {
 name: "Hayes",
 id: 0,
};

And typescript will throw error accordingly as given below

interface User {
 name: string;
 id: number;
}
 
const user: User = {
 username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.
Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.
 id: 0,
};

I hope you get some idea about how the typescript works and if you like to dig into the similarities and differences between typescript and JavaScript you can go through the reference given below.
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

Let’s move to the next topic….

4. Types Of Typescript

As I assumed you all are familiar with the JavaScript types string, number, Boolean, object, undefined, null, function, and BigInt types. These all types are available in the typescript language as well but as we have studied from the above topics typescript is known for its strongly typed nature so we expect more types from our typescript so let’s study a few everyday types….

The Primitive types:- string = “string value”, number = 123 and Boolean = true or false.

Arrays:- Syntax: To represent [1,2,3] we can write in typescript number[],string[](Represent array with text).

Any:- When you do not want to type check from typescript and you know that what you writing is do not required type check. Syntax: let obj: any = { x: 0 };

Function:- Function is the primary source to pass the parameters and typescript allows you to set the type for both the input and output values.

For parameter type annotations
// Parameter type annotation
function greet(name: string) {
 
  console.log("Hello, " + name.toUpperCase() + "!!");
}
 
For return type annotations
function getFavoriteNumber(): number {
 return 26;
}

Object Type:- To define an object we just list its properties for example:

// The parameter's type annotation is an object type
function printCoord(pt: { x: number; y: number }) {
 console.log("The coordinate's x value is " + pt.x);
 console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

To add optional properties in the object the syntax:

function printName(obj: { first: string; last?: string }) {
 // ...
}
// Both OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

Union Type:- Typescript allows us to use different types of operators to combine types that we just read above. For example using union type we can combine multiple types of checks.

function printId(id: number | string) {
 console.log("Your ID is: " + id);
}
// OK
printId(101);
// OK
printId("202");

Note:
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
Go through this link to study these types deeply and understand the typescript.

Tags:

Share

You may also like...