TypeScript类型系统和基础类型

类型系统

相对于与ES6来说,TypeScript中最大的改善就是增加了类型系统,这极大的简化了我们的开发工作。类型系统会对数据进行类型检查,以避免不必要的错误。
类型检查的好处有:

  • 有助于代码的编写,因为它可以在编译期预防bug
  • 有助于代码的阅读,因为它可以清晰地表达我们的意图

使用的方法

1.在声明变量时,可以规定变量所需要的变量类型

语法规则:

变量声明 变量名:类型;

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'.

数组指定变量类型的方式有点儿不一样,本文下面会有详细介绍。

2.在声明函数时,可以为函数参数和返回值指定类型:

语法规则:

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。

Boolean 布尔类型

布尔类型只有true(真)和false(假)两个值。

var male:boolean=true;

Number数字类型

TS所有的数字都是由浮点数表示的,这些数字的类型就是number。

var age:number=18;

String 字符串类型

string表示文本数据类型。 和JavaScript一样,可以使用双引号( “)或单引号(’)表示字符串。

var name:string = "猫猫老师";

你还可以使用模板字符串 它可以定义多行文本内嵌表达式。 这种字符串是被反引号包围( `),并且以${ expr }这种形式嵌入表达式

模板字符串 让我们不必在字符串换行时加上愚蠢的”+”号了,这增加了代码的可读性。

let person:string=`猫猫老师今年18;
性别:男;
工作是前端。`
console.log(person);
//猫猫老师今年18;
//性别:男;
//工作是前端。    

嵌入表达式 则提高了我们代码编写的速率,让代码结构更加清晰。

let name:string="猫猫老师";
let greet:string=`你好呀~${name}`
console.log(greet);//你好呀~猫猫老师

Array 数组类型

如果数组是一组相同数据类型的集合,那么这个数组有两种方式来指定数据类型。

语法规则:

  1. 数组-类型方式(又名数组泛型):Array<type>
  2. 类型-数组方式:type[]
//数组-类型方式:
    var skills:Array<string>=['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类型

如果我们没有为变量指定类型的话,那么它的默认类型就是any。在TS中,any表示可以接受任何类型的数据:

var something;
//这样的声明等同于
var something:any;

Void类型

void类型(又称为“无”类型)表示我们不期望有类型。一般用于函数的返回值,表示没有任何返回值。

function shopping(name:string):void{
    //some codes
    }

Null和Undefined类型

在TS中,undefined和null两者各自有自己的类型分别叫做undefined和null。

let u: undefined = undefined;
let n: null = null;

默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。

Never类型

never类型表示的是那么些永远不存在的值的类型。更加通俗的讲,就是那些总是会抛出异常或者根本就不会有返回值的函数

变量也可能是 never类型,当它们被永不为真的类型保护所约束时。

never的特性:

  • never 是任何类型的子类型, 并且可以赋值给任何类型.
  • 没有类型是 never 的子类型或者可以复制给 never (除了 never 本身).
  • 在一个没有返回值标注的函数表达式或箭头函数中, 如果函数没有 return 语句, 或者仅有表达式类型为 never 的 return 语句, 并且函数的终止点无法被执行到 (按照控制流分析), 则推导出的函数返回值类型是 never.
  • 在一个明确指定了 never 返回值类型的函数中, 所有 return 语句 (如果有) 表达式的值必须为 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权威教程》

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值