面向初学者的TypeScript，第2部分：基本数据类型

阅读TypeScript入门教程后 ，您现在应该能够在支持它的IDE中编写自己的TypeScript代码，然后将其编译为JavaScript。 在本教程中，您将学习TypeScript中可用的各种数据类型。

JavaScript具有七种不同的数据类型：Null，Undefined，Boolean，Number，String， Symbol （在ES6中引入）和Object。 TypeScript定义了更多类型，本教程将详细介绍所有这些类型。

空数据类型

就像JavaScript中一样，TypeScript中的null数据类型只能有一个有效值： null 。 空变量不能包含其他数据类型，例如数字和字符串。 将变量设置为null将删除其内容（如果有的话）。

请记住，当strictNullChecks标志设置为true在tsconfig.json，只有null值分配给具有空类型变量。 默认情况下，此标志是关闭的，这意味着您还可以将null值分配给其他类型的变量，例如number或void 。

// With strictNullChecks set to true
let a: null = null; // Ok
let b: undefined = null; // Error
let c: number = null; // Error
let d: void = null; // Error

// With strictNullChecks set to false
let a: null = null; // Ok
let b: undefined = null; // Ok
let c: number = null; // Ok
let d: void = null; // Ok

未定义的数据类型

任何未指定其值的变量都将设置为undefined 。 但是，您也可以将变量的类型显式设置为undefined，如以下示例所示。

请记住， type设置为undefined的变量只能将undefined作为其值。 如果strictNullChecks选项设置为false ，则还可以将undefined分配给具有数字和字符串类型等的变量。

// With strictNullChecks set to true
let a: undefined = undefined; // Ok
let b: undefined = null; // Error
let c: number = undefined; // Error
let d: void = undefined; // Ok

// With strictNullChecks set to false
let a: undefined = undefined; // Ok
let b: undefined = null; // Ok
let c: number = undefined; // Ok
let d: void = undefined; // Ok

无效数据类型

void数据类型用于表示缺少变量type 。 将变量设置为void类型可能不是很有用，但是您可以将不返回任何内容的函数的返回类型设置为void 。 与变量一起使用时， void类型只能具有两个有效值： null和undefined 。

// With strictNullChecks set to true
let a: void = undefined; // Ok
let b: void = null; // Error
let c: void = 3; // Error
let d: void = "apple"; // Error

// With strictNullChecks set to false
let a: void = undefined; // Ok
let b: void = null; // Ok
let c: void = 3; // Error
let d: void = "apple";  // Error

布尔数据类型

与number和string数据类型不同， boolean只有两个有效值。 您只能将其值设置为true或false 。 这些值在控制结构中使用很多，在控制结构中，如果条件为true ，则执行一段代码，如果条件为false则执行另一段代码。

这是一个声明布尔变量的非常基本的示例：

let a: boolean = true;
let b: boolean = false;
let c: boolean = 23; // Error
let d: boolean = "blue"; // Error

数字数据类型

number数据类型用于表示JavaScript和TypeScript中的整数和浮点值。 但是，您应该记住，所有数字在内部都表示为浮点值。 数字也可以指定为十六进制，八进制或二进制文字。 请记住，ES6中引入了八进制和二进制表示形式，这可能会导致基于目标版本的不同JavaScript代码输出。

number类型下还有三个附加的特殊符号值： +Infinity ， -Infinity和NaN 。 以下是一些使用number类型的示例。

// With strictNullChecks set to true
let a: number = undefined; // Error
let b: number = null; // Error
let c: number = 3;
let d: number = 0b111001; // Binary
let e: number = 0o436; // Octal
let f: number = 0xadf0d; // Hexadecimal
let g: number = "cat"; // Error

// With strictNullChecks set to false
let a: number = undefined; // Ok
let b: number = null; // Ok
let c: number = 3;
let d: number = 0b111001; // Binary
let e: number = 0o436; // Octal
let f: number = 0xadf0d; // Hexadecimal
let g: number = "cat"; // Error

当目标版本设置为ES6时，以上代码将编译为以下JavaScript：

let a = undefined;
let b = null;
let c = 3;
let d = 0b111001;
let e = 0o436;
let f = 0xadf0d;
let g = "cat";

您应该注意，仍使用let声明了JavaScript变量，这是ES6中引入的。 您也看不到任何与不同变量type有关的错误消息，因为JavaScript代码不了解我们在TypeScript代码中使用的类型。

如果目标版本设置为ES5，我们之前编写的TypeScript代码将编译为以下JavaScript：

var a = undefined;
var b = null;
var c = 3;
var d = 57;
var e = 286;
var f = 0xadf0d;
var g = "cat";

如您所见，这次所有let关键字的出现都已更改为var 。 另请注意，八进制和二进制数字已更改为十进制形式。

字符串数据类型

字符串数据类型用于存储文本信息。 JavaScript和TypeScript都使用双引号（“）和单引号（'）来将您的文本信息围成字符串。字符串可以包含零个或多个用引号引起来的字符。

// With strictNullChecks set to true
let a: string = undefined; // Error
let b: string = null; // Error
let c: string = "";
let d: string = "y";
let e: string = "building";
let f: string = 3; // Error
let g: string = "3";

// With strictNullChecks set to false
let a: string = undefined; // Ok
let b: string = null; // Ok
let c: string = "";
let d: string = "y";
let e: string = "building";
let f: string = 3; // Error
let g: string = "3";

TypeScript还支持模板字符串或模板文字。 这些模板文字使您可以将表达式嵌入字符串中。 模板文字用反引号（ ` ）括起来，而不是用双引号和单引号将常规字符串括起来。 它们是在ES6中引入的。 这意味着您将根据目标版本获得不同JavaScript输出。 这是在TypeScript中使用模板文字的示例：

let e: string = "building";
let f: number = 300;

let sentence: string = `The ${e} in front of my office is ${f} feet tall.`;

编译后，您将获得以下JavaScript：

//  Output in ES5
var e = "building";
var f = 300;
var sentence = "The " + e + " in front of my office is " + f + " feet tall.";

//  Output in ES6
let e = "building";
let f = 300;
let sentence = `The ${e} in front of my office is ${f} feet tall.`;

如您所见，模板文字在ES5中已更改为常规字符串。 此示例显示TypeScript如何使您能够使用所有最新JavaScript功能而不必担心兼容性。

数组和元组数据类型

您可以在JavaScript中以两种不同的方式定义数组类型。 在第一种方法中，指定数组元素的类型，然后指定[] ，表示该类型的数组。 另一种方法是使用通用数组类型Array<elemType> 。 下面的示例演示如何使用这两种方法创建数组。 当strictNullChecks标志为true时，将null或undefined指定为元素之一将产生错误。

// With strictNullChecks set to false
let a: number[] = [1, 12, 93, 5];
let b: string[] = ["a", "apricot", "mango"];
let c: number[] = [1, "apple", "potato"]; // Error

let d: Array<number> = [null, undefined, 10, 15];
let e: Array<string> = ["pie", null, ""];


// With strictNullChecks set to true
let a: number[] = [1, 12, 93, 5];
let b: string[] = ["a", "apricot", "mango"];
let c: number[] = [1, "apple", "potato"]; // Error

let d: Array<number> = [null, undefined, 10, 15]; // Error
let e: Array<string> = ["pie", null, ""]; // Error

元组数据类型允许您创建一个数组，在该数组中预先知道固定数量的元素的类型。 其余元素的类型只能是为元组指定的类型之一。 这是一个使它更清楚的示例：

let a: [number, string] = [11, "monday"];
let b: [number, string] = ["monday", 11]; // Error
let c: [number, string] = ["a", "monkey"]; // Error
let d: [number, string] = [105, "owl", 129, 45, "cat"];
let e: [number, string] = [13, "bat", "spiderman", 2];

e[13] = "elephant";
e[15] = false; // Error

对于示例中的所有元组，我们将第一个元素的type设置为number ，将第二个元素的type设置为string 。 由于我们仅为前两个元素指定了type ，因此其余两个元素可以是字符串或数字。 创建元组b和c导致错误，因为当我们提到第一个元素是数字时，我们试图将字符串用作第一个元素的值。

同样，在指定元组元素仅包含字符串和数字后，我们无法将其值设置为false 。 这就是为什么最后一行会导致错误。

枚举数据类型

enum数据类型存在于许多编程语言（如C和Java）中。 它已从JavaScript中丢失，但TypeScript允许您创建和使用枚举。 如果您不知道enums是什么，可以使用它们使用难忘的名称来创建相关值的集合。

enum Animals {cat, lion, dog, cow, monkey}
let c: Animals = Animals.cat;

console.log(Animals[3]); // cow
console.log(Animals.monkey); // 4

默认情况下，枚举的编号从0开始，但是您也可以手动为第一个或任何其他成员设置不同的值。 通过将其值增加1，将更改其后所有成员的值。您还可以在enum手动设置所有值。

enum Animals {cat = 1, lion, dog = 11, cow, monkey}
let c: Animals = Animals.cat;

console.log(Animals[3]); // undefined
console.log(Animals.monkey); // 13

与前面的示例不同，这次Animals[3]值undefined 。 这是因为将值3分配给dog，但我们将其值显式设置为11。母牛的值保持在12而不是3，因为该值应该比最后一个成员的值大1。

Any和Never类型

假设您正在编写一个程序，其中变量的值由用户或第三方库中编写的代码确定。 在这种情况下，您将无法正确设置该变量的类型。 该变量可以是任何类型，例如字符串，数字或布尔值。 通过使用any类型可以解决此问题。 当您创建带有混合类型元素的数组时，这也很有用。

let a: any = "apple";
let b: any = 14;
let c: any = false;
let d: any[] = ["door", "kitchen", 13, false, null];

b = "people";

在上面的代码中，我们能够为b分配一个数字，然后将其值更改为字符串，而不会出现任何错误，因为any类型可以接受所有类型的值。

never类型用于表示不应出现的值。 例如，您可以将never分配为永不返回的函数的返回类型。 当函数总是抛出错误或陷入无限循环时，可能会发生这种情况。

let a: never; // Ok
let b: never = false; // Error
let c: never = null; // Error
let d: never = "monday"; // Error

function stuck(): never {
    while (true) {
    }
}

最后的想法

本教程向您介绍了TypeScript中可用的所有类型。 我们了解到为变量分配不同类型的值将如何显示TypeScript中的错误。 此检查可以帮助您避免在编写大型程序时出现很多错误。 我们还学习了如何定位不同版本JavaScript。

如果您正在寻找其他资源来学习或在工作中使用，请查看Envato市场中可用的资源 。

在下一个教程中，您将学习TypeScript中的接口。 如果您对本教程有任何疑问，请在评论中告诉我。

翻译自: https://code.tutsplus.com/tutorials/typescript-for-beginners-basic-data-types--cms-29438