TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript. It adds features like static typing, interfaces, generics, and modern ECMAScript support, helping developers catch errors early and build scalable applications with better tooling such as autocompletion, refactoring, and debugging.

It is a compiled language, meaning TypeScript code is first converted into JavaScript before execution.
Strong typing reduces runtime errors.
It makes code more predictable, maintainable, and easier to debug.

"Hello, World!" Program in TypeScript

A "Hello, World!" program is the simplest way to get started with any programming language. Here’s how you can write one using TypeScript.

In Browser (via Compilation)

Create a file hello.ts:

typescript

// This is our first TypeScript program
let message: string = "Hello, World!";
console.log(message);

Now compile it into JavaScript using:

javascript

tsc hello.ts

This will generate a hello.js file, which can then be included in your HTML.

html

<html>
  <body>
    <h1>Check the console for the message!</h1>
    <script src="hello.js"></script>
  </body>
</html>

In Node.js Console: Simply run the compiled JavaScript:

text

node hello.js

Output:

javascript

Hello, World!

Comments in JavaScript

Comments are notes in your code that the TypeScript interpreter ignores. They’re great for explaining what your code does or for testing purposes.

Single-line comment: Starts with //

typescript

// This is a single-line comment

Multi-line comment: Enclosed in /* */

typescript

/* This is a multi-line comment
   spanning multiple lines */

Client Side and Server Side Nature of TypeScript

TypeScript’s flexibility extends to both the client-side and server-side, allowing developers to create complete, scalable applications. Here’s how it functions in each environment:

Client-Side:

Used for controlling the browser and its DOM (Document Object Model).
Handles user events like clicks, form inputs, and rendering dynamic content.
Common frameworks and libraries like Angular, React, and Vue offer strong TypeScript support for building large-scale front-end applications.

Server-Side:

Used for interacting with databases, handling APIs, file manipulation, and generating responses.
Node.js with TypeScript, along with frameworks like Express or NestJS, is widely used to build type-safe backend applications.
Type definitions help catch errors early and make server-side code more reliable and maintainable.

JavaScript Vs TypeScript

Here are the detailed difference between JavaScript and TypeScript:

JavaScript	TypeScript
A lightweight, interpreted scripting language used for web development.	A superset of JavaScript that adds static typing and advanced features.
Dynamically typed (types are checked at runtime).	Statically typed (optional) – types are checked at compile time.
Runs directly in browsers or Node.js (no compilation needed).	Must be compiled to JavaScript using the TypeScript compiler (tsc).
Errors appear only at runtime	Errors are caught at compile time, reducing runtime bugs.
Prototype-based object-oriented programming.	Class-based object-oriented programming with interfaces, access modifiers, generics.
Supports ES6+ features depending on the environment.	Supports all modern ES6+ features, plus extra TypeScript-only features.
Basic editor support, limited IntelliSense.	Rich tooling with autocompletion, type checking, and refactoring support.
Runs everywhere (browser, Node.js, servers)	Used in large-scale applications, compiled to JS for execution.

Adding TypeScript File in HTML Code

Here are the steps for adding TypeScript file in html code:

1. Create the TypeScript File (types.ts)

typescript

let myString;
myString = 'Hello from ts';
console.log(myString);

myString is declared as a string variable.
It's assigned the value 'Hello from TypeScript'.
The value is logged to the console.

2. Compile TypeScript to JavaScript

Use the TypeScript compiler (tsc) to transpile types.ts into JavaScript. Open your terminal and run:

javascript

tsc types.ts

This command generates a types.js file containing the equivalent JavaScript code.

3. Create the HTML File (index.html)

html

<html lang="en">
<head>
</head>
<body>
    <h2>Welcome to GeeksforGeeks</h2>
    <p>Default code has been loaded into the Editor.</p>
    <script src="types.js"></script>
</body>
</html>

A heading and a paragraph for content.
A script tag that references the compiled JavaScript file types.js.

4. Run the HTML File

Open index.html in a web browser.

Limitations of TypeScript

Despite its power, TypeScript has some limitations to consider:

Compilation Overhead: Must be compiled into JavaScript before execution.
Learning Curve: Developers must learn types, generics, and advanced concepts.
Configuration Complexity: Large projects may require detailed tsconfig.json setup.
Extra Build Step: Slower feedback loop compared to plain JavaScript.

Introduction to TypeScript

"Hello, World!" Program in TypeScript

Comments in JavaScript

Client Side and Server Side Nature of TypeScript

JavaScript Vs TypeScript

Adding TypeScript File in HTML Code

1. Create the TypeScript File (types.ts)

2. Compile TypeScript to JavaScript

3. Create the HTML File (index.html)

4. Run the HTML File

Limitations of TypeScript

JavaScript Template Literals and Modern Strings

Mastering TypeScript Data Types: The Foundation of Strong Typing

Nguyen Bao Huy

Discussion

No comments yet

Leave a Reply