typescript（二）

一、typescript
    1，for of
        forEach()  for in & for of
        //for of 忽略数组属性，但可以跳出循环
        for(var x of arr1){
            if(x>2) break;
            console.log('for of',x);
        }
        //for of 可以遍历字符串
        for(var y of 'hello world'){
            console.log('for of str',y);
        }
    2，类（class）
        es6的class可以看做只是一个语法糖，es5都可以做到，es6中的class写法只是让对象原型更加清晰，更像面向对象编程而已
        1）类是ts的核心，使用ts开发时，大部分代码都是写在类里面的
            class Person{
                name1;
                eat(){
                    console.log('${this.name1}喜欢小花猫');
                }
            }
            var p1=new Person();
            p1.name1='小红';
            p1.eat();

            var p2=new Person();
            p2.name1='小黄';
            p2.eat();
        2）类的访问控制符：
            public(公开的),private(私有的),protected(保护的)
            peo1.name2='张三';//公共属性可以在任何地方访问
            // peo1.phone='12345';//受保护的属性只能在类内部访问或子类中访问，外部不能访问
            // peo1.eat();
            // peo1.cardNum='1234123';//私有属性和方法只能在类内部自己访问，外部任何地方都不能访问
            peo1.say();
        3）类的构造函数：
            class Student{
                //此函数就是构造函数
                //constructor 构造器
                //此函数只有在类被实例化的时候被调用
                constructor(){
                    console.log('hello world');
                }
                public name;
                public eat(){
                    console.log(`${this.name}喜欢吃肉`);
                }
            }
            类的构造多用于初始化值
                在ts中class实例化时不可以传参，但是有了构造函数就可以接收参数，并对内容进行初始化
                class Dog{
                    constructor(name:string,age:number){
                        this.name=name;
                    }
                    eat(){
                        console.log(`${this.name}喜欢吃白菜`);
                    }
                }
                var dog=new Dog('阿黄',18);
                dog.eat();
        4）类的继承（extends）
            super：用于调用父类的属性和方法
            子类使用了构造函数，父类也要用构造函数接收子类使用super传过来的参数
        5）泛型
            声明变量时可以指定变量的类型，还可以指定变量里边存的内容的类型,指定数组中只能放置什么类型的元素
    3，接口（interface）
        接口是用于建立某种代码约定，使其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定
        js中没有接口的概念，ts中提供了两个关键字来支撑接口的特性：
            声明接口：interface
            声明某个类实现了接口：implements
    4，模块
        模块可以帮助开发者将代码分割为可重用的单元，开发者可以自己决定将模块中的哪些资源（变量，方法，类）暴露出去公共外部使用，哪些资源仅仅在当前模块使用，在ts中，一个模块就是一个文件，两个关键词：
         导出：export（将资源暴露）
         导入：import（导入资源）
二、less
    1，简介
        LESS css 是一种动态的样式语言，属于css 的预处理语言的一种，使用类似css的语法，为css赋予了动态语言的特性，比如变量，继承，运算，函数等，更方便css的书写和维护
        lesscss可以在多种语言和环境下使用，包括浏览器，桌面客户端，服务器
        LESS（leaner Style Sheets）是一门向后延伸的css扩展语言，我们可以使用js工具类将less转为css使用
    2，less编译工具
        1）直接使用
            style标签的type=text/less
            引入外部文件less.min.js
        2）外部引入less文件
            link标签引入时rel='stylesheet/less',href='xxx.less'
            引入外部文件less.min.js
        3）终端编译
            全局安装less
            安装node
            使用npm安装less
                npm install -g less
                lessc -v 查看less版本
            lessc xxx.less>xxx.css
            将xxx.less转为xxx.css
        4）编译器编译
            设置--tools--file watchers--+--less--new watchers--ok
    3，less语法
        1）混合
            混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
        2）嵌套
            我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
        3）运算
            calc() css的运算
            运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。