DEV Community: Himanshu Khaitan

Setting Up a Typescript Project using NPM

Himanshu Khaitan — Wed, 09 Feb 2022 15:36:09 +0000

Let's first know what is NPM?

NPM is a JavaScript Package Manager. It is a software registry with over 800,000 code packages. It is absolutely free to use.

❗❗❗In the tutorial below, I will assume that your system has a Nodejs version >=16.13.1 installed in it. If not, you can download it from here ❗❗❗

Setting Up the Project

I will use command line and vs-code to setup this project. You may use any code editor of your choice.

Step 1 ➡️ Create the Project Folder

Run this command in the terminal to create the project folder named project1.

❗❗Project name depends on your choice. I have taken it to be project1.



mkdir project1

Step 2 ➡️ Change the Project Directory

Now jump into the project directory you just created. Command will vary on the name chosen by you in last step.



cd project1

Step 3 ➡️ Create Source Code Folder

To separate source code from the compiled code we need to create two separate folders. Following the convention I am taking their names as src and build.



mkdir src

Step 4 ➡️ Create Build Folder

This folder will contain all the compiled code in the same file hierarchy as your source code.



mkdir build

📂 File System after above commands



-  project1
  -  build
  -  src

Step 5 ➡️ Install TypeScript on your system

Before initialize the typescript project we need to install Typescript using NPM



npm install -g typescript

The command will install TypeScript globally on your system. You have to run this command only once.

❗❗❗You can also install it for a specific project by following command



npm install typescript --save-dev

⚠️⚠️This command must be ran in the root folder. In this case project1

Step 6 ➡️ Initialize TypeScript Project

To initialize a TypeScript Project we need to run the init command in root directory



tsc --init

This will create a tsconfig.json file in the root directory.

After this, we need to tell our typescript compiler about the src and build directory

Let's first have a look at `tsconfig.json` file



{
  "compilerOptions": {


    "target": "es2016",                                  

    "module": "commonjs",                               
    // "rootDir": "./",                                  


    // "outDir": "./",                                   

    "strict": true,                                      
    "skipLibCheck": true                                 
  }
}

⚠️⚠️ Above is the small portion of tsconfig.json file.

Step 7 ➡️ Configure TypeScript Config File

We need to update two options rootDir and outDir to achieve the above.



{
  "compilerOptions": {


    "target": "es2016",                                 

    "module": "commonjs",                                
    "rootDir": "./src",                                  


    "outDir": "./build",                                  

    "strict": true,                                      
    "skipLibCheck": true                                 
  }
}

✅ We have updated the output Directory and Input Directory for the compiler.

To run the compiler all you have to do is run



tsc -w

tsc

in the root directory and your build is ready.

tsc -w will keep looking for changes in the typescript files and update the build accordingly

Want to read about Type Annotations and Inference in TypeScript ❓

Type Annotations and Inference in Typescript

Himanshu Khaitan ・ Feb 4 '22

#typescript #beginners #tutorial #javascript

Step 8 ➡️ Optional Step ❗❗

To keep the development smooth we can optimize out project setup.

Step: 1 ➡️ Initialize NPM



npm init -y

Above command will create a package.json file in the root directory

Step: 2 ➡️ Installing Required Packages



npm install -g nodemon

Above command will install nodemon globally on your computer. Nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected hence making development smoother.



npm install concurrently

Concurrently helps in running multiple scripts simultaneously.

Step: 3 ➡️ Creating index.ts in src 📂



cd ./src



touch index.ts

Above commands will create a index.ts file in the src directory.

Step: 4 ➡️ Configuring `package.json`

With nodemon and concurrently installed in our project, we can edit script option in json file.



{
"scripts": {
    "start:build": "tsc -w",
    "start:run": "nodemon build/index.js",
    "start": "concurrently npm:start:*"
  }
}

Phew❗We are done. With the above command you can start with the development with the below command.



npm run start

You are good to go.

Any Suggestions, Reviews, Ideas, Help Requests or positive criticism are welcome. I will love to connect.

Thanks for reading the Blog. Hope you found it Helpful

himakhaitan / himakhaitan

Happily Turning Coffee into Code☕💻. The repository is a quick overview of my current skills and commits🌱

I write code, build communities, and unravel data mysteries.

Who is Himanshu Khaitan ❓

🚀 Hey there, I'm Himanshu – a budding Data Analyst and a freelance Software Developer trying to make lives easier through code. I am currently building Karmic Crew - A platform for beginners. I'm all ears for discussions and casual chats. Let's connect and exchange ideas!

⚡ Stuff I Know

- Profile Visits -

Happily turning coffee into code!✅

View on GitHub

My self Himanshu Khaitan, a Freelance Web Developer. You can connect with me here. 😍

You can follow me on Twitter or connect with me on LinkedIn 🔗

You can ping me for help on my Discord Server here.

Evident Audit - A community that builds

Himanshu Khaitan — Wed, 09 Feb 2022 09:18:38 +0000

Community at your service

One of the marvelous things about community is that it enables us to welcome and help people in a way we couldn't as individuals. - Jean Vanier

Why wait? Join here

We got you covered in every possible way

We got a lot of things inside our server
➡️ Learn with peers
➡️ Ask doubts
➡️ Solve doubts of other members (if possible)
➡️ Discuss Ideas
➡️ Get all the tech updates
➡️ Network with people across the globe
➡️ Find Opportunities
➡️ Community Discussions
➡️ Music Adda
➡️ Movie Nights
➡️ Participate in Tech and Fun Events

Why wait? Join here

You can follow us on Twitter here

Want to be a part of Open Source join our GitHub organization here

Happy to have you onboard

Type Annotations and Inference in Typescript

Himanshu Khaitan — Fri, 04 Feb 2022 20:04:46 +0000

Let's first see what Types are in Typescript.

Types are the easy way to refer the different properties and functions available to a value in the Typescript Code.

For eg: A vehicle of type Bike had certain properties such as two wheels whereas a vehicle of type Car has four wheels in general.

Type Annotations

It is the code we add to the Typescript to make the compiler aware of the type of values variable will refer to.

let age : number = 20;
let name: string = "Himanshu";
let isAdult: boolean = true;

In the example above, we explicitly tell the typescript compiler that the variable age will be of type number, name will be of type string and isAdult would be of type boolean.

Type Annotations for Variables

let likes : number = 100;
let title: string = "Type Annotations and Inference"
let isPublished : boolean = true;

In the above case, we as a developer have explicitly told the types of TypeScript Compiler. It's not recommended to do this as Type Inference is capable to infer they types of variables which are declared and intialized in same expression.

Type Annotations for Arrays

let skills: string[] = ["DSA", "Graphic Design", "Web Dev"];

Here we let TypeScript Compiler know that skills will be an Array consisting of strings.

Type Annotations for Functions

const add = (a: number; b: number) : string => {
   return `${a + b}`
}

For the function add we have defined a and b as parameters of type number and the return type as string.

Syntax is a bit confusing but easy to get hands on it.

Custom Type Annotations

interface Book {
 name: string;
 copies: number;
 publishedOn: Date;
}

let book1: Book = { name: "Do or Die", copies: 100, publishedOn: Date.now() };

let author: {name: string; likes: number};

author = {name: "Naval", likes: 100};

In the above written snippet there are two cases

-> Using Interface

In this, we defined a custom data type Book which has name, publishedOn and copies as it's properties and assigned it to book1 variable.

-> Inline Definition

In this, we defined the type of variable author inline using the syntax shown above.

Both of the methods can be used to define the custom types depending on the used cases.

Multiple types

In some of the used cases we are not sure of the type of variable or we can have a variable which may contain two types of values.


let variableOne: any;

let variableTwo: number | string;

In case of variableOne we are not sure of it's type so we assigned the type any to it. Defining type any is not preferred as TypeScript will infer it if not explicitly told.

In case of variableTwo, it can contain values which are either string or number, so we used the | operator to explicitly tell the TypeScript Compiler.

Type Inference

Type Inference happens when TypeScript tries to infer what type of values a variable refers to.

In the above example TypeScript Compiler infers that num will be of type number.

Type Inference in Functions

TypeScript is only capable of inferring the return type of a function. Parameters need to be annotated by the developer.

const add = (a: number; b: number) => {
return a+b;
}

In the above example TypeScript will infer the return type of function as number based on the type of parameters used and operations performed.

When to use Type Annotations

Fixing type any
Where Inference doesn't work
Delayed Initialization

Note: Whenever TypeScript can't infer the type of a variable or a function, it simply declares its type to be any.

Thanks for reading the Blog. Hope you found it Helpful

himakhaitan / himakhaitan

Happily Turning Coffee into Code☕💻. The repository is a quick overview of my current skills and commits🌱

I write code, build communities and love to interact with people around.

An avid and passionate coder specializing in different languages. I love to build and design websites which the end user would enjoy using while keeping the website performant and the code clean. Up for freelance web development work, social media managment and collaborating on exciting Open Source & Personal projects.

Currently I am learning advanced concepts of Typescript and getting hands dirty in Competitive Programming.

⚡ Stuff I Know

- Profile Visits -

Happily turning coffee into code!✅

View on GitHub

My self Himanshu Khaitan, a Freelance Web Developer. You can connect with me here. 😍

You can follow me on Twitter or connect with me on LinkedIn 🔗

You can ping me for help on my Discord Server here.

DEV Community: Himanshu Khaitan

Setting Up a Typescript Project using NPM

Let's first know what is NPM?

Setting Up the Project

Step 1 ➡️ Create the Project Folder

Step 2 ➡️ Change the Project Directory

Step 3 ➡️ Create Source Code Folder

Step 4 ➡️ Create Build Folder

📂 File System after above commands

Step 5 ➡️ Install TypeScript on your system

Step 6 ➡️ Initialize TypeScript Project

Let's first have a look at tsconfig.json file

Step 7 ➡️ Configure TypeScript Config File

Want to read about Type Annotations and Inference in TypeScript ❓

Type Annotations and Inference in Typescript

Himanshu Khaitan ・ Feb 4 '22

Step 8 ➡️ Optional Step ❗❗

Step: 1 ➡️ Initialize NPM

Step: 2 ➡️ Installing Required Packages

Step: 3 ➡️ Creating index.ts in src 📂

Step: 4 ➡️ Configuring package.json

Thanks for reading the Blog. Hope you found it Helpful

himakhaitan / himakhaitan

Happily Turning Coffee into Code☕💻. The repository is a quick overview of my current skills and commits🌱

I write code, build communities, and unravel data mysteries.

⚡ Stuff I Know

- Profile Visits -

Happily turning coffee into code!✅

Evident Audit - A community that builds

Community at your service

We got you covered in every possible way

You can follow us on Twitter here

Want to be a part of Open Source join our GitHub organization here

Type Annotations and Inference in Typescript

Let's first see what Types are in Typescript.

Type Annotations

Type Annotations for Variables

Type Annotations for Arrays

Type Annotations for Functions

Custom Type Annotations

-> Using Interface

-> Inline Definition

Multiple types

Type Inference

Type Inference in Functions

When to use Type Annotations

Thanks for reading the Blog. Hope you found it Helpful

himakhaitan / himakhaitan

Happily Turning Coffee into Code☕💻. The repository is a quick overview of my current skills and commits🌱

I write code, build communities and love to interact with people around.

⚡ Stuff I Know

- Profile Visits -

Happily turning coffee into code!✅

Let's first have a look at `tsconfig.json` file

Step: 4 ➡️ Configuring `package.json`