TypeScript 入门完全指南

TypeScript 是 JavaScript 的超集，它为 JavaScript 添加了静态类型系统。在现代前端开发中，TypeScript 已经成为必备技能。本文将带你快速掌握 TypeScript 的核心概念。

为什么选择 TypeScript？

类型安全：编译时发现类型错误，减少运行时 Bug
代码提示：IDE 提供更智能的代码补全和提示
重构友好：重命名变量、函数时更安全
团队协作：类型即文档，降低沟通成本

基础类型

// 基础类型
let name: string = '张三'
let age: number = 25
let isDeveloper: boolean = true

// 数组
let skills: string[] = ['Vue', 'React']
let numbers: Array = [1, 2, 3]

// 对象
let user: { name: string; age: number } = {
    name: '张三',
    age: 25
}

接口与类型

// 接口
interface User {
    id: number
    name: string
    email?: string  // 可选属性
    readonly role: string  // 只读属性
}

// 类型别名
type Status = 'pending' | 'success' | 'error'

let currentStatus: Status = 'pending'

函数类型

// 函数声明
function greet(name: string): string {
    return `Hello, ${name}!`
}

// 函数表达式
const add = (a: number, b: number): number => a + b

// 可选参数 + 默认参数
function createUser(name: string, age?: number = 18): User {
    return { name, age }
}

// 剩余参数
function sum(...numbers: number[]): number {
    return numbers.reduce((a, b) => a + b, 0)
}

泛型

// 泛型函数
function identity(arg: T): T {
    return arg
}
const result = identity('hello')

// 泛型接口
interface ApiResponse {
    code: number
    data: T
    message: string
}

// 泛型类
class Container {
    private value: T
    constructor(value: T) {
        this.value = value
    }
    getValue(): T {
        return this.value
    }
}

实用技巧

typeof：从值获取类型
keyof：获取对象类型的键联合类型
Partial/Required：可选/必选属性转换
Pick/Omit：选择/排除属性
Exclude/Extract：类型过滤

总结

TypeScript 的学习曲线并不陡峭，掌握基础类型、接口、函数类型和泛型就能应对大部分开发场景。类型系统不仅能提高代码质量，还能大大提升开发体验。建议在项目中逐步引入 TypeScript，享受类型带来的安全感！

🚀 我的博客

TypeScript 入门完全指南：JavaScript 的超集强在哪？

为什么选择 TypeScript？

基础类型

接口与类型

函数类型

泛型

实用技巧

总结