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