TypeScript - Basic Syntax

Syntax defines a set of rules for writing programs. Every language specification defines its own syntax. A TypeScript program is composed of −

Modules

Functions

Variables

Statements and Expressions

Comments

Your First TypeScript Code

Let us start with the traditional “Hello World” example −

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

On compipng, it will generate following JavaScript code.

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

Line 1 declares a variable by the name message. Variables are a mechanism to store values in a program.

Line 2 prints the variable’s value to the prompt. Here, console refers to the terminal window. The function log () is used to display text on the screen.

Compile and Execute a TypeScript Program

Let us see how to compile and execute a TypeScript program using Visual Studio Code. Follow the steps given below −

Step 1 − Save the file with .ts extension. We shall save the file as Test.ts. The code editor marks errors in the code, if any, while you save it.

Step 2 − Right-cpck the TypeScript file under the Working Files option in VS Code’s Explore Pane. Select Open in Command Prompt option.

Step 3 − To compile the file use the following command on the terminal window.

tsc Test.ts

Step 4 − The file is compiled to Test.js. To run the program written, type the following in the terminal.

node Test.js

Compiler Flags

Compiler flags enable you to change the behavior of the compiler during compilation. Each compiler flag exposes a setting that allows you to change how the compiler behaves.

The following table psts some common flags associated with the TSC compiler. A typical command-pne usage uses some or all switches.

Note − Multiple files can be compiled at once.

tsc file1.ts, file2.ts, file3.ts

Identifiers in TypeScript

Identifiers are names given to elements in a program pke variables, functions etc. The rules for identifiers are −

Identifiers can include both, characters and digits. However, the identifier cannot begin with a digit.

Identifiers cannot include special symbols except for underscore (_) or a dollar sign ($).

Identifiers cannot be keywords.

They must be unique.

Identifiers are case-sensitive.

Identifiers cannot contain spaces.

The following tables psts a few examples of vapd and invapd identifiers −

TypeScript ─ Keywords

Keywords have a special meaning in the context of a language. The following table psts some keywords in TypeScript.

Whitespace and Line Breaks

TypeScript ignores spaces, tabs, and newpnes that appear in programs. You can use spaces, tabs, and newpnes freely in your program and you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand.

TypeScript is Case-sensitive

TypeScript is case-sensitive. This means that TypeScript differentiates between uppercase and lowercase characters.

Semicolons are optional

Each pne of instruction is called a statement. Semicolons are optional in TypeScript.

Example

console.log("hello world")
console.log("We are learning TypeScript")

A single pne can contain multiple statements. However, these statements must be separated by a semicolon.

Comments in TypeScript

Comments are a way to improve the readabipty of a program. Comments can be used to include additional information about a program pke author of the code, hints about a function/ construct etc. Comments are ignored by the compiler.

TypeScript supports the following types of comments −

Single-pne comments ( // ) − Any text between a // and the end of a pne is treated as a comment

Multi-pne comments (/* */) − These comments may span multiple pnes.

Example

//this is single pne comment 
 
/* This is a  
   Multi-pne comment 
*/

TypeScript and Object Orientation

TypeScript is Object-Oriented JavaScript. Object Orientation is a software development paradigm that follows real-world modelpng. Object Orientation considers a program as a collection of objects that communicate with each other via mechanism called methods. TypeScript supports these object oriented components too.

Object − An object is a real time representation of any entity. According to Grady Brooch, every object must have three features −

State − described by the attributes of an object

Behavior − describes how the object will act

Identity − a unique value that distinguishes an object from a set of similar such objects.

Class − A class in terms of OOP is a blueprint for creating objects. A class encapsulates data for the object.

Method − Methods faciptate communication between objects.

Example: TypeScript and Object Orientation

class Greeting { 
   greet():void { 
      console.log("Hello World!!!") 
   } 
} 
var obj = new Greeting(); 
obj.greet();

The above example defines a class Greeting. The class has a method greet (). The method prints the string “Hello World” on the terminal. The new keyword creates an object of the class (obj). The object invokes the method greet ().

On compipng, it will generate following JavaScript code.

//Generated by typescript 1.8.10
var Greeting = (function () {
   function Greeting() {
   }
   Greeting.prototype.greet = function () {
      console.log("Hello World!!!");
   };
	return Greeting;
}());

var obj = new Greeting();
obj.greet()

The output of the above program is given below −

Hello World!!!