TypeScript 入门：类型系统为 JavaScript 带来了什么
TypeScript 入门：类型系统为 JavaScript 带来了什么
TypeScript 是带静态类型系统的 JavaScript，编译后擦除类型还原成普通 JS 运行。用一句话概括价值：让低级错误在写代码时就暴露，而不是上线后才崩。
基础类型
let id: number = 1
let title: string = 'hello'
let published: boolean = true
let tags: string[] = ['js', 'vue'] // 或 Array<string>
let status: 'DRAFT' | 'PUBLISHED' = 'DRAFT' // 联合/字面量类型
let cover: string | null = null
函数要标注参数和返回值：
function getPost(id: number): Promise<Post> {
return fetch('/api/posts/' + id).then(r => r.json())
}
接口与类型别名
interface Post {
id: number
title: string
excerpt?: string // 可选属性
tags: string[]
}
const post: Post = { id: 1, title: 'a', tags: [] }
// 少字段、多字段、类型对不上，编辑器立刻红线报错
接口还支持描述函数、类，以及声明合并；type 更灵活，支持联合、交叉、工具类型，二者多数场景可互换。
泛型：类型的变量
function first<T>(arr: T[]): T | undefined {
return arr[0]
}
first([1, 2]) // 返回类型自动推断为 number，不用写 any
泛型让函数既类型安全又能复用，是 API 设计的核心工具。常用的工具类型如 Partial<T>、Pick<T,K>、Record<K,V> 都是泛型派生。
类型推断：不用处处手写
const x = 1 自动推断为 number，重新赋字符串立即报错；但函数参数、公开 API 的类型应该显式标注——写给别人看的部分要清晰。
tsconfig 关键配置
{
"compilerOptions": {
"strict": true, // 严格模式全家桶，新项目必开
"noUncheckedIndexedAccess": true // arr[0] 会带上 undefined
}
}
上 TS 的真实收益
- 重构有底气：改字段编译器会列出所有引用点
- 接口即文档：IDE 自动补全，不用翻后端文档
- 团队协作降低低级错误成本
建议从 any 少用开始渐进接受类型，配合 Vue 3 的 <script setup lang="ts"> 和 Pinia，体验非常顺。
看到这里了？如果这篇文章帮到过你
请我喝瓶可乐就好 🥤
评论0 条
还没有评论，来抢沙发～