Getting Started with TypeScript

1. Map object

A Map is a new data structure introduced in ES6 that holds key-value pairs and is able to remember the original insertion order of keys.

Map usage:

• New Map() : Creates a Map
• Map.clear () – Removes all key/value pairs from the map object.
• Map.set () – Sets the key-value pair and returns the map object.
• Map.get () – Returns the value of the key, or undefined if none exists.
• Map.has () – Returns a Boolean value that determines whether the map contains the value for the key.
• Map.delete () – To delete elements from a map, return true on success and false on failure.
• Map.size – Returns the number of key/value pairs of the Map object.
• Map.keys () – Returns an Iterator containing the keys of each element in the map.
• Map.values () – Returns a new Iterator containing the values of each element in the map

let nameSiteMapping = new Map(a);// Set the Map object
nameSiteMapping.set("Google".1);
nameSiteMapping.set("Runoob".2);
nameSiteMapping.set("Taobao".3);
 
// Get the value of the key
console.log(nameSiteMapping.get("Runoob"));     / / 2
 
// Determine whether the Map contains the value of the key
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// Returns the number of key/value pairs in the Map object
console.log(nameSiteMapping.size);                / / 3
 
/ / remove Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);// Map { 'Google' => 1, 'Taobao' => 3 }

// Remove all key/value pairs from the Map object
nameSiteMapping.clear();             / / remove the Map
console.log(nameSiteMapping); // Map {}

// Compile using ES6
tsc --target es6 test.ts
Copy the code

Iterative Map method:

TypeScript using for… Of to achieve iteration:

let nameSiteMapping = new Map(a); nameSiteMapping.set("Google".1);
nameSiteMapping.set("Runoob".2);
nameSiteMapping.set("Taobao".3);
 
// Iterate over keys in the Map
for (let key of nameSiteMapping.keys()) { // Google, Runoob, Taobao
    console.log(key);                  
}
 
// Iterate over the value in the Map
for (let value of nameSiteMapping.values()) {// 1, 2, 3
    console.log(value);                 
}
 
// Iterate over the Map key => value
for (let entry of nameSiteMapping.entries()) {// Google 1, Runoob 2, Taobao 3
    console.log(entry[0], entry[1]);   
}
 
// Use object parsing
for (let [key, value] of nameSiteMapping) {// Google 1, Runoob 2, Taobao 3
    console.log(key, value);            
}
Copy the code

Second, the tuples

The data types of the elements in an array are generally the same (arrays of type any[] can be different), and if the data types of the stored elements are different, you need to use tuples.

Create and access methods:

var mytuple = [10."Runoob"]; // Create a tuple
console.log(mytuple[0]) // Access tuple 10
console.log(mytuple.length) //
Copy the code

Operation method:

• Push () adds elements to the tuple, at the end.
• Pop () removes the element (the last one) from the tuple and returns the removed element.
• Assignment updates elements in a tuple.

Three, the type of association

Joint type (Union Types) can be set through the pipe (|) variable Types, assignment can be assigned according to the type of set.

Declare union type methods:

var val:string|number 
val = 12 
val = "Runoob" 

// Arrays can be declared as associative types
var arr:number[] |string[]; 
arr = [1.2.4] 
arr = ["Runoob"."Google"."Taobao"] 
Copy the code

Four, cross type

By combining multiple types into a single type, you can superimpose existing types into a single type that contains all the required features of the type.

interface IPerson {
  id: string;
}

interface IWorker {
  companyId: string;
}

type IStaff = IPerson & IWorker;// Cross types
const staff: IStaff = {
  id: 'E1006'.companyId: 'EFT'
};
Copy the code

Five, the function

// Mandatory and optional parameters (pass? To define optional parameters. Optional parameters must be placed after normal parameters, otherwise it will cause a compilation error.
function createUserId(name: string, id: number, age? :number) :string {
  return name + id;
}

// Function overloading: Create multiple methods with the same name and different numbers or types of arguments. The compiler selects function calls based on the arguments.
function add(a: number, b: number) :number;
function add(a: string, b: string) :string;

// Method overload: same as function overload, but in the same class.
class Calculator {
  add(a: number.b: number) :number;
  add(a: string.b: string) :string;
}
Copy the code

Six, interfaces,

An interface is a set of abstract method declarations, a collection of method characteristics, that need to be implemented by a concrete class, and then a third party can use this set of abstract method calls to make the concrete class execute the concrete method.

Note: The interface cannot be converted to JavaScript. It’s just a part of TypeScript.

Definition and Usage:

interface IPerson { // Define the interface
    firstName:string.sayHi: () = >string 
} 
 
var customer:IPerson = { // Call the interface
    firstName:"Tom".sayHi: (a) :string= >{return "Hi there"}}Copy the code

Combine types and interfaces

Interface parameters can use a variety of data types

interface RunOptions { 
    program:string; 
    commandline:string[] |string| (() = >string); 
} 
 
// commandline is a string
var options:RunOptions = {program:"test1".commandline:"Hello"}; 
 
Commandline is an array of strings
options = {program:"test1".commandline: ["Hello"."World"]};  
 
Commandline is a function expression
options = {program:"test1".commandline:() = >{return "**Hello World**"; }};var fn:any = options.commandline; 
console.log(fn());
Copy the code

Interfaces and Arrays

Interface we can set the index value and element of the array to different types. The index value can be a number or a string.

// Index number, element string
interface namelist { 
   [index:number] :string 
} 
var list2:namelist = ["John".1."Bran"] // Error element 1 is not a string

 // The index is string and the element is number
interface ages { 
   [index:string] :number 
} 
var agelist:ages; 
agelist["John"] = 15   / / right
agelist[2] = "nine"   / / error
Copy the code

Interface inheritance

Interfaces can extend themselves through other interfaces. Typescript allows interfaces to inherit from multiple interfaces using the extends keyword, separated by commas.

// Single inherited instance
interface Person { 
   age:number 
} 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
Copy the code