相对于与ES6来说,TypeScript中最大的改善就是增加了类型系统,这极大的简化了我们的开发工作。类型系统会对数据进行类型检查,以避免不必要的错误。
类型检查的好处有:
语法规则:
变量声明 变量名:类型;
e.g.
var name:string;
let age:number;
const male:boolean;
当然你也可以赋值:
var name:string='猫猫老师';
let age:number=18;
const male:boolean=true;
如果你输入了错误的期望值,那么会报错:
var job:string=true;
//Type 'true' is not assignable to type 'string'.
数组指定变量类型的方式有点儿不一样,本文下面会有详细介绍。
语法规则:
function 函数名(变量名:形参类型):返回值类型{}
e.g.
function greet(name:string):string{
return "hello"+name;
}
如果你输入了错误的参数,那么会报错:
greet(18);
//Argument of type '18' is not assignable to parameter of type 'string'.
TS的基础类型有除了有我们所熟悉的Boolean、Number、String、Array、null 和 undefined,还有新增了enum、any、void、never。
布尔类型只有true(真)和false(假)两个值。
var male:boolean=true;
TS所有的数字都是由浮点数表示的,这些数字的类型就是number。
var age:number=18;
string表示文本数据类型。 和JavaScript一样,可以使用双引号( “)或单引号(’)表示字符串。
var name:string = "猫猫老师";
你还可以使用模板字符串 它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围( `),并且以${ expr }这种形式嵌入表达式
模板字符串 让我们不必在字符串换行时加上愚蠢的”+”号了,这增加了代码的可读性。
let person:string=`猫猫老师今年18;
性别:男;
工作是前端。`
console.log(person);
//猫猫老师今年18;
//性别:男;
//工作是前端。
嵌入表达式 则提高了我们代码编写的速率,让代码结构更加清晰。
let name:string="猫猫老师";
let greet:string=`你好呀~${name}`
console.log(greet);//你好呀~猫猫老师
如果数组是一组相同数据类型的集合,那么这个数组有两种方式来指定数据类型。
语法规则:
//数组-类型方式:
var skills:Array=['ES5','ES6','Angular','Node.js'];
//类型-数组方式:
var hobbies:string[]=['前端','轻音乐','电竞','游泳'];
//使用ES6的箭头函数,遍历输出skills的所有值。
skills.forEach(x=>console.log(x))
//ES5
//ES6
//Angular
//Node.js
hobbies.forEach(x=>console.log(x))
//前端
//轻音乐
//电竞
//游泳
箭头函数是一种快速书写函数的简洁语法,本系列其他文章我们会详细讲解。
如果数组中的元素数据类型不相同,我们可以称之为元组(Tuple)。
语法规则:
[type1, type2…typeX]
let x:[string,number,boolean];
x=["hello",1,true];
console.log(x[0])//hello
x=[1,1,1];//报错
//Type '[number, number, 1]' is not assignable to type '[string, number, boolean]'.
//Type 'number' is not assignable to type 'string'.
枚举类型是一组可以命名数值的集合。使用枚举类型可以为一组数值赋予友好的名字。
默认情况下,从0开始为元素编号:
enum color {red,green,blue};
let c:color=color.green;
console.log(c)//1
当然我们也可以从1(或者其他数)开始编号:
enum color {red=1,green,blue};
let c:color=color.green;
console.log(c)//2
再或者全部手动赋值:
enum color {red=1,green=3,blue=5};
let c:color=color.green;
console.log(c)//3
元素编号是递增的,指定元素编号的下一个元素总是比指定元素编号要大1。(如果下个元素没指定编号的话)
enum color {red=1,green=3,blue};
let c:color=color.blue;
console.log(c)//4
同样,我们可以通过元素编号来获取元素
enum color {red,green,blue};
let c=color[2];
console.log(c)//blue
如果我们没有为变量指定类型的话,那么它的默认类型就是any。在TS中,any表示可以接受任何类型的数据:
var something;
//这样的声明等同于
var something:any;
void类型(又称为“无”类型)表示我们不期望有类型。一般用于函数的返回值,表示没有任何返回值。
function shopping(name:string):void{
//some codes
}
在TS中,undefined和null两者各自有自己的类型分别叫做undefined和null。
let u: undefined = undefined;
let n: null = null;
默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。
never类型表示的是那么些永远不存在的值的类型。更加通俗的讲,就是那些总是会抛出异常或者根本就不会有返回值的函数。
变量也可能是 never类型,当它们被永不为真的类型保护所约束时。
never的特性:
// 返回never的函数必须存在无法达到的终点(抛出异常,程序提前终止)
function error(message:string): never {
throw new Error(message);
}
// 推断的返回值类型为never(永远不可能执行到最后)
function fail(direction:boolean) {
if(direction){
return 1;
}else{
return -1;
}
return error("永远不应该到这里");
}
// 返回never的函数必须存在无法达到的终点(死循环,程序不会终止)
function infiniteLoop(): never {
while (true) {
}
}
never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使 any也不可以赋值给never。
参考资料:
TS官网
TypeScript 2.0 新特性一览
《Angular权威教程》