TS learning 1: basic grammar


This article only records the contents that you don't know and are unfamiliar with



npm install -g typescript

View version

tsc -v

ts to js
Take app.ts as an example. Running tsc app.ts will generate an app.js in the app.ts directory

Basic grammar

Basic type

  • Any: any type
  • Number: number type
  • String: string type
  • boolean: boolean type
  • Array: array type, tuple type
  • enum: enumeration type
  • Void: void type, used to identify the type of return value of a method, indicating that the method has no return value
  • Null: null type, indicating that the object value is missing
  • undefined:undefined type, undefined

Variable declaration

let [Variable name] : [type] = value;

function overloading

Overloading means that the method name is the same, but the parameters are different, and the return type can be the same or different.
Each overloaded method (or constructor) must have a unique list of parameter types. There are generally the following

  • Different parameter types
function disp(string):void; 
function disp(number):void
  • Different number of parameters
function disp(n1:number):void; 
function disp(x:number,y:number):void;
  • The order of parameter types is different
function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;


let numList:number[]  ;
let numList:number[] = [1,2,3]

Map object
The Map object holds key value pairs and can remember the original insertion order of keys

let nameSiteMapping = new Map();
//add value
nameSiteMapping.set("Google", 1);
//According to the key value, undefined is returned if there is no
onsole.log(nameSiteMapping.get("Runoob"));     // undefined
//If the key is deleted, true is returned for success, and false is returned for failure
//Whether it contains a value. If yes, it returns true; otherwise, it returns false
//Returns the number of map object elements
//Returns all keys
//Returns all values
//Clear all key value pairs

Iterate over map using for of

let nameSiteMapping = new Map();

// key in iterative Map
for (let key of nameSiteMapping.keys()) {

// Iterate value in Map
for (let value of nameSiteMapping.values()) {
// Key = > value in iterative Map
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
// Using object resolution
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            


Tuples are arrays in js that can store different types of elements

let arr = [1,'abc',true]

Union type

Multiple types are set for variables through the pipe character. When assigning values, you can assign values according to the type, but only the specified type can be assigned

var val:string|number 
val = 12 
console.log("The number is "+ val) 
val = "Runoob" 
console.log("String is " + val)

var arr:number[]|string[]; 


An interface is a declaration of a series of abstract methods and a collection of method features. These methods should be abstract and need to be implemented by specific classes. Then a third party can call these abstract methods to let specific classes execute specific methods.


interface interface_name { 

Example: an interface IPerson is defined, and then a variable customer is defined. Its type is IPerson.

interface IPerson { 
    sayHi: ()=>string 
var customer:IPerson = { 
    sayHi: ():string =>{return "Hi there"} 

Interfaces can be inherited by using the extends keyword. Interfaces can be single inheritance and multiple inheritance. Multiple interfaces can be separated by commas

Class can inherit the interface through implements. After inheriting the interface, you must implement the abstract methods defined in the interface. Using interfaces can be used to standardize the behavior of classes


Class describes the common properties and methods of the created object.


The keyword defining the class is class, followed by the class name. The class can contain the following modules (data members of the class):

  • Field − field is the variable declared in the class. Fields represent data about the object.
  • Constructor − called when the class is instantiated, which can allocate memory for the object of the class.
  • Method − method is the operation to be performed by the object.

Method override

After class inheritance, subclasses can redefine the methods of the parent class. This process is called method rewriting.
The super keyword is a direct reference to the parent class, which can reference the properties and methods of the parent class.

class PrinterClass { 
   doPrint():void {
      console.log("Parent class doPrint() method.") 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // Call the function of the parent class
      console.log("Subclass doPrint()method.")

Tags: Javascript ECMAScript

Posted on Tue, 09 Nov 2021 18:45:50 -0500 by teejayuu