TypeScript Hello World

TypeScript is a powerful, typed superset of JavaScript that compiles to plain JavaScript. It adds static typing and other features to JavaScript, making catching errors early and building more maintainable applications easier. This guide will walk you through creating your first TypeScript program: the classic “Hello, World!” example.

Writing the TypeScript Code for Hello World

Create a TypeScript File

Inside your project directory, create a new file named hello.ts:

touch hello.ts

Write the “Hello, World!” Program

Open hello.ts in your code editor and add the following code:

const greeting: string = "Hello, World!";
console.log(greeting);

TypeScript ‘Hello World’ Code Explanation:

const greeting: string: Declares a constant variable greeting with a type annotation string.
console.log(greeting): Prints the value of greeting to the console.

Compiling TypeScript to JavaScript

TypeScript files (.ts) cannot run directly in the browser or Node.js. You need to compile them into JavaScript files (.js).

Compile the TypeScript File

Run the following command to compile hello.ts:

tsc hello.ts

This will generate a hello.js file in the same directory. If Typescript is not setup in your system refer to this tutorial guide – Setting Up TypeScript and Running Code

Run the JavaScript File

Execute the compiled JavaScript file using Node.js:

node hello.js

You should see the output:

Hello, World!

Automating the Process (Optional)

You can set up a TypeScript configuration file and watch mode to streamline development.

Create a tsconfig.json File

Run the following command to initialize a TypeScript configuration file:

tsc --init

This generates a tsconfig.json file. Open it and modify the following options:

{
  "compilerOptions": {
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

Explanation:

outDir: Specifies the directory for compiled JavaScript files.
strict: Enables strict type-checking.
include: Specifies the files to compile (all .ts files inside the src directory).

Update Project Structure

Reorganize your project as follows:

typescript-hello-world/
├── src/
│   └── hello.ts
├── dist/
├── package.json
└── tsconfig.json

Compile and Watch for Changes

Run TypeScript in watch mode:

tsc -w

This will automatically compile your files whenever you make changes.

Adding TypeScript to a Web Page (Optional)

To include your TypeScript code in a web page:

Create an index.html file in your project:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Hello, World!</title>
   </head>
   <body>
       <script src="dist/hello.js"></script>
   </body>
   </html>

Open index.html in a browser, and check the console to see Hello, World!.

Conclusion

Congratulations! You’ve successfully written, compiled, and executed your first TypeScript program. TypeScript’s static typing and advanced features provide a robust foundation for building modern JavaScript applications. Continue exploring to unlock its full potential!