Introduction to TypeScript

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:

Now compile it into JavaScript using:

tsc hello.ts

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

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

node hello.js

Output:

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 //

• Multi-line comment: Enclosed in /* */

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:

Adding TypeScript File in HTML Code

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

1. Create the TypeScript File (types.ts)

• 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:

tsc types.ts

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

3. Create the HTML File (index.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.

5. Output

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.