Typescript study notes (1)

1. Online editor

typescript 官网：https://www.typescriptlang.org/play?#code/G4QwTgBAtgngdiKBTCBeARALwM7oNwBQokA5kgC4CCZqAZgK5wDG5AlgPZwAUAlAN4EIQiGAr0wcCACYADIQC+BJp2zsANkgB0a9iS4ADWBATIIrbBAAkfWCaTz9PQsriqN23QaMgyZi9bIqMl4HJyA

babel:   https://www.babeljs.cn/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.12.12&externalPlugins=

2. New features of strings

2.1 Multi-line strings

var conten=`aaa
bbb
ccc`

2.2 String template

var myname ="zs";
var getAge=function(){
    return 20;
}
console.log(`<div><span>my name is ${myname}</span>my age is ${getAge()}</span></div>`);

3. New features of
    parameters 3.1 Types of parameters:

string, number, boolean, any, custom (class)
var myname="123";
myname=123;
string type, no number can be assigned
var myname:any="123";
myname=123;
defined as any type, just You can assign numbers,
custom types

class person{
    myname:string;
    age:number;
}

var aa:person =new person();
aa.myname="ssss";
aa.age=20;
console.log(aa.myname);
console.log(aa.age);  

3.2 Default parameters

   function test(a:string, b:string,c:string="cc"){
    console.log(a);
    console.log(b);
    console.log(c);
}

test("aa","bb")  

3.3 Optional parameters

   function test(a:string, b?:string,c:string="cc"){
    console.log(a);
    console.log(b);
    console.log(c);
}

test("aa")

4. New features of the function
   4.1 rest and spread operator:
used to declare any number of method parameters
      

 function func1(...args){
     args.forEach( function (arg){
 console.log(arg);
    })
}

func1(1,2,3)

func1(5,6,7,8)

  function func1(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
}

var args=[1,2]
func1(...args);

var args=[5,6,7,8,9]
func1(...args);

4.2 generator function:
control the execution process of the function,
manually pause and resume code execution
 

  function* dosomething(){
  console.log("start");
  yield;
  console.log("end");
}

var func1 = dosomething();
func1.next();

 

4.3 Destruction expression

    function getstock(){
    return {
        code :"aa",
        price:{
            price1:20,
            price2:30
        }
    }
}

var {code,code:codex,price:{price2},price:price3} = getstock();

console.log(code);
console.log(codex);
console.log(price2);
console.log(price3);

 

var arr=[1,2,3,4];

var [,,number1,number2]=arr;
var [number1,,,number2]=arr;
var [number1,number2,...others]=arr;
var [number1,,,number2,...others]=arr;
console.log(number1);
console.log(number2);
console.log(others);

operation result:

1 
4
[] 

 var arr=[1,2,3,4];

function  dosomething([number1,number2,...others]){
console.log(number1);
console.log(number2);
console.log(others);
}

dosomething(arr);

operation result:

1 
2 
[3, 4] 

5. Arrow expression
  

var myarray=[1,2,3,4]
console.log(myarray.filter(value=>value%2==0));

operation result:

2

4

6. Loop

var myarray=[1,2,3,4,5,6,7,8]

myarray.forEach(value=>console.log(value));

The result is: 1 2 3 4 5 6 7 8

var myarray=[1,2,3,4,5,6,7,8]

for(var n in myarray){
    console.log(n);
}

结果是 ："0" "1" "2" "3" "4" "5" "6" "7" "8"

var myarray=[1,2,3,4,5,6,7,8]

for(var n in myarray){
    console.log(myarray[n]);
}

The result is: 1 2 3 4 5 6 7 8

var myarray=[1,2,3,4,5,6,7,8]

for(var s of myarray){
    console.log(s);
}

The result is: 1 2 3 4 5 6 7 8

var myarray=[1,2,3,4,5,6,7,8]

for(var s of myarray){
    if(s>4) break;
    console.log(s);
}

The result is: 1 2 3 4 

for(var s of "myarray"){
    console.log(s);
}

结果是 ："m" "y" "a" "r" "r" "a" "y"