阅读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