TypeScript基础类型详解：从基本类型到联合类型

布尔类型是TypeScript中最基础的数据类型之一，用于表示逻辑上的真或假。在代码中，布尔值通常用 `boolean` 类型关键字进行声明，其值只能是 `true` 或 `false`。这种类型常用于条件判断和控制流程中，确保逻辑运算的准确性。

// 布尔类型--->boolean
// let 变量名：数据类型 = 值
let flag: boolean = true;
console.log(flag)

数字类型在TypeScript中使用 `number` 关键字表示，支持整数和浮点数。与JavaScript不同，TypeScript中的数字类型统一为 `number`，不区分整型和浮点型。它支持多种进制表示法，包括十进制、二进制（前缀 `0b`）、八进制（前缀 `0o`）和十六进制（前缀 `0x`）。例如，可以定义十进制数 `10`，二进制数 `0b1010`，八进制数 `0o12` 以及十六进制数 `0xa`，它们最终都会转换为十进制数值进行计算和存储。

// 数字类型--->number
let a1: number = 10 // 十进制
let a2: number = 0b1010 // 二进制
let a3: number = 0o12// 八进制
let a4: number = 0xa // 十六进制
console.log(a1 + a2 + a3 + a4)

字符串类型用于表示文本数据，使用 `string` 关键字声明。在TypeScript中，字符串可以使用单引号、双引号或反引号（模板字符串）来定义。单引号和双引号用于定义普通字符串，而反引号则支持模板字符串语法，允许在字符串中嵌入表达式，使字符串拼接和格式化更加灵活和直观。

// 字符串类型--->string
let str1: string = '床前明月光';
let str2: string = '地上鞋两双';
console.log(str1 + ',' + str2)

在TypeScript中，字符串和数字可以直接通过模板字符串进行拼接。模板字符串使用反引号包裹，并通过 `${}` 语法嵌入变量或表达式。例如，可以将一个字符串变量和一个数字变量组合成一个完整的句子，如“我现在的岁数：24”。这种方式不仅简化了代码，还提高了可读性，是处理动态文本内容的常用方法。

let str3: string = '我现在的岁数：'
let a5: number = 24
console.log(`${str3}${a5}`)

在TypeScript中，变量一旦声明了类型，后续赋值时必须严格遵循该类型。这意味着，如果一个变量被定义为某种特定类型，如数字或字符串，那么后续只能赋予该类型的值，不能赋予其他类型的值。这种静态类型检查机制有助于在编译阶段发现潜在的类型错误，提高代码的健壮性和可维护性。

在TypeScript中，`undefined` 和 `null` 是两种特殊的类型，分别表示未初始化的变量和空值。它们可以赋值给任何类型的变量，包括基本类型如 `number`、`string` 等。例如，可以定义一个 `undefined` 类型的变量和一个 `null` 类型的变量，并将它们赋值给其他类型的变量。这种灵活性使得在处理可选参数或默认值时更加方便，但也需要注意类型安全，避免潜在的空指针错误。

// undefined和 null都可以作为其他类型的子类璧,把undefined和nu1l赋值给其他类型的变量的,如: number类型的变量
let und: undefined = undefined
let n1l: null = null
console.log(und)
console.log(n1l)

在TypeScript中，数组是一种常用的数据结构，用于存储多个相同类型的元素。定义数组时，可以使用两种主要方式：一种是直接在类型后添加方括号 `[]`，如 `number[]`，表示这是一个由数字组成的数组；另一种是使用泛型语法 `Array<数据类型>`，如 `Array<number>`，这种方式更加灵活，适用于更复杂的类型定义。无论使用哪种方式，数组中的元素类型必须与定义时指定的类型一致，否则会导致编译错误。

// 方式一：let变量名:数据类型[]=[值1,值2,值3,...]
let arr1: number[] = [10, 20, 30, 40, 50]
console.log(arr1);

// 方式二：泛型的写法
// 语法: let变量名: Array<数据类型>=[值1,值2,值3]
let arr2: Array<number> = [100, 200, 300]
console.log(arr2);

在TypeScript中，定义数组时，数组内元素的数据类型必须与定义数组时指定的类型完全一致。如果尝试向数组中添加不符合类型的元素，编译器会报错，并且代码无法通过编译。这种严格的类型检查机制有助于在开发早期发现并修复类型错误，确保代码的健壮性和可维护性。因此，开发者在定义数组时，应仔细检查每个元素的类型，确保其与数组定义的类型相匹配。

元组类型允许数组中的每个元素具有不同的类型，且类型和数量在定义时已固定。例如，可以定义一个元组 `[string, number, boolean]`，分别存储字符串、数字和布尔值。使用时，必须严格按照定义时的类型和顺序访问元素，否则会导致类型错误。这种类型特别适合需要存储固定结构数据的场景，如数据库记录或API响应。

// 元组类型:在定义数组的时候,类型和数据的个数一开始就已经限定了
let arr3: [string, number, boolean] = ['小甜甜', 100, true];
console.log(arr3)
// 注意问题:元组类型在使用的时候,数据的类型的位置和数据的个数应该和在定义元组的时候的数据类型及位置应该是一致的
console.log(arr3[0].split(''));
console.log(arr3[1].toFixed(2));

枚举类型在TypeScript中用于定义一组命名的常量值，使代码更具可读性和可维护性。通过 `enum` 关键字定义枚举，如 `Color` 枚举包含 `red`、`green` 和 `blue` 三个成员。枚举成员默认从0开始递增，也可以手动指定值。使用时，可以通过枚举名访问成员，如 `Color.red`，也可以通过索引反向获取枚举值，如 `Color[2]` 返回 `blue`。这种类型特别适合用于状态管理、配置选项等场景，提高代码的清晰度和安全性。

enum Color {
       red,
       green,
       blue
}
// 定义一个Color的枚举类型的变量来接收枚举的值
let color: Color = Color.red
console.log(color);
console.log(Color[2])

在TypeScript中，`any` 类型允许变量存储任何类型的值，包括数字、字符串、布尔值等。这种类型提供了极大的灵活性，但也牺牲了类型检查的安全性。例如，可以定义一个 `any` 类型的变量，先赋值为数字，再赋值为字符串，编译器不会报错。虽然 `any` 类型在某些场景下非常有用，如处理动态数据或第三方库，但过度使用可能导致代码难以维护和调试。因此，建议在使用 `any` 类型时，尽量明确变量的实际类型，或在必要时使用类型断言来增强类型安全性。

let str5: any = 100;
str5 = '宇智波带土'
console.log(str5);
// 当一个数组中要存储多个数据,个数不确定,类型不确定,此时也可以使用any类型来定义数组
let arr6: any = [100, '宇智波带土', true];
console.log(arr6)
// 这种情况下也没有错误的提示信息, any类型有优点,也有缺点
console.log(arr6[1].split(''));

在TypeScript中，`void` 类型通常用于表示函数没有返回值。当一个函数不返回任何值时，其返回类型应声明为 `void`。例如，一个函数可能只执行打印操作或副作用，而不返回任何数据，此时应使用 `void` 类型。此外，`void` 类型也可以用于变量声明，表示该变量可以接受 `null` 或 `undefined` 值，但通常不推荐直接赋值给 `void` 类型的变量，除非明确需要表示无返回值的状态。

function getobj(obj: object): object {
       console.log(obj);
       return {
           name: '卡卡西',
           age: 27
       }
}
console.log(getobj({ name: '佐助', age: 20 }))

联合类型允许变量接受多种类型的值，通过 `|` 符号连接多个类型。例如，可以定义一个变量接受 `number` 或 `string` 类型的值。在使用联合类型时，访问变量的属性或方法需确保这些操作在所有可能的类型中均有效。TypeScript提供了类型断言和类型守卫机制，帮助在运行时确定变量的具体类型，从而安全地访问特定类型的属性和方法。这种类型特别适合处理多态数据或API响应，提高代码的灵活性和健壮性。

 // 需求1:定义一个函数得到一个数字或字符串值的字符串形式值
function getString(str: number | string): string {
      return str.toString();
}
console.log(getString('萨斯给'))
 
// 需求2:定义一个一个函数得到一个数字或字符串值的长度
function getString1(str: number | string): number {
      return str.toString().length
      if ((<string>str).length) {
          return (str as string).length
      } else {
          return str.toString().length
      }
}
  console.log(getString1(12345))
  console.log(getString1('12345'))

TypeScript的基础类型涵盖了从基本数据类型到复杂结构的多种类型，包括布尔、数字、字符串、数组、元组、枚举、any、void以及联合类型。每种类型都有其特定的应用场景和优势，合理选择和使用这些类型，可以有效提高代码的类型安全性和可维护性。掌握这些基础类型，是深入学习和应用TypeScript的关键。

本文详细介绍了TypeScript的基础类型，包括布尔、数字、字符串、数组、元组、枚举、any、void以及联合类型。通过具体的代码示例，展示了每种类型的定义和使用方法，帮助读者更好地理解和应用TypeScript的类型系统。希望本文能为您的TypeScript学习之旅提供有价值的参考，欢迎持续关注本站，获取更多前端开发相关的技术文章和教程。