zoukankan      html  css  js  c++  java
  • typescript的概要

    1.字符串新特性:

    typescript代码:

    function text(temple, name, age) {
    console.log(temple);
    console.log(name);
    console.log(age);
    }

    var myname = "wang tingtign";
    var getAge = function () {
    return 18;
    }

    text`my name is ${myname},and i am is ${getAge()}`

    翻译过来的JavaScript代码:

    var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
    };
    function text(temple, name, age) {
    console.log(temple);
    console.log(name);
    console.log(age);
    }
    var myname = "wang tingtign";
    var getAge = function () {
    return 18;
    };
    text(__makeTemplateObject(["my name is ", ",and i am is ", ""], ["my name is ", ",and i am is ", ""]), myname, getAge());

    2.参数新特性

    参数类型

    var myname:string = "张三"

    function test(name:string):void{  //这里的void是说没有任何返回值,将void改成string就是返回字符串的返回值,参数也可以声明类型
    }

    自定义类型--接口

    class Person{

    name:string;

    age:number;

    }

    var zhangsan:Person = new Person();

    zhangsan.name = "zhagnsan";

    zhangsna.age = 18;

    参数默认值

    function test(a:string,b:string,c:string="jojo"){

    console.log(a);

    console.log(b);

    console.log(c);

    }

    test("xxx","hhh");  //在方法里有了默认值之后就可以不用在定义,带默认值的参数一定要放在最后

    可选参数用?

    function test(a:string,b?:string,c:string="jojo"){

    console.log(a);

    console.log(b);

    console.log(c);

    }

    test("xxx");  

    3.函数新特性

    rest and spread

    function test(...args){  //可以传任意数量的参数进来

    args.forEach(function(arg){

    console.log(arg);

    })

    }

    test(1,2,3,4,5,6,7);

    generotar(需要用babel编译器;控制函数的执行过程,手工暂停和恢复代码执行)

    function* text(){

    console.log("start");

    yield;

    console.log("finish");

    }

    var funct1 = text();

    funct1.next();   //在调用next方法的时候就会执行函数到关键字yield

    funct1.next();

    析构表达式

    1.function getstock(){

    return {code:'ibm',price:100}

    }

    var {code,price} = getstrock();

    2.function getstock(){

    return {code:'ibm',price:{

            price1:100,

            price2:200

    }}

    }

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

    console.log(codex);

    console.log(price2);

    3.var array1 = [1,2,3,4];

    var [,,number1,number2] = array1;

    var [number1,number2,...others] = array1

    console.log(number1); //3

    console.log(number2); //4

    console.log(others); //34

    4.箭头函数  (消除javascript关键字带来的问题)

    var myArray = [1,2,3,4,5,6];

    console.log(myArray.filter(   //需要的参数就是一个匿名函数

    value => return value%==2;

    ));  //2,4

    5.for of循环

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

    array.desc = "for number";

    for(var n in array){

    console.log(n);  //(循环的是键值对里面的键的名字key)

    console.log(array[n]);  //(循环的是键值对里面的值)

    }

    for(var n of array){  //可以打断

    if(n>2) break;

    console.log(n);  //循环的是键值对里面的键的值

    }

    6.面向对象特性

    1.类

    class Person{  //这是一个完整的类

    name;  //属性,   访问符public可以在内部和外部访问,不写public时则是默认为public,private则是外部访问不了,protected则是在内部和子类访问

    eat(){  //方法

    console.log("im eat ing");

    }

    }

    var p1 = new Person();   //关键字new实例化Person

    p1.name = "batman";

    p1.eat();

    var p2 = new Person();   //关键字new实例化Person

    p2.name = "pink";

    p2.eat();

    2.类的构造函数就是类里面的一个特殊的方法

    class Person{

    constructor(){

    console.log("wtt");

    }

    name; 

    eat(){ 

    console.log("im eat ing");

    }

    }

    var p1 = new Person();   

    p1.name = "batman";

    p1.eat();

    结果:batman, wtt,im eat ing

    3.构造函数的作用:在实例化的时候可以赋给名字

    class Person{

    constructor(public name:string){  //声明了一个name属性,如果没有public是没有name属性的

    }

    eat(){ 

    console.log(this.name);

    }

    }

    var p1 = new Person("wtt");   

    p1.eat();  //结果:wtt

    4.类的继承

    class Person{

    constructor(public name:string){ 

    }

    eat(){ 

    console.log(this.name);

    }

    }

    class Employee extends Person{  //类Employee继承了 类Person的所有属性和方法

    code:string; //可以定义新的属性和方法

    work(){}

    }

    var e1 = new Employee("wtt");

    5.super

    class Person{

      constructor(public name:string){ 

        console.log("haha");

      }

      eat(){ 

        console.log("im eating");

      }

    }

    class Employee extends Person{  

      constructor(name:string,code:sring){  //这里是子类的构造函数必须调用父类的构造函数

        super(name);

        console.log("xixi");

        this.code = code;

      }

      code:string;

      work(){

        super.eat();

        this.dowork();

      }

      dowork(){

        console.log("im working");

      }

    }

    var e1 = new Employee("wtt","1"); //haha,xixi

    e1.work();  //im eating,im working

  • 相关阅读:
    Object.keys方法之详解
    ackbone入门系列(5)路由
    backbone入门系列(4)集合
    backbone入门系列(3)视图
    backbone入门系列(2)模型
    backbone入门系列(1)基本组成部分
    $(document).ready(function(){ })、window.onload=function(){}与(function($){...})(jQuery)的对比和作用
    backbone笔记1,MVC
    用Object.prototype.toString()来检测对象的类型
    Python生成requirements.txt方法
  • 原文地址:https://www.cnblogs.com/wtt577474/p/10104318.html
Copyright © 2011-2022 走看看