zoukankan      html  css  js  c++  java
  • typeScript的入门学习

    (1)字符串

    ``

    多行字符串

    (1)

    //typeScript
    var
    b = `aaa ccc qqq`

    编译:

    //js
    var b = "aaa
    ccc
    qqq";

    (2)

    //typeScript
    var myname="limei";
    var getName=function(){
        return "limei"
    }
    console.log(`hello ${myname}`);
    console.log(`hello ${getName()}`)

    编译:

    //js
    var myname = "limei";
    var getName = function () {
        return "limei";
    };
    console.log("hello " + myname);
    console.log("hello " + getName());

    字符串模板

    //typeScript
    var myname="limei";
    var bbb=`<s>${myname}</s>
    <b>${myname}</b>
    `;
    document.getElementById('bbb').innerHTML=bbb

    编译:

    //js
    
    var myname = "limei";
    var bbb = "<s>" + myname + "</s>
    <b>" + myname + "</b>
    ";
    document.getElementById('bbb').innerHTML = bbb;

    自动拆分字符串

    //typeScript
    function test(template,name,age){
        console.log(template);
        console.log(name);
        console.log(age);
    }
    var myname="li mei";
    
    var getAge=function(){
        return 18
    }
    test`hello my name is ${myname},i'm ${getAge()}`

    编译:

    //js
    function test(template, name, age) {
        console.log(template);
        console.log(name);
        console.log(age);
    }
    var myname = "li mei";
    var getAge = function () {
        return 18;
    };
    (_a = ["hello my name is ", ",i'm ", ""], _a.raw = ["hello my name is ", ",i'm ", ""], test(_a, myname, getAge()));
    var _a;

    参数的新特性

    参数类型

    //typeSCript
    
    var myname:string="limei";
    myname=13
    var alias="xixi";
    alias=13;
    //在typeScript中会报错,但是编译器还是会编译

    //string number boolean any

    函数的定义类型

    function test(name:string)  :string{
        return ""
    }

    参数的类型

    //typeScript
    class Person{
        name:string;
        age:number;
    }
    var zhangsan:Person=new Person();
    zhangsan.age=18;
    zhangsan.name="zhangsan";

    编译:

    var Person = (function () {
        function Person() {
        }
        return Person;
    }());
    var zhangsan = new Person();
    zhangsan.age = 18;
    zhangsan.name = "zhangsan";

    默认参数

    //typeScript
    var myname:string="limei";
    function xxx(a:string,b:string,c:string="jojo"){
        console.log(a);
        console.log(b);
        console.log(c);
    }
    xxx("xxx","yyy","zzz");
    xxx("xxx","yyy");

    编译:

    var myname = "limei";
    function xxx(a, b, c) {
        if (c === void 0) { c = "jojo"; }
        console.log(a);
        console.log(b);
        console.log(c);
    }
    xxx("xxx", "yyy", "zzz");
    xxx("xxx", "yyy");

    可选参数(可选参数不能放在必选参数后面)

    //typeScript
    var myname:string="limei";
    function xxx(a:string,b?:string,c:string="jojo"){
        console.log(a);
        console.log(b);
        console.log(c);
    }
    xxx("xxx");
    //a :xxx
    //b:undefined
    //c

    编译:

    var myname = "limei";
    function xxx(a, b, c) {
        if (c === void 0) { c = "jojo"; }
        console.log(a);
        console.log(b);
        console.log(c);
    }
    xxx("xxx");
    //a :xxx
    //b:undefined
    //c 

    函数新特性 rest和spread操作符(声明任意数量的方法参数)

    function func1(...args){
        args.forEach(function(arg){
            console.log(arg)
        })
    }
    func1(1,2,2,"222");

    编译:

    function func1() {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        args.forEach(function (arg) {
            console.log(arg);
        });
    }
    func1(1, 2, 2, "222");
    //typeScript语法还不支持,但是编译出来的可以
    function
    func1(a,b,c){ console.log(a); console.log(b); console.log(c); } var args=[1,2]; func1(...args);

    编译:

    function func1(a, b, c) {
        console.log(a);
        console.log(b);
        console.log(c);
    }
    var args = [1, 2];
    func1.apply(void 0, args);

    generator函数(控制函数的执行过程,手工暂停和恢复代码执行)(不能编译,可以在babel中编译)

    destructuring析构表达式(通过表达式将对象或数组拆成任意数量的变量)

    类的使用

     

    //ts
    class Person{ constructor(name:string){
    this.name=name; } name:string; eat(){ console.log("I'm eating") } } //构造函数在实例化的过程中被调用 class Employee extends Person{ constructor(name:string,code:string){ super(name); this.code=code } code:string; work(){ console.log("haha") super.eat(); } }

    编译:

    //js
    var
    __extends = (this && this.__extends) || (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); var Person = (function () { function Person(name) { this.name = name; } Person.prototype.eat = function () { console.log("I'm eating"); }; return Person; }()); //构造函数在实例化的过程中被调用 var Employee = (function (_super) { __extends(Employee, _super); function Employee(name, code) { var _this = _super.call(this, name) || this; _this.code = code; return _this; } Employee.prototype.work = function () { console.log("haha"); _super.prototype.eat.call(this); }; return Employee; }(Person));

    泛型

    //ts
    class Person{ constructor(name:string){
    this.name=name; } name:string; eat(){ console.log("I'm eating") } } //构造函数在实例化的过程中被调用 class Employee extends Person{ constructor(name:string,code:string){ super(name); this.code=code } code:string; work(){ console.log("haha") super.eat(); } } //泛型 (参数化的类型,一般用来限制集合的内容) var workers: Array<Person>=[]; workers[0]=new Person("zhangsan"); workers[1]=new Employee("lisi","1")

    编译

    var __extends = (this && this.__extends) || (function () {
        var extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return function (d, b) {
            extendStatics(d, b);
            function __() { this.constructor = d; }
            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
        };
    })();
    var Person = (function () {
        function Person(name) {
            this.name = name;
        }
        Person.prototype.eat = function () {
            console.log("I'm eating");
        };
        return Person;
    }());
    //构造函数在实例化的过程中被调用
    var Employee = (function (_super) {
        __extends(Employee, _super);
        function Employee(name, code) {
            var _this = _super.call(this, name) || this;
            _this.code = code;
            return _this;
        }
        Employee.prototype.work = function () {
            console.log("haha");
            _super.prototype.eat.call(this);
        };
        return Employee;
    }(Person));
    //泛型 (参数化的类型,一般用来限制集合的内容)
    var workers = [];
    workers[0] = new Person("zhangsan");
    workers[1] = new Employee("lisi", "1");
    接口
    用来建立某种代码约定,使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定
    //ts
    interface Iperson{
        name:string;
        age:number;
    }
    class Person{
        constructor(public config:Iperson){
    
        }
    }
    var p1=new Person({name:"limei",age:18})

    编译:

    var Person = (function () {
        function Person(config) {
            this.config = config;
        }
        return Person;
    }());
    var p1 = new Person({ name: "limei", age: 18 });

    使用接口实现类

    interface Animal{
        eat();
    }
    class Sheep implements Animal{
       eat(){
           console.log("i eat grass")
       }
    }
    class Tiger implements Animal{
        eat(){
            console.log("i'm eat meat")
        }
    }
    var Sheep = (function () {
        function Sheep() {
        }
        Sheep.prototype.eat = function () {
            console.log("i eat grass");
        };
        return Sheep;
    }());
    var Tiger = (function () {
        function Tiger() {
        }
        Tiger.prototype.eat = function () {
            console.log("i'm eat meat");
        };
        return Tiger;
    }());

    注解(annotation)

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

     
  • 相关阅读:
    浙大数据结构课后习题 练习二 7-2 Reversing Linked List (25 分)
    浙大数据结构课后习题 练习二 7-2 一元多项式的乘法与加法运算 (20 分)
    浙大数据结构课后习题 练习一 7-1 Maximum Subsequence Sum (25 分)
    浙大数据结构课后习题 练习一 7-1 最大子列和问题 (20 分)
    PAT Basic 1019 数字黑洞 (20 分)
    PAT Basic 1017 A除以B (20 分)
    PAT Basic 1013 数素数 (20 分)
    PAT Basic 1007 素数对猜想 (20 分)
    PAT Basic 1003 我要通过! (20 分)
    自动化运维——HelloWorld(一)
  • 原文地址:https://www.cnblogs.com/heyinwangchuan/p/6962306.html
Copyright © 2011-2022 走看看