TypeScript基础知识(一)基本类型

TypeScript基础知识(一)基本类型_第1张图片

文章目录

    • 布尔类型(boolean)
    • 数字类型(number)
    • 字符串类型(string)
    • 数组类型(Array)
    • 元组类型(Tuple)
    • 枚举类型(Enum)
    • 任意类型(Any)
    • 空类型(Void)
    • Null 和 Undefined
    • 字面量类型(Literal Types)
    • 类型推断

布尔类型(boolean)

TypeScript 中的布尔类型用于表示逻辑值,只有两个可能的取值: true 和 false。在 TypeScript 中,可以使用关键字 boolean 来定义布尔类型变量。以下是一个示例:

let isFinished: boolean = false;
let hasCompleted: boolean = true;

console.log(isFinished); // 输出:false
console.log(hasCompleted); // 输出:true

可以通过赋值操作符将布尔值赋给变量,并可以根据布尔值进行逻辑判断或条件控制流程。

数字类型(number)

在 TypeScript 中,数字类型用于表示数值,可以表示整数和浮点数。可以使用关键字 number 来定义数字类型变量。以下是一个示例:

let age: number = 30;
let height: number = 1.75;

console.log(age); // 输出:30
console.log(height); // 输出:1.75

数字类型的变量可以进行常见的数学运算,比如加减乘除等。此外,TypeScript 还支持其他类型的数字,如二进制、八进制和十六进制。例如:

let binary: number = 0b1010; // 二进制
let octal: number = 0o744; // 八进制
let hex: number = 0xabc; // 十六进制

console.log(binary); // 输出:10
console.log(octal); // 输出:484
console.log(hex); // 输出:2748

需要注意的是,数字类型在 TypeScript 中是一种原始类型,不能和字符串类型进行直接的运算操作,需要进行类型转换。例如:

let num: number = 10;
let str: string = "20";

let result = num + Number(str);
console.log(result); // 输出:30

在进行类型转换时,可以使用 Number()、parseInt() 等方法将字符串类型转换成数字类型。

字符串类型(string)

字符串类型(string)是在 TypeScript 中表示文本的数据类型。它用于存储包含字符序列的值,可以是字母、数字、符号或其他字符的组合。

在 TypeScript 中,可以使用双引号(")或单引号(')将字符串字面量括起来,例如:

let message: string = "Hello, TypeScript!"; // 使用双引号
let name: string = 'Alice'; // 使用单引号

你还可以使用模板字符串(template strings)来表示多行文本和包含变量的文本:

let multiLineText: string = `这是
多行文本`;

let age: number = 25;
let greeting: string = `我叫 ${name},今年 ${age} 岁。`;

注意,字符串是不可变的,也就是说一旦创建就不能修改。如果要对字符串进行修改操作,可以使用字符串方法和操作符。

在 TypeScript 中,我们还可以使用一些内置函数和方法来处理字符串,例如 length 属性获取字符串的长度、concat 方法拼接字符串、toUpperCase 方法将字符串转换为大写等。你可以根据实际需求选择合适的方法来操作字符串。

数组类型(Array)

数组类型(Array)用于表示一个由相同数据类型的值组成的集合。在 TypeScript 中,可以使用下面的语法来声明数组类型:

let arrayName: dataType[]; // 方式一

let arrayName: Array<dataType>; // 方式二

其中,dataType 表示数组中元素的数据类型。

下面是一些声明数组的示例:

let numbers: number[] = [1, 2, 3, 4, 5]; // 数字类型数组
let fruits: string[] = ["apple", "banana", "orange"]; // 字符串类型数组
let booleans: boolean[] = [true, false, true]; // 布尔类型数组

你还可以使用 Array 泛型来声明数组类型:

let numbers: Array<number> = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];
let booleans: Array<boolean> = [true, false, true];

在 TypeScript 中,数组还提供了一些常用的属性和方法,如 length 属性获取数组的长度、push 方法向数组末尾添加元素、pop 方法移除数组末尾的元素等。你可以根据需要使用这些方法来操作数组。

元组类型(Tuple)

元组类型(Tuple)是 TypeScript 中的一种数据类型,它允许你存储一个固定长度的、类型可以不同的数据序列。

元组使用方括号 [] 表示,元素之间使用逗号 , 分隔。例如,let tuple: [number, string] = [1, "hello"]; 表示一个由一个数字和一个字符串组成的元组。

你可以使用解构赋值来访问元组中的元素,例如:

let tuple: [number, string] = [1, "hello"];
let [num, str] = tuple;
console.log(num); // 输出 1
console.log(str); // 输出 "hello"

元组还支持通过下标访问元素,下标从 0 开始计数:

let tuple: [number, string] = [1, "hello"];
console.log(tuple[0]); // 输出 1
console.log(tuple[1]); // 输出 "hello"

注意,元组的长度是固定的,一旦创建后就不能增加或减少元素的个数。元组的类型在定义时已经确定,无法新增或修改类型。

枚举类型(Enum)

枚举类型(Enum)是 TypeScript 提供的一种数据类型,用于定义一组命名的常量值。通过枚举类型,可以为一组相关的常量赋予有意义的名称,提高代码的可读性和可维护性。

在 TypeScript 中,使用 enum 关键字来定义一个枚举类型。下面是一个例子:

enum Color {
  Red,
  Green,
  Blue
}

let color: Color = Color.Green;
console.log(color); // 输出 1
console.log(Color[color]); // 输出 "Green"

在这个例子中,我们定义了一个颜色的枚举类型 Color,它包含了三个常量值:RedGreenBlue。这些常量值的默认关联值分别是 0、1 和 2。我们可以用这些常量值来赋值给变量,并通过枚举常量的名称或值来访问它们。

枚举类型的默认关联值是从 0 开始自动递增的,但你也可以手动指定关联值。例如:

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4
}

let color: Color = Color.Green;
console.log(color); // 输出 2
console.log(Color[color]); // 输出 "Green"

在这个例子中,我们手动指定了 Red 的关联值为 1,Green 的关联值为 2,Blue 的关联值为 4。

任意类型(Any)

任意类型(Any)是一种在编程语言中常见的数据类型,它可以表示任何类型的值。在许多编程语言中,包括Python、TypeScript和Swift,都有支持任意类型的特殊关键字或类型。

使用任意类型可以灵活地处理各种类型的数据,尤其是在不确定变量的类型时非常有用。例如,当从外部源接收数据或者在编写通用函数时,可以使用任意类型来处理不同类型的输入。

然而,由于任意类型不提供类型检查和编译时的类型安全性,因此在使用任意类型时需要格外小心。对于强类型语言,将任意类型的值分配给其他特定类型的变量可能会导致类型错误。在使用任意类型时,一般需要进行类型检查和适当的类型转换来确保数据的正确性。

总之,任意类型是一种特殊的类型,可以用来表示任何类型的值,但需要谨慎使用以确保代码的正确性。

空类型(Void)

TypeScript 中的空类型(Void)表示一个函数没有返回值。在函数定义中,可以使用空类型来明确指示函数没有返回任何值。

例如,下面是一个返回空类型的函数示例:

function greet(): void {
  console.log("Hello!");
}

在上面的示例中,greet 函数没有返回值,它只是在控制台输出了 “Hello!”。函数的返回类型被指定为 void,以表示它不返回任何值。

需要注意的是,在 TypeScript 中,空类型的变量只能赋值为 undefinednull,它们是 void 类型的子类型。这意味着不能将 void 类型的变量赋值为其他任何类型的值。

总而言之,TypeScript 中的空类型(Void)用于明确表示函数没有返回值。

Null 和 Undefined

在 TypeScript 中,nullundefined 是两个特殊的值,用于表示缺少值或空值。

  • null 表示一个空值或不存在的对象。它是一个赋值为 null 的变量,表示它没有引用任何对象或值。

  • undefined 表示一个变量已声明但没有赋值,或者一个对象的属性不存在。如果一个函数没有返回任何值,则其默认返回 undefined

示例:

let nullValue: null = null;
let undefinedValue: undefined = undefined;

let number: number = null; // 正确,可以将 null 赋值给 number 类型
let str: string = undefined; // 正确,可以将 undefined 赋值给 string 类型

let obj: object = null; // 错误,object 类型不能赋值为 null
let num: number = undefined; // 错误,number 类型不能赋值为 undefined

需要注意的是,TypeScript 中默认情况下,变量是可为 nullundefined 的。如果想要明确禁止这种情况,可以使用 strictNullChecks 编译选项,它会强制进行 null 和 undefined 的检查。

总的来说,nullundefined 是 TypeScript 中用于表示缺少值或空值的特殊值。使用这两个值时需要小心,尽量避免出现类型错误或意外的运行时错误。

字面量类型(Literal Types)

TypeScript中的字面量类型(Literal Types)允许我们将特定的值作为类型,而不仅仅是作为值。这些字面量类型可以是字符串,数字,布尔值或符号。

例如,我们可以定义一个只能取特定字符串值的类型:

type Direction = 'left' | 'right' | 'up' | 'down';
let direction: Direction = 'left'; // 只能取 'left'、'right'、'up' 或 'down' 中的一个

类似地,我们可以定义一个只能取特定数字值的类型:

type StatusCode = 200 | 400 | 404 | 500;
let status: StatusCode = 200; // 只能取 200、400、404 或 500 中的一个

字面量类型可以在函数参数、变量声明、对象属性和返回值类型等位置使用。使用字面量类型可以帮助我们在编译时捕获一些潜在的错误,并提供更严格的类型约束。

字面量类型还可以与联合类型(Union Types)和交叉类型(Intersection Types)一起使用,以创建更复杂的类型。

type Color = 'red' | 'blue' | 'green';
type Size = 'small' | 'medium' | 'large';

type Style = {
  color: Color;
  size: Size;
};

function applyStyle(style: Style) {
  // ...
}

applyStyle({ color: 'red', size: 'small' }); // 正确
applyStyle({ color: 'yellow', size: 'xl' }); // 错误,不符合定义的字面量类型

通过使用字面量类型,我们可以更加精确地定义数据的类型和取值范围,提高代码的可读性和可维护性。

类型推断

在TypeScript中,类型推断是编译器自动推断变量的类型,而无需显式指定类型。编译器根据变量的值来推断变量的类型。

下面是一些需要注意的类型推断的情况:

  1. 初始化变量时:编译器会根据变量的初始值来推断变量的类型。
let x = 5; // 推断 x 的类型为 number
let y = "hello"; // 推断 y 的类型为 string
  1. 默认参数值:如果函数参数具有默认值,则编译器会根据默认值的类型推断参数类型。
function greet(message = "hello") {
  console.log(message);
}

greet(); // 推断参数 message 的类型为 string
  1. 函数返回值类型:如果函数具有明确的返回语句,则编译器会根据返回值的类型推断函数的返回类型。
function add(x: number, y: number) {
  return x + y;
}

let result = add(1, 2); // 推断 result 的类型为 number
  1. 上下文类型:当上下文提供了所需的类型信息时,编译器会根据上下文来推断变量的类型。这通常发生在函数参数的位置。
window.addEventListener("click", function(event) {
  console.log(event.clientX); // 推断 event 的类型为 MouseEvent
});

需要注意的是,虽然TypeScript的类型推断功能非常强大,但有时候也会出现错误的推断结果。在这种情况下,你可以显式地声明变量的类型来解决问题。例如:

let x: number = 5; // 显式声明 x 的类型为 number

你可能感兴趣的:(Typescript,typescript,javascript,前端)