TypeScript Basic Syntax

A TypeScript program is composed of the following parts:

• Modules
• Functions
• Variables
• Statements and Expressions
• Comments

First TypeScript Program

We can use the following TypeScript program to output "Hello World":

tutorialpro.ts File Code:

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

The above code is first compiled using the tsc command:

tsc tutorialpro.ts

This results in the following JavaScript code:

tutorialpro.js File Code:

var hello = "Hello World!";
console.log(hello);

Finally, we use the node command to execute the JavaScript code:

$ node tutorialpro.js
Hello World

The entire process is illustrated in the diagram below:

We can compile multiple TypeScript files simultaneously:

tsc file1.ts file2.ts file3.ts

Common tsc compilation parameters are shown in the table below:

TypeScript Reserved Keywords

TypeScript reserved keywords are shown in the table below:

| break | as | catch | switch | | case | if | throw | else | | var | number | string | get | | module | type | instanceof | typeof | | public | private | enum | export | | finally | for | while | void | | null | super | this | new | | in | return | true | false | | any | extends | static | let | | package | implements | interface | function | | do | try | yield | const | | continue | | | |

Whitespace and Line Breaks

TypeScript ignores spaces, tabs, and line breaks that appear in the program.

Spaces and tabs are generally used to indent code for readability and understanding.

TypeScript is Case-Sensitive

TypeScript distinguishes between uppercase and lowercase characters.

Semicolons Are Optional

Each line of instruction is a statement, and you can use semicolons or not. Semicolons are optional in TypeScript, but it is recommended to use them.

The following codes are both valid:

console.log("tutorialpro");
console.log("Google");

If statements are written on the same line, semicolons must be used to separate them, otherwise an error will occur, such as:

console.log("tutorialpro"); console.log("Google");

TypeScript Comments

Commenting is a good practice, although many programmers dislike comments, it is still advisable to write textual explanations for each segment of code.

Comments can improve the readability of the program.

Comments can include information about the program, such as the author of the code, descriptions of functions, etc.

The compiler ignores comments.

TypeScript Supports Two Types of Comments

• Single-line Comment (//) - Text following // is treated as comment content.
• Multi-line Comment (/* */) - This type of comment can span multiple lines.

Comment Example:

// This is a single-line comment

/* 
  This is a multi-line comment 
  This is a multi-line comment 
  This is a multi-line comment 
*/

TypeScript and Object-Oriented Programming

Object-oriented programming is a method of understanding and abstracting the real world.

TypeScript is an object-oriented programming language.

Object-oriented programming mainly involves two concepts: objects and classes.

• Object: An object is an instance of a class (not about finding a girlfriend), with state and behavior. For example, a dog is an object, its states include color, name, breed; its behaviors include wagging its tail, barking, eating, etc.
• Class: A class is a template that describes the behavior and state of a type of object.
• Method: A method is the implementation steps of an operation in a class.

In the diagram below, girl and boy are classes, while each individual is an object of that class:

TypeScript Object-Oriented Programming Example:

class Site { 
   name():void { 
      console.log("tutorialpro") 
   } 
} 
var obj = new Site(); 
obj.name();

The above example defines a class Site, which has a method name(). This method outputs the string "tutorialpro" on the terminal.

The new keyword creates an object of the class, which then calls the name() method.

The compiled JavaScript code is as follows:

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("tutorialpro");
    };
    return Site;
}());
var obj = new Site();
obj.name();

Executing the above JavaScript code will produce the following output:

tutorialpro