TypeScript Basic Syntax

A TypeScript program consists of the following parts:

module
function
variable
Statements and Expressions
note

First TypeScript program

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

Runoob.ts file code:

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

The above code is first compiled by the tsc command:

tsc Runoob.ts

Get the following js code:

Runoob.js file code:

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

Finally, we use the node command to execute the js code.

$ node Runoob.js
Hello World

The whole process is shown in the figure below:

We can compile multiple ts files at the same time:

tsc file1.ts file2.ts file3.ts

The common compilation parameters of tsc are shown in the following table:

serial number	Compilation parameter description
1.	--help display help information
2.	--module load extension module
3.	--target set ECMA version
4.	--declaration additionally generate a file with a .d.ts extension. `tsc ts-hw.ts --declaration` The above command will generate two files, ts-hw.d.ts and ts-hw.js.
5.	--removeComments Remove comments from files
6.	--out Compile multiple files and merge them into one output file
7.	--sourcemap Generate a sourcemap (.map) file. sourcemap is an information file that stores the mapping between source code and compiled code.
8.	--module noImplicitAny reports an error if there is an implicit any type in expressions and declarations
9.	--watch Run the compiler in watch mode. Output files are watched and recompiled when they change.

TypeScript reserved keywords

TypeScript reserved keywords are shown in the following table:

break	as	catch	switch
case	if	throw	else
was	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
new	try	yield	const
continue	do

Blanks and Newlines

TypeScript ignores spaces, tabs, and newlines that appear in your program.

Spaces and tabs are often used to indent code to make it easier to read and understand.

TypeScript is case sensitive

TypeScript distinguishes between uppercase and lowercase characters.

semicolon is optional

Each line of instruction is a statement, you can use semicolon or not, semicolon is optional in TypeScript, it is recommended to use.

The following codes are all legal:

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

If the statements are written on the same line, they must be separated by semicolons, otherwise an error will be reported, such as:

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

TypeScript annotations

Comments are a good habit. Although many programmers hate comments, it is still recommended that you write a text description for each piece of code.

Comments can improve the readability of a program.

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

Comments are ignored by the compiler.

TypeScript supports two types of annotations

Single-line comment ( // ) − The text after // is the comment content.
Multi-line comments (/* */) − This type of comment can span multiple lines.

Note example:

// 这是一个单行注释
 
/* 
 这是一个多行注释 
 这是一个多行注释 
 这是一个多行注释 
*/

TypeScript and Object Orientation

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

TypeScript is an object-oriented programming language.

Object-oriented has two main concepts: object and class.

Object : An object is an instance of a class ( the object is not looking for a girlfriend ), has state and behavior. For example, a dog is an object, its states are: color, name, breed; behaviors are: wagging tail, barking, eating, etc.
Class : A class is a template that describes the behavior and state of a class of objects.
Method : A method is the implementation step of an operation of a class.

In the figure below, girl and boy are classes, and each person is an object of this class:

TypeScript object-oriented programming example:

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

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

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

The JavaScript code generated after compilation is as follows:

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

Execute the above JavaScript code, the output is as follows:

Summarize some knowledge points of TypeScript: Basic Grammar of TypeScript