Basic of TypeScript

Introduction

TypeScript is a superset of JavaScript that adds optional static typing and other features to the language. It is designed to improve the development of large-scale JavaScript applications and make it easier to catch common errors before they reach production.

TypeScript code is transpiled to JavaScript, so it can be run in any browser or JavaScript environment.

Some of the key features of TypeScript include.

classes
Interfaces
type annotations

It also supports latest features of javascript like ES6, ES7, ES8 and so on. TypeScript can be integrated with various popular framework and libraries like Angular, React, Vue.js, etc.

How to make Setup for Typescript?

To install and set up TypeScript on your machine, we have to follow these steps:

Make sure Node.js and npm (Node Package Manager) has been installed on our machine. we can check if they are installed by running the commands node -v and npm -v in the terminal.
Open a terminal and run the command npm install -g typescript to install TypeScript globally on your machine.
Create a new directory for our project and navigate to it in the terminal.
Run the command npm init -y to create a package.json file in your project directory.
Run the command tsc --init to create a tsconfig.json file in your project directory. This file is used to configure the TypeScript compiler.
Open the tsconfig.json file and set the “target” property to “es6” or higher version, and also set the “outDir” property to “./dist” (or any other desired output directory).
Create a new file with the .ts extension in your project directory. For example, “main.ts”
We can now start writing TypeScript code in the main.ts file.
To compile the TypeScript code to JavaScript, run the command tsc in the terminal.
To run the compiled JavaScript code, we will need to have Node.js installed on our machine, then we can use the command node dist/main.js to run your code.

We could also use a build tool like webpack to bundle our application and handle the transpilation process to javascript and other development needs.

How to run typescript in Browser?

One way to do this is by transpiling the TypeScript code to JavaScript using a tool like the TypeScript compiler, and then including the transpiled JavaScript code in a script tag in an HTML file. The JavaScript code can then be executed by the browser. Another way is to use a transpiler like Babel to convert the TypeScript code to JavaScript before it is run by the browser.

For better Understanding we are going to explain it with an example

here is our typescript file main.ts and it basically prints a message. As shown below.


    
    /**
      sample code
     */
     
     let message:string="hello Typescript";

     console.log("Message Print :"+message);

for transpiling Typescript code into Javascript we are following above rule as defined in previous section. So, after making changes inside our tsc config file we need to execute below command in our terminal.


    
    /**
     command for transpile & execute code
     */
     
     tsc  transpile code
     node dist/main.js execute code

Now we need to create html file. Where we will add transpiled Javascript code in HTML script tag.

<!DOCTYPE html>
<html>
    <head>
        <script src="./dist/main.js"></script>
    </head>
    <body>
    <p>We have nothing to add in body ......</p>
    </body>
</html>

Now once will load this html file in our browser. then inside our browser console we can be able to check our output as shown below.

Is Typescript better than Javascript?

Whether TypeScript is better than JavaScript is a matter of personal preference and the specific use case. TypeScript provides certain features, such as optional static typing and class-based object-oriented programming, that can improve the development experience and catch certain types of errors before they reach production. This can make it a better choice for larger and more complex projects.

On the other hand, JavaScript is a more widely-used and well-established language, and it has a larger ecosystem of libraries and frameworks. It is also more versatile, as it can be used both on the front-end and back-end of web development.

In short, TypeScript can be a better choice for certain types of projects where the added features and type checking can improve the development experience, but JavaScript is still a widely used and versatile language that is suitable for a wide range of use cases.

Free Online Resources for learning Typescript

There are many online resources available to help us to get started with TypeScript. Here are a few popular ones:

The TypeScript website (typescriptlang.org) – This site provides official documentation and resources for learning TypeScript, including tutorials and guides for getting started.
The TypeScript Handbook (www.typescriptlang.org/docs/handbook/basic-types.html) – This guide covers the basics of TypeScript, including types, variables, functions, and more.
FreeCodeCamp’s TypeScript course (www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/typescript/) – This course covers the basics of TypeScript and progresses to more advanced topics.
The TypeScript Deep Dive (basarat.gitbook.io/typescript) – This book provides a comprehensive guide to TypeScript and is available for free online.
TypeScript in 50 Lessons (www.gitbook.com/book/mohitgoyal/typescript-in-50-lessons/details) – This guide provides an introduction to TypeScript through a series of short lessons.

These are just a few examples, there are a lot more resources available on the internet. The best way to learn is to try and build something with TypeScript and look for answers online when you are stuck.

krdheeraj.info

krdheeraj.info