TS入门

作者: 笑执清茶 | 来源:发表于2019-09-26 18:10 被阅读0次

    一、ts字符串新特性:

    1.多行字符串:

     es5里直接换行会报错,必须加上+号 ,如var content = 'aaa'+

    'bbb'+

    'ccc'

    但es6双撇号``可以不用加上加号也能换行:var content = `aaa

    bbb

    ccc`

    2.字符串模板

    语法:`${变量或函数}`,比es5的字符串拼接要方便

    3.自动拆分字符串

    function test(template, name, age) {

        console.log(template);

        console.log(name);

        console.log(age);

    }

    var name = 'forrest';

    var getAge = function (){

        return 18;

    }

    test`hello,my name is ${name},i'm ${getAge()} years old.` 

    使用字符串模板运行test方法,注意格式,注意结果参数

    二、参数新特性

    1.参数类型

    参数名称后面用冒号来指定参数类型,函数后面的声明类型表示返回值类型,:void表示没有返回值,如果写return会报错

    2.默认参数

    在参数声明后面用等号来指定参数默认值

    带默认值的参数一定要声明在最后面,否则报错

    3.可选参数

    在方法的参数声明后面用问号来标明此参数为可选参数

    可选参数必须声明在必选参数的后面,否则报错

    function test(a:string,b?:string,c:string='lxc') { 

            console.log(a) 

            console.log(b)

            console.log(c)

    }

    test('a')

    输出

    a

    undefined

    lxc

    不能写成function test(a?:string,b:string,c:string='lxc')

    三、函数新特性

    1.Rest and Spread操作符

    用来声明任意数量的方法参数

    反过来传:

    2.generator函数

    控制函数的执行过程,手工暂停和恢复代码执行

    第一个next执行到第一个yield前面,只有再调用next方法才会往下走

    yield xxx在调用next方法会返回一个对象{value:xxx,done:true/false},done表示是否执行完了。

    3.destructuring析构(解构?)表达式

    通过表达式将对象或数组拆解成任意数量的变量

    四、表达式和循环

    1.箭头表达式

    用来声明匿名函数,消除传统匿名函数的this指针问题

    比较以下几种情况:

    function getSocktet(name) {

        this.name = name;

        setTimeout( () => {

            console.log(this);     // this指向实例化后的对象,this.name为IBM

        },1000);

    }

    var stock = new getSocktet("IBM");

    function getSocktet(name) {

        this.name = name;

        setTimeout( function() {

            console.log(this);     // this指向全局,this.name为undefined

        },1000);

    }

    var stock = new getSocktet("IBM");

    function getSocktet(name) {

        this.name = name;

        setTimeout(() => {

            console.log(this); 

        },1000);

    }

    var stock = getSocktet("IBM"); // 没有使用new,无论是否为箭头函数 ,this都指向window,this.name等于IBM(window也有name属性)

    2.forEach(),for in,for of

    myArray = [1,2,3,4];

    myArray.desc = 'test';

    myArray.forEach(value => {console.log(value)})    // 1,2,3,4  不能循环属性的值

    for( n in myArray) {console.log(n)} // 0,1,2,3,desc 循环的是key,可以循环属性名

    for( n in myArray) {console.log(myArray[n])}  // 1,2,3,4,test 循环的是value,可以循环属性值

    for( n of myArray) {console.log(n)}  // 1,2,3,4 循环的是value,不能循环属性值 

    for of 根据某个条件可以终止循环(break),其余两者均不能终止。

    五、面向对象特性

    1.类(class)

    类是ts核心,使用ts开发时,大部分代码是写在类里

    constructor是构造函数方法,只会在类被实例化的时候调用一次

    class Person {

        constructor(public name:string) {  // 相当于直接声明了一个name属性,实例化时必须指定name属性,注意此处访问控制符不能省略

            console.log(1);

        }

        eat() {

            console.log("eating");

        }

    }

    class Employee extends Person {

        constructor(name:string,code:string) {

            super(name); // 子类定义自己的构造函数必须先调用父类的构造函数

            console.log(2);

            this.code = code;

        }

        code : string;

        work() {

            super.eat(); // 调用父类方法

            this.doWork();

        }

        private doWork(){

            console.log("working");

           }

    }

    var a = new Person("batman")

    var e1 = new Employee("spiderman","123")   // 1 2

    e1.eat() // eating working

    e1.work() //报错 类外不能调用,访问控制符可以保证顺序,先吃饭再干活

    2.泛型(generic)

    参数化的类型,一般用来限制集合的内容

    var workers:Array<Person> = [];   // 尖括号表示泛型,表明workers的数组里的值只能是Person类型

    workers[0] = new Person("张三")

    workers[1] = new Employee("lisi","test")

    workers[2] = 'xxx'   // 报错

    3.接口(Interface)

    用来建立某种代码规定,使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定

    第一种用法:用于类的构造函数中参数的类型声明,实例化对象的时候传的参数类型必须和接口相同

    第二种用法:在类中实现接口中声明的方法

    4.模块(module)

    模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源(类、方法、变量)暴露出去供外部使用,哪些资源只在模块内使用

    5.注解(annotation)

    注解不是注释,注解为程序的元素(类、方法、变量)加上更直观更明了的说明,这些说明信息与程序的业务逻辑无关,而是供指定的框架或工具使用的

    6.类型定义文件(*.d.ts)

    类型定义文件用来帮助开发者在ts中使用已有的js工具包 如:jquery

    下载JQuery类型定义文件:https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/jquery.d.ts

    一个专门安装类型定义文件的工具 github地址:https://github.com/typings/typings

    相关文章

      网友评论

          本文标题:TS入门

          本文链接:https://www.haomeiwen.com/subject/ffwkectx.html