TypeScript 基础入门：在 Vue/uni-app 项目中理解常见类型

最近在学习 TypeScript，并把基础类型练习放在了 Vue/uni-app 项目的 .vue 文件中。本文会结合实际代码，记录 TypeScript 中常见的基础类型用法，包括类型推断、函数类型、字面量类型、联合类型、any、unknown、类型断言、void、never，以及 Vue 中 ref 的泛型写法。

适合刚开始学习 TypeScript，并且已经接触过 JavaScript、Vue 或 uni-app 的同学阅读。

一、项目中的 TypeScript 写法

在 Vue 单文件组件中使用 TypeScript，需要在 script 标签上加上 lang="ts"：

<script setup lang="ts">
import { ref } from 'vue'
</script>

这里的 script setup 是 Vue 3 的组合式 API 写法，lang="ts" 表示当前脚本使用 TypeScript。

二、类型推断

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

let a = 3

// a = 'hahah' // 报错
a = 4

上面代码中，a 初始化为数字 3，TypeScript 会自动把它推断为 number 类型。

所以后面可以继续赋值数字：

a = 4

但是不能赋值字符串：

// a = 'hahah'

这就是 TypeScript 比 JavaScript 更严格的地方：它会在编码阶段帮我们发现类型错误。

三、函数参数和返回值类型

函数也可以给参数和返回值添加类型。

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

console.log(sum(10, 20))

这段代码表示：

• 参数 a 必须是 number
• 参数 b 必须是 number
• 函数返回值也必须是 number

如果传入字符串，就会报错：

// console.log(sum(10, '123')) // 报错

这样可以避免一些 JavaScript 中常见的隐式类型转换问题。

四、字面量类型

字面量类型表示变量只能取某一个固定的值。

let a: 'hello ts'

// a = 1 // 报错
a = 'hello ts' // 正确

这里的 a 不是普通的 string，而是只能等于 'hello ts'。

如果把它改成其他字符串，也会报错：

// a = 'hello vue' // 报错

字面量类型常用于限制固定值，比如按钮状态、请求状态、主题模式等。

let status: 'loading' | 'success' | 'error'

status = 'loading'
status = 'success'
// status = 'done' // 报错

五、联合类型

联合类型表示一个变量可以是多种类型中的一种，使用 | 连接。

let b: number | string

b = 1
b = 'hello ts'

这表示 b 可以是 number，也可以是 string。

联合类型比 any 更安全，因为它仍然限制了变量的可选类型范围。

let id: number | string

id = 1001
id = 'user_1001'
// id = true // 报错

六、any 类型

any 表示任意类型。

let c: any

c = 1
c = true
c = 'hello ts'

使用 any 后，TypeScript 基本不会再检查这个变量的类型。

let e: string

e = c // 正确

因为 c 是 any，所以它可以赋值给任意类型的变量。

但是实际开发中不建议大量使用 any，因为它会让 TypeScript 失去类型保护能力。只有在临时处理不确定数据，或者迁移旧 JavaScript 项目时，才建议少量使用。

七、unknown 类型

unknown 也表示未知类型，但它比 any 更安全。

let d: unknown

d = 1
d = true
d = 'hello ts'

unknown 可以接收任意类型的值，但是不能直接赋值给其他明确类型的变量。

let e: string

// e = d // 报错

原因是 TypeScript 不确定 d 到底是不是字符串。

这就是 unknown 和 any 的核心区别：

• any：放弃类型检查
• unknown：先接收未知值，但使用前必须确认类型

所以在不确定接口返回值、外部输入、动态数据时，unknown 通常比 any 更推荐。

八、类型断言

如果开发者明确知道某个值的类型，可以使用类型断言。

let d: unknown = 'hello ts'
let e: string

e = d as string

也可以写成尖括号形式：

e = <string>d

不过在 Vue 项目中，更推荐使用 as 写法：

e = d as string

因为尖括号写法在一些 JSX 或 TSX 场景中容易产生语法冲突。

需要注意：类型断言不是类型转换。它只是告诉 TypeScript “我认为它是这个类型”，并不会真的改变运行时的值。

例如：

let value: unknown = 123
let text = value as string

这段代码在类型层面可以通过，但运行时 text 的实际值仍然是数字 123。

九、void 类型

void 通常用于表示函数没有返回值。

function fn(): void {
  console.log('hello ts1')
}

这个函数只执行打印逻辑，不需要返回结果，所以返回值类型写成 void。

常见使用场景：

function handleClick(): void {
  console.log('点击按钮')
}

像事件处理函数、日志函数、只执行副作用的函数，经常会使用 void。

十、never 类型

never 表示永远不会有正常返回值的类型。

function error(message: string): never {
  throw new Error(message)
}

上面的函数一定会抛出错误，不会正常执行结束，所以返回值类型是 never。

常见场景包括：

• 一定会抛出异常的函数
• 死循环函数
• 类型收窄中不可能出现的分支

例如：

function loop(): never {
  while (true) {
    console.log('running')
  }
}

这个函数永远不会正常结束，所以也是 never。

十一、Vue 中 ref 的泛型写法

在 Vue 3 中使用 ref 时，也可以通过泛型指定数据类型。

import { ref } from 'vue'

const count = ref<number>(1)

console.log(count.value)

count.value = 2
// count.value = 'das' // 报错

ref<number>(1) 表示这个响应式数据内部保存的是 number 类型。

所以可以这样修改：

count.value = 2

不能这样修改：

// count.value = 'das'

在 Vue 的组合式 API 中，ref 返回的是一个对象，真正的值需要通过 .value 获取或修改。

十二、any 和 unknown 的区别总结

示例：

let a: any = 'hello'
let b: unknown = 'hello'

let str1: string = a // 正确
// let str2: string = b // 报错

let str3: string = b as string // 正确

学习建议：能不用 any 就尽量不用，如果只是暂时不知道类型，可以优先考虑 unknown。

十三、本文完整练习代码

<script setup lang="ts">
import { ref } from 'vue'

// 字面量类型
let a: 'hello ts'
// a = 1 // 报错
a = 'hello ts'

// 联合类型
let b: number | string
b = 1
b = 'hello ts'

// any 类型
let c: any
c = 1
c = true
c = 'hello ts'

// unknown 类型
let d: unknown
d = 1
d = true
d = 'hello ts'

let e: string
// e = d // 报错，不能将 unknown 类型赋值给 string 类型
e = c

// 类型断言
e = d as string
e = <string>d

// void 类型
function fn(): void {
  console.log('hello ts1')
}

// never 类型
function error(message: string): never {
  throw new Error(message)
}

const count = ref<number>(1)
console.log(count.value)

count.value = 2
// count.value = 'das' // 报错
</script>

十四、学习小结

本文记录了 TypeScript 入门阶段最常见的几个类型：

• 类型推断：TypeScript 会根据初始值自动判断类型
• 函数类型：可以限制参数和返回值
• 字面量类型：变量只能是固定值
• 联合类型：变量可以是几个指定类型之一
• any：任意类型，但不安全
• unknown：未知类型，比 any 更安全
• 类型断言：告诉 TypeScript 当前值是什么类型
• void：函数没有返回值
• never：函数永远不会正常返回
• ref<T>：在 Vue 中给响应式数据指定类型

TypeScript 的核心价值不是让代码变复杂，而是在写代码时提前发现问题。刚开始学习时，可以先从变量、函数、对象、数组这些基础类型开始，再逐步学习接口、泛型、类型别名、枚举和类型工具。