How do I say Hello World in TypeScript?

Hello World in TypeScript

The “Hello, World!” program serves as the traditional starting point for understanding a new programming language, and in the context of TypeScript, it provides an excellent demonstration of the language’s core features, particularly its use of static types and its compilation process to executable JavaScript.

Basic Implementation and Output

A console output statement and a straightforward variable definition are frequently found in a TypeScript “Hello World” program. The syntax structure of TypeScript, which consists of modules, functions, variables, statements, expressions, and comments, is demonstrated here.

This is an example of a simple variable-based example:

var message:string="Hello World"
console.log(message)

In this snippet, message is declared as a variable of type string using the type annotation syntax (:string). The output is produced by the console.log(message) statement, where console refers to the terminal window, and the log() function is used to display text on the screen.

Hello World is the output that appears when this code is executed.

Pure console output is demonstrated by another incredibly basic script that is intended to be run directly:

// main.ts
console.log("Hello world");

Hello world is the output produced when this script is performed with a tool such as ts-node.

The Compilation and Execution Process

Transpilation, the method by which TypeScript code is processed and produces output that is identical to JavaScript, is a key idea that the TypeScript “Hello, World!” program exemplifies.

A typed superset of JavaScript, TypeScript (TS) compiles straight to JavaScript code while maintaining interoperability with current JavaScript engines. The code that is actually run at runtime is called the output JavaScript.

The code is processed by the TypeScript Compiler (TSC) in a number of steps:

Type Checking: The compiler learns about all constructions (variables, functions, etc.) and examines the files for type mistakes.
Compilation/Emission: The compiler generates the corresponding JavaScript code if the code is syntactically correct (type issues do not prevent TSC from attempting to generate JavaScript). A JavaScript runtime environment, such a browser or Node.js, evaluates this output.

The output JavaScript produced by the compiler (for example, using TypeScript version 1.8.10) for the simple variable example above (var message:string="Hello World") is essentially the same code without the type annotation, illustrating Type Erasure the explicit type annotations are removed at compile-time since they are not required for runtime execution:

//Generated by typescript 1.8.10
var message = "Hello World";
console.log(message);

The environment then runs this JavaScript output, resulting in the final Hello World output.

Execution Environments

There are several ways to execute the output:

Direct Execution via ts-node: The ts-node npm package allows users to run TypeScript files directly without manual precompilation using the tsc command. For example, running ts-node main.ts executes the script and immediately prints Hello world to the terminal.
Visual Studio Code (VS Code): Test.js is produced when a file such as Test.ts is built in VS Code using the tsc Test.ts command. The program is run and the output is obtained by running the command node Test.js to run the generated JavaScript file.
Online Playgrounds: Using the TypeScript Playground editor, users may test programs, view the JavaScript that the compiler produces, and run the outcome.

Complex “Hello, World!” Examples

Additionally, more complex capabilities like classes and modules can be demonstrated with the “Hello, World!” program:

Class-Based Example

A “Hello, World!” example frequently illustrates object-oriented ideas that TypeScript supports using a simple class structure.

class Greeter {
    greeting: string;
    
    constructor(message: string) {
        this.greeting = message;
    }
    
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!"); 
console.log(greeter.greet());

The Greeter class has a parameterised constructor, a greet() method that returns a string, and a property called greeting in this class-based example. The new keyword creates an instance of the class, and the final output is generated by calling the greet() method on that instance.

Module-Based Example

TypeScript allows code organisation through modules. A “Hello, World!” module demonstrates how functions can be imported and exported:

// hello.ts
export function hello(name: string){
    console.log(`Hello ${name}!`); 
}
// ... other exports ...

This function illustrates how the output is produced during module usage by being imported and then called:

import {hello} from "./hello"; 
hello("World"); // Output: Hello World!

Additionally, output production in a web environment is demonstrated in the “Hello World in the browser with SystemJS” example. A greeter function is exported by a hello.ts file, and an HTML file imports this module and calls the function using a script, setting the HTML body content:

// hello.ts:
export function greeter(person: String) { 
    return 'Hello, ' + person; 
}
// ... used inside HTML script tags:
System.import('./hello.ts').then(function(hello) { 
    document.body.innerHTML = hello.greeter('World'); 
});

In this case, the HTML body displays “Hello, World” since the output is rendered directly to the webpage rather than being forwarded to the console. The concatenated text Hello, World is returned by the greeter function and subsequently added to the DOM.

In conclusion, TypeScript’s “Hello, World!” program explains basic ideas, shows how types improve code quality and tooling, and verifies that the final runtime output is created by running the corresponding JavaScript code that was created during compilation.

Page Content

Tutorials