TypeScript 语法简述

一、字符串新特性

该特性最适用于动态拼接 html，首尾的符号为``(键盘 Esc 下面的键)，处理变量的符号为 ${}。

var html = '';
var text = '文本';
html+=`<div><div><div><div><div><div><div><div><div>${text}</div></div></div></div></div></div></div></div></div>`;
document.body.innerHTML = html;

二、变量类型特性

这应该是TS最显著的一个特性了，与ES最大的不同就是可以给变量指定类型，在变量名称后面用冒号:来指定类型。

//1.指定类型
var name:string = "wxp";
name = "123";//报错；指定了变量类型为字符串，所以不能用数字赋值

//2.没显式指定类型，但是隐式的指定了类型；
var name = "wxp";
name = 123;  //报错；没显式指定类型，但是赋值的时候隐式的指定了类型。

//3.想要使用任何类型
var name:any = "wxp";
name = 123   //不会报错，任何类型都可以。

三、参数特性

可以设置参数默认值和可选参数。

//1.参数默认值
function obj(a:string,b:string,c:string = "wxp"){
console.log(a);//1
console.log(b);//2
console.log(c);//wxp，注意如果没有给默认值，这里就会报错。
};
obj("1","2");

//2.可选参数,在参数后面用?表示
function obj(a:string,b?:string,c:string = "wxp"){
console.log(a);//1
console.log(b);//undefined
console.log(c);//wxp，注意如果没有给默认值，这里就会报错。
};
obj("1");

//注意：必选参数一定要在可选参数和默认参数前。

四、函数新特性

Rest and Spread 操作符，用来声明任意数量的方法参数。

var arr=[1,2];
function obj(a,b,c){
console.log(a);1
console.log(b);2
console.log(c);//undefined
};
obj(...arr);

五、析构表达式

简化获取属性值。

//1.对象析构表达式
var obj = {
name:'wxp',
age:123,
son:{
  name:'jack'
}
};
var {name:nameOther,age,son:{name}} = obj;
console.log(nameOther);//wxp,注意nameOther为别名，可以取任意名字，但是前面name要与属性name对应
console.log(age);//123
console.log(name);//jack，这个名字是从son这个对象取出来的

//2.数组析构表达式
//写法1
var arr=[1,2,3,4];
var [num1,num2] = arr;
console.log(num1);//1
console.log(num2);//2
//写法2
var arr=[1,2,3,4];
var [,,num1,num2] = arr;
console.log(num1);//3
console.log(num2);//4
//写法3
var arr=[1,2,3,4];
var [num1,num2,..others] = arr;
console.log(num1);//1
console.log(num2);//2
console.log(others);//[3,4]

六、类

class Person{
 
constructor(public name:string){

};//参数public name:string  相当于定义了name属性
 public title:string;      //public修饰符内外都可以访问
 private age:number;       //private修饰符只在内部可以访问
 protected content:string; //protected修饰符只在内部和子类可以访问
};
var zhangsan = new Person('zhangsan');
zhangsan.title = '标题';
zhangsan.age = 20;//报错，私有变量，外部访问不到
zhangsan.content = '内容';//报错，受保护的变量，外部访问不到

七、泛型

泛型是参数化的类型，一般用来限制集合的内容。

var arr:Array<Person>=[];//<>表示数组元素类型;
arr[0] = new Person('lisi');
arr[1] = 3;//报错，数组元素必须是 Person;

八、接口

调用某个方法必须遵守接口所定义的代码约定。

//1.用作方法的参数类型
interface MyPerson{
name:string;
age:number;
};
class Person{

constructor(public param:MyPerson){

}
};
var zhangsan = new Person({
name:'zhangsan',
age:20
});//Person类传的参数必须满足MyPerson规定的参数形式。

//2.实现接口方法
interface Person{
     doSomething();
}
class Person1 implements Person{
     doSomething(){
        console.log('i am working');
   }
}
class Person2 implements Person{
     doSomething(){
        console.log('i am eating');
   }
}

九、注解

为程序的元素加上说明，与业务逻辑无关，主要供指定的工具或框架使用。