Skip to content

arhmAli/typescript-notes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 

Repository files navigation

TypeScript Crash course by Arham khan ❤

Installation Guide

  1. Install Node.js:
    TypeScript requires Node.js. If you don't have it installed, download and install Node.js from the official website: https://nodejs.org/
  2. Install TypeScript using npm:
    Once Node.js is installed, open your terminal or command prompt and run the following command to install TypeScript globally on your system:
    npm install -g typescript
    The -g flag ensures that TypeScript is installed globally, making it accessible from any directory in your system.
  3. Verify TypeScript Installation:
    After the installation is complete, you can check the TypeScript version to ensure it was installed successfully. Run the following command:
    tsc --version
    This will display the version number of TypeScript installed on your system.
  4. Create a TypeScript File:
    Now that TypeScript is installed, let's create a simple TypeScript file. Create a new file with a .ts extension, for example, app.ts.
  5. Write TypeScript Code:
    Open the app.ts file in a code editor and add the following TypeScript code:
    function greet(name: string) {
      console.log(`Hello, ${name}!`);
    }
    

    let personName: string = "Arham"; greet(personName);

    In this example, we have a function greet that takes a name parameter of type string and logs a greeting to the console.
  6. Compile TypeScript to JavaScript:
    TypeScript code needs to be compiled to JavaScript before it can be executed in the browser or Node.js. Run the following command to compile the app.ts file:
    tsc app.ts
    This will create a new file called app.js, which contains the JavaScript code generated from your TypeScript code.
  7. Run the JavaScript Code:
    You can now run the generated JavaScript code using Node.js:
    node app.js
    The output should be:
    Hello, Arham!

Congratulations! You've successfully installed TypeScript and run your first TypeScript program.

Statically Typed Language

It is a statically typed language.

We have to explicitly tell the type of data, for example:

let firstValue:number=5;

We can also give a type to one variable to another, for example:

let someVar=10;
let newVar:someVar=123;

This will check the type of data stored in someVar and then assign that to newVar.

ANY Type

The following example will take any type and convert it into the specified type:

let something:any=100;
let anotherOne=something as number;
OR
let anotherOne=<number>something;

Arrays

We can declare arrays with a specific type:

let arr:string[]=["hello","world","string_type"];
OR
let arr:Array<string>=["hello","world","string_type"];

Tuples

Tuples hold multiple data just like arrays, but they can have different types of data:

let tup:[string,string,number]=["typescript","learning",10];

We can also make an array of tuples:

let arrOfTup:[number,string][]=[[5,"bannaa"],[10,"apples"]];

Functions

We can declare the inputs and specify the type of outputs needed as a return from the function:

function sum(firstNum:number,secNum:number):number{
  return firstNum+secNum;
}

If we don't want to return anything from a function, we can use void:

function noReturn(firstNum:number,secNum:number):void{
  //this shouldn't return anything
}

ENUM

This allows us to declare constants with numeric or string values:

enum bookCategories{
  history, // by default it is given 0
  numOfBooks, // by default it is given 1
  numOfShelves // by default it is given 2
}

We can also specify the numbers in the enum:

enum meatStock{
  chicken=100,
  mutton=20,
  beef // NOTICE THAT BEEF DOES NOT HAVE ANY VALUE, SO IT WILL OBTAIN THE NEXT INDEX OF THE PREVIOUSLY DEFINED VALUE, IN THIS CASE 21
}

We can also make combinations of strings and numbers in an enum without any problems.

INTERFACE

This defines a specific structure for an object:

interface videoRequest{
  id:number,
  title:string,
  comments:string,
  likes:number,
  dislikes?:number, // The ? indicates that it can either have dislikes or not
  readonly username:string // This indicates that it can only be assigned when initialized
}

Releases

No releases published

Packages

No packages published