TS 入门(二)：Typescript类型与类型注解

前言

在本章中，我们将深入探讨 TypeScript 的基础类型和类型注解。理解这些概念对于有效地使用 TypeScript 是非常重要的。

回顾

在上一章中，我们介绍了如何安装和配置 TypeScript，了解了 tsconfig.json 文件中的各种配置选项，并编写了第一个 TypeScript 文件。在这篇文章中，我们将通过具体的代码示例，深入了解 TypeScript 的基础类型和变量声明。

• TS 入门(一)：TypeScript 简介与安装

---

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

---

1. 基本类型

数字类型 (number)

number 类型用于表示数值，可以是整数或浮点数。

let age: number = 25
let height: number = 1.75

字符串类型 (string)

string 类型用于表示文本数据。

let name: string = '张三'
let greeting: string = '欢迎学习 TypeScript！'

布尔类型 (boolean)

boolean 类型用于表示逻辑值，只能是 true 或 false。

let isStudent: boolean = true
let isAdmin: boolean = false

空值和未定义 (null 和 undefined)

null 和 undefined 类型用于表示空值或未定义的值。

let data: null = null
let status: undefined = undefined

任意类型 (any)

any 类型可以表示任意类型的值，编译时可以忽略类型检查。

let value: any = 42
value = '字符串'
value = true

unknown 类型

• 描述: unknown 类型表示未知类型的值。与 any 类型不同，使用 unknown 类型的变量需要进行类型检查或类型断言才能操作其值。
• 特性:
  • 类似于 any，可以表示任意类型的值。
  • 与 any 不同的是，使用 unknown 类型的值必须在使用之前进行类型检查或类型断言，以确保类型安全性。
  • 更适合用于不清楚具体类型的情况，例如从动态内容或外部库中获取的值。

let userInput: unknown
let userName: string

userInput = '张三'
userInput = 42

// 需要进行类型检查或类型断言
if (typeof userInput === 'string') {
  userName = userInput // 正确
}

// 类型断言
userName = userInput as string // 正确，但需要确保 userInput 是 string 类型

// 以下操作将导致编译时错误，因为unknown不能直接赋值给字符串
// userName = userInput; // 错误，不能将类型“unknown”分配给类型“string”

any 与 unkown 区别

• 使用 any 类型时，放弃了 TypeScript 的类型检查机制，而 unknown 类型则要求在使用时进行类型检查或类型断言，以确保代码的类型安全性。
• 一般来说，应该尽量避免使用 any 类型，因为它会减弱 TypeScript 的类型优势，而 unknown 类型则更适合在需要时进行临时类型推断或处理未知类型的情况。

2. 数组和元组类型

数组类型

数组类型允许你表示一个由特定类型元素组成的数组。

let numbers: number[] = [1, 2, 3, 4, 5]
let names: string[] = ['张三', '李四', '王五']

元组类型

元组类型允许你表示一个已知数量和类型的数组。

let userInfo: [string, number] = ['张三', 25]

3. 枚举类型

枚举类型允许你定义一组命名的常量，默认值是从 0 开始，也可以自定义起始值

enum Direction {
  Up = 1, // 默认是从0 开始
  Down,
  Left,
  Right,
}

let userDirection: Direction = Direction.Up
console.log(userDirection) // 输出: 1 (Up 对应的枚举值)

4. 类型注解示例

指定变量类型

使用类型注解可以明确指定变量的类型。

let age: number = 25
let name: string = '李四'
let isActive: boolean = true

函数参数和返回值类型注解

function sum(a: number, b: number): number {
  return a + b
}

let result: number = sum(10, 20) // 正确
// let error: number = sum("10", "20"); // 错误，类型不匹配

类型推断

TypeScript 可以根据变量的初始值推断其类型。

let inferredAge = 25 // 推断为 number 类型
let inferredName = '王五' // 推断为 string 类型
let inferredIsActive = true // 推断为 boolean 类型

结语

通过本章的学习，你应该对 TypeScript 的基础类型和类型注解有了更深入的理解。在下一章中，我们将继续探讨 TypeScript 中更复杂的函数类型、对象类型以及类型推断和上下文类型等内容。务必掌握好每个概念，它们将为你后续学习 TypeScript 提供坚实的基础。