本文为系列文章《TypeScript系列》中的第二篇文章 -- 数据类型与断言。

基础变量声明

在TypeScript当中的变量声明方式从整体语法结构来看与JavaScript类似，但是有一些细微的差别：

/*
	let [变量]:[类型] = 值
*/
let count : number = 10;
console.log(count); // 10

这种方式实现的变量命名有一个好处,，那就是赋值语句中等号右侧值的类型和等号左侧自行定义的值的类型必须得是完全一致的，否则会报错。.

如果赋值的时候传入的是正确的数值后期又重新赋值了错误类型的值，同样也会报错。

let str:string;
if (str === undefined) { // undefined是任何类型的子类型
    str = '巧克力很苦';
    console.log(str); // 巧克力很苦
}
// str = 10 // 不能将类型“number”分配给类型“string”
console.log(str);

let [变量]:[类型] = 值

• 如果只是创造了变量并规定了类型，那么这个变量默认的值就是undefined。
• 如果只是写了一条没有确定类型的变量声明语句，那么这个变量用起来的时候就是undefined，但是一旦后面有其他的新的赋值操作，还是会按照变量的预设格式来的。

数据类型

TypeScript 和 JavaScript 的不同点之一就是TypeScript变量是强类型的( 我就是我，谁也改变不了）。简单来说就是，如果声明的变量没有声明为any类型，就不能随意的把这个变量赋值为其他类型的值。来，开始上代码。

let a = 1;
// a = 'hello' // error 报错，因为a会默认声明为number类型，不能赋值字符串类型的值

let b:any = 1;
b = 'hello'//赋值成功

在TypeScript当中基本数据类型一共分为boolean，number，string，array，tuple，enum，any，void，undefined，null，never，object一共12种类型。

有JavaScript基础的小伙伴，对上面部分的数据类型是比较熟悉的。但是有一些很陌生呀，请不要着急接下来我们来说一说这10多种类型的使用方法。

布尔类型(boolean)

布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型：

// 布尔值
let isBoolean: boolean = false;
console.log(isBoolean); // false
// 后面的约定未强调编译错误的代码片段，默认为编译通过。

let booleanObj: boolean = new Boolean(1); // error
// 不能将类型“Boolean”分配给类型“boolean”。
// “boolean”是基元，但“Boolean”是包装器对象。如可能首选使用“boolean”。

实际上 new Boolean() 返回的结果是一个 Boolean 对象。

let booleanObj: Boolean = new Boolean(1);

直接调用 Boolean 函数，也可以返回一个 boolean 类型。

let booleanObj: boolean = Boolean(1);

在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。 其他基本数据类型（除了 null 和 undefined）构造器表现都一样，不再进行单独的描述了。

数字类型(number)

和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

字符串类型(string)

在JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用string表示文本数据类型。 和JavaScript一样，可以使用双引号（"）或单引号（'）表示字符串。

let qkl: string = "巧克力";
qkl = "巧克力很苦";

你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围，并且以${ name}这种形式嵌入表达式 。

let name: string = `Gene`;
let age: number = 37;
let desc: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

这与下面定义desc的方式效果相同：

let sentence: string = "Hello, my name is " + name + ".\n\n" +
"I'll be " + (age + 1) + " years old next month.";

数组类型(array)

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。

第一种，可以在元素类型后面接上[]，表示由此类型元素组成的一个数组。

let list: number[] = [1, 2, 3];

**第二种方式是使用数组泛型，Array<元素类型>。 **

let list: Array<number> = [1, 2, 3];

元组类型(tuple)

比如，你可以定义一对值分别为string和number类型的元组。

// 声明一个元组类型
let x: [string, number];
x = ['hello', 10]; // OK
// x = [10, 'hello']; // Error 初始化错误

当访问一个已知索引的元素，会得到正确的类型。

console.log(x[0].substr(1)); // OK
// console.log(x[1].substr(1)); // Error, 错误，'number'没有'substr'

当我们访问一个越界的元素，会使用联合类型替代。

x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型

console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString

// x[6] = true; // Error, 布尔不是(string | number)类型

枚举类型(enum)

enum Color {Red, Green, Blue}

以上的代码编译成JavaScript代码

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));

在默认情况下，enum从0开始为元素编号。( 如果没有给标识符赋值，那么标识符的值默认为索引值)。

/*
    enum 枚举名{
       标识符=整形常数,
       标识符=整形常数,
       ......
       标识符=整形常数
    };
    定义一个枚举类型
*/
enum ColorIndex {Red = 1, Green = 10, Blue = 5}
// 输出
// { '1': 'Red', '5': 'Blue', '10': 'Green', Red: 1, Green: 10, Blue: 5 } 

enum Color = {Red = 1, {"y":1}, Blue} // 报错
// 或者是
let o = {x:1}
enum ColorTwo = {Red = 1, o, Blue} // 报错

例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2]
console.log(colorName); // 显示'Green',因为上面的代码里面的值是2

任意类型(any)

这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量。

let myName : any = 4
console.log(myName); // 4
myName = '巧克力' 
console.log(myName)// 巧克力
myName = {
    name: '巧克力',
    age:18
}
console.log(myName); // {name:'巧克力',age:18}

void类型

在TypeScript中函数的void类型表示其返回值的类型，函数类型为void表示其没有返回值。

function run() : void {
    console.log(123);
    // return 不能有返回值，否则会报错
}
function fun1() : number {
    console.log(345);
    return 123 // 必须有返回值，并且返回值必须是number值，否则会报错
}
function fun2() : any {
    console.log(789); // 因为any是任意类型，所以也可以不要返回值
}

undefined和null类型

let flag : undefined;
/*
    或者是 let flag:undefined=undefined;
*/
console.log(flag); // undefined

let flag1 : null = null; // 如果不指定值为null那么打印的时候也会报错
console.log(flag1); // null

let num : number = undefined
let str : string = null

// 为变量指定多种可能的类型
let one : number | undefined; // 这种写法就不会在没有赋值的时候报错了，因为你设置了可能为undefined
console.log(one);
one = 123
console.log(flag); // 123可以改完数值类型

// 也可以设定多个类型
let tow : number | string | null | undefined;
tow = 123;
console.log(tow); //123
tow = null;
console.log(tow); //null
tow = "string";
console.log(tow); //string

never类型

这个严格来说算不上啥新的数据类型，只是开发者对于一类值所起的作用的判断而已。

比如：

1. 总是会抛出异常， throw错误或是返回一个error类型的数据。
2. 根本就不会有返回值的函数表达式(死循环函数)。

// 返回never的函数必须存在无法达到的终点
function error (message:string) : never {
    throw new Error(message);
}
// 推断的返回值的类型为never
function fail () : never {
    return error('Something failed')
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop () : never {
    while (true) {}
}

let c : never; // c变量不可以被任何数据类型赋值，包括null和undefined，之不会出现的值
let n : string
n = '666'
c = '哈哈' // 报错
// 不报错,一个抛出错误的函数就是never类型的
c = (() => {
    throw new Error('error')
})()
// 不报错,never类型的数据可以赋值给其他类型的变量
n = (() => {
   throw new Error('error') 
})()

object类型

let stu : object = {name: '张三',age:18}
console.log(stu); // {name: '张三', age:18}
// 也可以
let stuTwo : {} = {name: '张三',age:18}
console.log(stuTwo);
// 或者是我们限时当前object对象里面的属性和值的类型
let obj: {name: string, age: number} = {name: '巧克力', age: 18}
console.log(obj);

declare function create(o: object | null): void;
//declare是一个声明的关键字,可以写在声明一个变量时解决命名冲突的问题
create({ prop: 0 }); // OK
create(null); // OK

create(42); // 报错
create("string"); // 报错
create(false); // 报错
create(undefined); // 报错

类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。

通常这会发生在你清楚地知道一个变量具有比它现有类型更确切的类型(比如说满是数字的数组，或是全都是自然数下标的对象，这只是一个举例)。

它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

类型断言有两种方式

1. 尖括号写法

   let someValue : any = 'this is a string'
   // 如果写的是any找字符串的length属性的话，编译器是找不到length属性的
   // 类型断言断言后是可以知道的
   let strLength : number = (<string>someValue).length
   console.log(strLength);
   

2. as语法

   let someValue : any = 'this is a string'
   let strLength : number = (someValue as string).length
   console.log(strLength);
   

最后

本章节：思维导图

文章发布时间：2021-1-3。