ts笔记（1）

一、typescript
    1.简介
        typescript是JavaScript的一个超集(遵循es6语法),是微软发明的
        ts作为js的一个语法糖,类似于css的less和sass,ts相比js更易于维护开发,但是最后还是需要编译为js
        ts ==> Microsoft
        ts ==> Angular4 ==> Google
        ts支持es6规范,Angular4的开发语言,编译器(IDE)的支持性很好
    2.安装ts环境
        1) 安装node.js
        2) 安装ts
            mac:sudo npm install -g typescript
            window:npm install -g typescript
            使用命令：tsc -v,显示版本号说明安装成功
    3.ts语法编译
        1) 在线编译
        2) 使用终端
            进入文件夹 cd
            使用命令tsc xxx.ts,可以将xxx.ts文件转为js文件
        3) IDE对ts强大的支持可以帮我们直接编译
        4) 直接在<script type='text/typescript'></script>中写ts语法,使用
            <script src="../lib/typescript.min.js"></script>
            <script src="../lib/typescript.compile.min.js"></script> 对ts进行编译
    4.字符串string
        多行字符串:
                var con=`hello
                word`;
                console.log(con);
        字符串模板:
            var a="lisi";
            var geta=function () {
                return 'lisi';
            }
            console.log(`我是${a}`);
            console.log(`我是${geta()}`);
        拆分字符串:
            function fun(temp,name,age,sex) {
                console.log(temp);
                console.log(name);
                console.log(age);
            }

            var myname='lisi';
            var getAge=function () {
                return 23;
            };
            var sex='男';
            fun `我的名字是${myname},今年${getAge()}岁,我是${sex}的`;
            //参数1：是一个数组,保存自动拆分的字符串
    5.指定变量和参数类型
        1) 在定义变量时后边直接加上变量的类型
            var a = 10; a = 'lisi';
            ==> ts
            var a:number = 10; a = 'lisi';//报错
            ts对变量有一个新的类型推断机制,在第一次为某个变量赋值时,自行推断这个变量是什么类型,之后在对这个变量赋值为其他类型是不被允许的
            如果将变量类型改为any,就可以随便赋值
            指定其他类型：
                var str:string='123';
                var b:boolean=true;
        2) void类型
            一般用于函数声明时,如果函数声明了void,就说明该函数不需要返回值,如果有返回值语法报错
            语法：
                function test():void{
                    //不可以在这里使用return
                }
        3) 指定函数返回值类型
            function test1():string {
                // return 123;//返回类型必须是字符串,否则报错
                return '123';
            }
        4) 指定函数参数类型
            function test2(name:string,age:number):object {
                return {
                    name:name,
                    age:age
                }
            }
            console.log(test2('lisi',23));
        5) 通过class自定义类型,这样的好处在于实例化类的时候可以自动提示类里边的属性
            class Person{
                name:string;
                age:number;
                sex:string;
            }
            var info:Person=new Person();
            // info=123;//语法报错
            info.name='lisi';
            info.age=23;
            info.sex='男';
            console.log(info);
        6) 函数参数指定类型的默认值
            带有默认值的参数一定放在尾参数
            function test3(a:string,b:number,c:string='lisi') {
                console.log(a,b,c);
            }
            test3('wangwu',23);
            test3('mazi',12,'lalala');
        7) 可选参数
            使用问号(?)表明该参数是可选参数
            注意：必选参数不能放在可选参数之后,有默认值的参数一定是尾参数
            function test4(a:string,b?:number,c:boolean=true) {
                console.log(a,b,c);
            }
            test4('lisi');//lisi undefined true
            test4('lisi',23);//lisi 23 true
            test4('lisi',12,false);//lisi 12 false
    6.函数
        1) rest and spread 操作符,用来声明任意数量的参数
            function fun1(...args) {
                console.log(args);
            }
            fun1(1,2,3,4);
            fun1(1,2,3,4,333);
            fun1(1);
        2) Generator函数:
            用于控制函数的执行过程,手动暂停和恢复代码执行
            yield:暂停
            .next:恢复
            函数的执行需要将函数赋值给一个变量,调用next进行一步一步的执行
            运行逻辑：
                (1) 当程序遇到yield,暂停执行后边的操作,并将紧跟在yield后边的那个表达式作为返回值的对象的value的属性值,
                (2) 下一次next方法时,继续向下执行,直到遇到下一个yield
                (3) 如果没有在遇到yield,直接运行到函数结束,到return为止,并且将return后边的语句的表达式的值,作为返回对象的value的属性值
                (4) 如果该函数没有return,那么返回对象的value属性值是undefined
                    fun5.next() 会返回一个对象,该对象中有两个属性,value,值是yield后边的内容,一个是done,布尔值,表示遍历是否结束
                    注意：如果Generator函数中没有yield,这个函数就变成了延缓执行的函数,调用next就会执行整个函数
        3) 析构函数
            通过表达式将对象或数组拆分成任意数量的变量,也就是es6的解构
        4) 箭头表达式
            用来声明匿名函数,消除传统的匿名函数中this指向问题