typescript学习笔记（一）

1.在线编辑器

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. 字符串新特性

2.1 多行字符串

var conten=`aaa
bbb
ccc`

2.2 字符串模板

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

3. 参数新特性
3.1 参数类型：

string，number，boolean,any ,自定义（class）
var myname="123";
myname=123;
字符串类型，不能赋值数字
var myname:any="123";
myname=123;
定义为any类型，就可以赋值数字了
自定义类型

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 默认参数

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

test("aa","bb")

3.3 可选参数

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

test("aa")

4. 函数新特性
4.1 rest and spread操作符：
用来声明任意数量的方法参数

 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* dosomething(){
  console.log("start");
  yield;
  console.log("end");
}

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

4.3 析构表达式

    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);

运行结果：

1
4
[]

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

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

dosomething(arr);

运行结果：

1
2
[3, 4]

5. 箭头表达式

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

运行结果：

6. 循环

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

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

结果是：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]);
}

结果是：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);
}

结果是：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);
}

结果是：1 2 3 4

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

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

typescript学习笔记（一）

猜你喜欢