TypeScript类型系统和基础类型

2023-12-04 10:23:46

类型系统

相对于与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;
性别:男;
工作是web前端。`
console.log(person);
//张三今年18;
//性别:男;
//工作是web前端。

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

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

Array 数组类型

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

语法规则：

数组-类型方式（又名数组泛型）：Array
类型-数组方式：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权威教程》

码农公寓