TypeScript Basics: Setting Up and Project Essentials

TypeScript Project Essentials: A Simple Setup Guide

Section 1 - Setup

1. Create a project folder:

   • Create a folder named /typescript-basic-project.

2. Create HTML file:

   • Inside the folder, create an index.html file.

3. Install TypeScript globally:

    npm i -g typescript
   

   To check the installed version:

    tsc --version
    # Current version: 5.3.3
   

4. Create a TypeScript file:

    // main.ts
    const userName: string = "Dheeraj";
    console.log(`Hello, my name is ${userName}\nThis is my first TypeScript program.`);
   

5. HTML file inclusion:

   Update index.html:

    <!DOCTYPE html>
    <html lang="en">
   
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Typescript Setup</title>
    </head>
   
    <body>
      <h2>Hello World, Welcome to TypeScript setup</h2>
      <script src='./main.ts'></script>
    </body>
   
    </html>
   

In this index.html file i have added main.ts as script ,let's see how it goes

TypeScript files can't be used directly
transpile it to JavaScript using:

tsc main.js

this command will create a main.js file in the same directory and we can use that file with .html or other usecase

TypeScript is for defining the static types for variables (string, number, boolean, array, object) overall improving the developer experience and making code less error prone

Adding more types in our code

// main.ts
const userName: string = 'Dheeraj';
const age: number = 24;
const skills: string[] = [
    'React',
    'Typescript',
    'Css',
    'Nextjs',
    'HandleBars',
];

function formIntro(
    name: string,
    age: number,
    skills: Array<string>
): string {
    const namePara: string = `Hello my name is ${name}`;
    const agePara: string = `i am ${age} years old`;
    const skillsPara: string = `i am good at ${skills.join(
        ' '
    )}`;

    return `${namePara} \n ${agePara} \n ${skillsPara}`;
}

console.log(formIntro(userName, age, skills));

Compile and see the output in the browser , make sure you code it out

tsc main.ts -w

instead of writing the command on each compilation you can also add the -w flag to monitor for change and transpile it to .js

after compilation you can see the output in browser console

Section 2 - Setting up TypeScript Project

1. Working with multiple files:

   • Handling complex arrays in a separate file:

// complex arrays
const personData: { name: string; age: number }[] = [
    {
        name: 'Dheeraj',
        age: 24,
    },
    {
        name: 'Bharat',
        age: 23,
    },
    {
        name: 'Shanit',
        age: 22,
    },
];

const studentsMarks: number[][] = [
    [10, 20, 30],
    [40, 50, 60],
    [70, 80, 90],
];

studentsMarks.push([100, 110, 120]);

hmm there me more files as well , but manually writing command would take time right ? so we will see how to compile all the typescript files at once

• create a tsconfig.json file in root directory

• Compile all TypeScript files at once by creating tsconfig.json

{
    "include": ["*.ts"]
}

Run tsc to transpile.

that will by default create corresponding .js files

similar to include we have exclude property as well in which you can define the files like node_modules or other files we dont want to be compiled

{
    "include": ["*.ts", "./src/**/*.ts"],
    "exclude": ["node_modules"]
}

1. Compiler options in tsconfig.json:

To better orgainse the typescript project generally we keep our .ts files in src folder

so we can define that basic config for it

{
    "include": ["*.ts", "./src/**/*.ts"],
    "exclude": ["node_modules"],
    "compilerOptions": {
        "rootDir": "./src",
        "outDir": "./dist",
        "target": "es6"
    }
}

• rootDir represents the directory for code files, and dist is our distribution folder where our .js files will be stored.

• Essentially, it is the build that should be linked to our index.html file.

• The target property helps us specify the version to which we want to translate our .ts code.

• With this, we have completed the basic configuration of the project. Additionally, there is a command to automatically generate these options for us.

• If needed, you can delete the tsconfig.json file and use the following command to generate the TypeScript configuration. For illustrative purposes, I manually created the file

tsc -init

That concludes this blog, and today we learned about TypeScript project setup. Happy coding!