Hey Folks! 🌟 Let's dive into the world of Typescript and break down some tech jargon. If you're eager to kickstart your journey with Typescript, this blog is just for you! 🚀
Typescript Unveiled 🕵️♂️
So, what's Typescript all about? It's a static type language and also a superset of JavaScript. Let's unravel some key points:
It's a compiled language, meaning it gets transpiled into an ES version of JavaScript. Basically, the final outcome is good ol' JavaScript.
The main gig of Typescript? Improving the developer experience!
It's your superhero against those pesky errors, catching them early in the game. Focus more on your logic and less on wrestling with undefined and console errors. Nice, huh? 😎
const name: string = "Dheeraj"
Not too different from JavaScript, right? In Typescript, we define types for variables using the colon syntax. So, const variable: type = value.
In JavaScript:
const name = "Dheeraj"
The type of name would be the type of the value, which is String.
Main Types 🧐
Now, let's explore the main types in Typescript:
primitive - types
// string type
const language: string = "English"
// number type
const height: number = 6
// Boolean type
const isIndian: boolean = true
Whether it's an integer or a floating-point number, we use the number type to denote it.
non-primitive - types
// array
const numbers: number[] = [10, 20, 30]
const names: string[] = ["ram", "krishna", "hari"]
// object
const properties: object = {
"key": "value"
}
In array type declaration, number[] denotes that this array will contain data of number type, and the same goes for strings.
Functions - (return type and void)
// function declaration
function double(x: number): number {
return x * 2
}
// function void
function process(): void {
doSomething();
}
// arrow function
const double1 = (x: number): number => x * 2
For function declaration, we can define the type for the parameter x: number and the function return type function double(): number{}, and the same goes for arrow functions. If the function doesn't return anything, you can assign void type to it.
Tuples
// tuples
const variousData: [string, number, boolean] = ["ram", 108, true]
const personData: [string, number] = ["krishna", 16]
When you have different data values in an array, you can use tuples to assign types.
// Generic Types
const languages: Array<string> = ["javascript", "python", "java"]
This is an alternative way to write types, known as the generic one. It's the same as writing languages: string[].
Types - Any, Never, Undefined, Null 🤔
// any
const something: any = []
let marks: any = 500
marks = "five hundred"
Mostly, you'll see any used to bypass Typescript warnings, but as you grow, you'll realize how Typescript boosts developer efficiency.
// never
const fruits = []
If you hover over the fruits variable, it will show never. This indicates either the developer forgot to add the type or did something wrong. We defined the array, but what about the values inside?
// null
const nothing: null = null
// undefined
const notAssigned: undefined = undefined
And that wraps up our Typescript journey for today! 🚀 This blog is a reflection of my current Typescript learning, tailored for someone looking to kickstart their Typescript adventure without feeling overwhelmed by tech jargon. Have a fantastic day! 😃