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）

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