60. 严格模式配置与最佳实践

📖 概述

在Vue 3 + TypeScript项目中，严格模式是确保类型安全和代码质量的重要配置。通过启用严格模式，可以在编译时发现更多潜在的类型错误，提高代码的可靠性和可维护性。本集将深入讲解TypeScript严格模式的配置选项、Vue 3中的严格模式支持、最佳实践以及如何在项目中逐步引入严格模式，帮助你在实际开发中充分利用TypeScript的类型系统优势。

✨ 核心知识点

1. 严格模式概述

什么是严格模式

• 严格模式是TypeScript的一组编译选项，用于增强类型检查的严格性
• 启用严格模式后，TypeScript会进行更严格的类型检查，发现更多潜在错误
• 严格模式包括多个子选项，可以根据项目需求选择性启用

严格模式的好处

1. 提高类型安全性：减少类型相关的运行时错误
2. 增强代码可读性：明确的类型声明使代码更容易理解
3. 改善开发体验：更好的代码提示和自动补全
4. 便于重构：类型系统可以检测重构过程中的错误
5. 提高代码质量：强制开发者编写更规范的代码

2. 严格模式配置选项

tsconfig.json中的严格模式选项

{
  "compilerOptions": {
    // 启用所有严格类型检查选项
    "strict": true,
    
    // 以下是strict模式包含的子选项
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "useUnknownInCatchVariables": true
  }
}

各选项详解

1. strict

• 启用所有严格类型检查选项
• 推荐作为基础配置，然后根据需要调整子选项

2. noImplicitAny

• 禁止隐式any类型
• 当TypeScript无法推断类型时，必须显式声明类型
• 示例：

  // 错误：参数'x'隐式具有'any'类型
  function add(x, y) {
    return x + y
  }
  
  // 正确：显式声明类型
  function add(x: number, y: number): number {
    return x + y
  }

3. strictNullChecks

• 启用严格的null和undefined检查
• null和undefined只能赋值给它们自身或any类型
• 需要使用可选链(?.)和空值合并(??)运算符处理可能为null的值
• 示例：

  // 错误：无法将类型'null'分配给类型'string'
  let name: string = null
  
  // 正确：使用联合类型
  let name: string | null = null
  
  // 正确：使用可选链
  const length = name?.length

4. strictFunctionTypes

• 启用严格的函数类型检查
• 函数参数类型逆变，返回值类型协变
• 示例：

  interface Animal {
    name: string
  }
  
  interface Dog extends Animal {
    bark(): void
  }
  
  // 错误：在严格函数类型下，无法将Dog[]赋值给Animal[]的回调
  let animalHandler: (a: Animal) => void = (d: Dog) => {}

5. strictBindCallApply

• 启用严格的bind、call和apply方法检查
• 确保这些方法的参数类型与原函数匹配
• 示例：

  function sum(a: number, b: number): number {
    return a + b
  }
  
  // 错误：参数数量不匹配
  const result = sum.call(null, 1)
  
  // 正确：参数数量匹配
  const result = sum.call(null, 1, 2)

6. strictPropertyInitialization

• 确保类的属性在构造函数中初始化
• 与--strictNullChecks一起使用
• 可以使用!非空断言或初始化器绕过检查
• 示例：

  class User {
    // 错误：属性'name'没有初始化表达式，也没有在构造函数中明确赋值
    name: string
    
    // 正确：在构造函数中初始化
    email: string
    
    // 正确：使用非空断言
    age!: number
    
    // 正确：使用初始化器
    isActive: boolean = false
    
    constructor(email: string) {
      this.email = email
    }
  }

7. noImplicitThis

• 禁止隐式this类型
• 确保this在函数中的类型明确
• 示例：

  // 错误：'this'隐式具有'any'类型
  function getFullName() {
    return this.firstName + ' ' + this.lastName
  }
  
  // 正确：使用this参数
  function getFullName(this: { firstName: string; lastName: string }) {
    return this.firstName + ' ' + this.lastName
  }

8. alwaysStrict

• 在编译后的JavaScript文件中启用严格模式
• 生成的代码顶部会添加"use strict"

9. useUnknownInCatchVariables

• 在catch块中使用unknown类型而不是any类型
• 提高类型安全性，需要类型守卫才能使用catch变量
• 示例：

  // 错误：在useUnknownInCatchVariables模式下，e的类型是unknown
  try {
    // 代码
  } catch (e) {
    console.log(e.message) // 错误：对象可能为'unknown'
  }
  
  // 正确：使用类型守卫
  try {
    // 代码
  } catch (e) {
    if (e instanceof Error) {
      console.log(e.message) // 正确：e是Error类型
    }
  }

3. Vue 3中的严格模式支持

Vue 3的TypeScript配置建议

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "useUnknownInCatchVariables": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Vue 3特有的配置选项

1. useDefineForClassFields

• 用于在类组件中正确处理Vue 3的响应式系统
• 与@vue/runtime-core的defineComponent配合使用

2. jsx

• 配置JSX支持，Vue 3推荐使用"preserve"

3. isolatedModules

• 确保每个文件可以独立编译
• 与Vite等现代构建工具兼容

4. 严格模式的最佳实践

1. 从项目初期就启用严格模式

• 早期启用比后期迁移更容易
• 养成良好的类型编写习惯

2. 逐步引入严格模式

• 对于现有项目，可以逐步启用严格模式选项
• 先启用strict: false，然后逐个启用子选项
• 优先启用：
  • noImplicitAny：提高类型安全性
  • strictNullChecks：防止空指针错误
  • noUnusedLocals和noUnusedParameters：减少代码冗余

3. 合理使用类型断言

• 只在明确知道类型时使用类型断言
• 避免过度使用any类型
• 优先使用类型守卫替代类型断言

4. 使用可选链和空值合并运算符

• 处理可能为null或undefined的值
• 提高代码可读性和安全性
• 示例：

  // 推荐使用可选链
  const user = getUser()
  const name = user?.name ?? '未知用户'
  
  // 不推荐使用类型断言
  const name = (user as User).name || '未知用户'

5. 为第三方库添加类型声明

• 使用@types包或创建自定义类型声明
• 确保使用第三方库时的类型安全

6. 使用TypeScript的高级类型特性

• 泛型：提高代码复用性
• 联合类型和交叉类型：处理复杂类型
• 条件类型：实现类型级别的逻辑
• 映射类型：转换现有类型

7. 编写单元测试

• 测试类型相关的边界情况
• 确保类型声明与实际实现一致

8. 使用ESLint和Prettier

• 结合ESLint的TypeScript插件
• 自动检查和修复类型相关的代码问题
• 保持代码风格一致

5. 在Vue组件中使用严格模式

组件Props的严格类型

<script setup lang="ts">
// 定义Props类型
interface Props {
  title: string
  count?: number
  disabled: boolean
}

// 使用defineProps和withDefaults
const props = withDefaults(defineProps<Props>(), {
  count: 0
})

// 错误：disabled是必填项，不能省略
// <MyComponent title="Test" />

// 正确：提供所有必填项
// <MyComponent title="Test" disabled="false" />
</script>

组件Emits的严格类型

<script setup lang="ts">
// 定义Emits类型
interface Emits {
  (e: 'update:modelValue', value: string): void
  (e: 'submit', formData: { name: string; email: string }): void
}

// 使用defineEmits
const emit = defineEmits<Emits>()

// 错误：事件名称不匹配
// emit('change', 'new value')

// 正确：事件名称和参数类型匹配
emit('update:modelValue', 'new value')
emit('submit', { name: '张三', email: 'zhangsan@example.com' })
</script>

响应式数据的严格类型

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

// ref的严格类型
const count = ref<number>(0) // 明确类型
const name = ref('默认名称') // 类型推断
const user = ref<User | null>(null) // 联合类型

// reactive的严格类型
const state = reactive<{
  loading: boolean
  data: User[]
  error: Error | null
}>({
  loading: false,
  data: [],
  error: null
})

// 错误：类型不匹配
// count.value = '123'

// 正确：类型匹配
count.value = 123
</script>

组合式函数的严格类型

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

// 定义接口
interface User {
  id: number
  name: string
  email: string
}

// 组合式函数
function useUser() {
  const users = ref<User[]>([])
  const loading = ref(false)
  const error = ref<Error | null>(null)

  const fetchUsers = async () => {
    loading.value = true
    error.value = null
    try {
      const response = await fetch('/api/users')
      if (!response.ok) {
        throw new Error('Failed to fetch users')
      }
      users.value = await response.json()
    } catch (err) {
      error.value = err as Error
    } finally {
      loading.value = false
    }
  }

  const activeUsers = computed(() => {
    return users.value.filter(user => user.email.includes('@example.com'))
  })

  return {
    users,
    loading,
    error,
    fetchUsers,
    activeUsers
  }
}

// 使用组合式函数
const { users, loading, fetchUsers } = useUser()
</script>

📝 最佳实践总结

1. 配置严格模式

   • 启用strict: true作为基础配置
   • 根据项目需求调整子选项
   • 结合Vue 3的TypeScript配置建议

2. 编写高质量的类型声明

   • 为所有变量、函数、组件添加明确的类型
   • 优先使用接口而不是类型别名定义复杂类型
   • 使用泛型提高代码复用性

3. 处理null和undefined

   • 启用strictNullChecks
   • 使用可选链和空值合并运算符
   • 避免过度使用非空断言

4. 组件开发

   • 为Props和Emits添加严格的类型定义
   • 使用withDefaults处理默认值
   • 组件内部的响应式数据也需要严格类型

5. 代码质量

   • 结合ESLint和Prettier
   • 禁止未使用的变量和参数
   • 避免switch语句中的fallthrough

6. 团队协作

   • 制定统一的TypeScript编码规范
   • 定期进行代码审查，关注类型使用
   • 分享TypeScript最佳实践

💡 常见问题与解决方案

1. 严格模式下编译错误过多

   • 逐步启用严格模式选项
   • 使用@ts-ignore暂时忽略特定错误（谨慎使用）
   • 优先修复高频出现的错误类型

2. 第三方库没有类型声明

   • 安装对应的@types包
   • 创建自定义类型声明文件
   • 使用// @ts-nocheck忽略整个文件的类型检查

3. 类型断言导致的运行时错误

   • 优先使用类型守卫
   • 在类型断言前添加运行时检查
   • 避免将未知类型断言为具体类型

4. strictPropertyInitialization导致的类属性错误

   • 在构造函数中初始化属性
   • 使用非空断言!
   • 使用初始化器赋值
   • 考虑使用可选类型?

5. useUnknownInCatchVariables导致的错误

   • 使用类型守卫检查catch变量的类型
   • 明确断言catch变量的类型
   • 只在必要时访问catch变量的属性

📚 进一步学习资源

• TypeScript官方文档：严格模式
• Vue 3官方文档：TypeScript支持
• tsconfig.json参考
• ESLint TypeScript插件
• TypeScript最佳实践

🎯 课后练习

1. 基础练习

   • 创建一个新的Vue 3 + TypeScript项目，启用严格模式
   • 配置tsconfig.json，调整各个严格模式选项
   • 编写一个简单的组件，使用严格的Props和Emits类型

2. 进阶练习

   • 将一个现有的Vue 3项目迁移到严格模式
   • 解决迁移过程中遇到的类型错误
   • 编写一个使用泛型的组合式函数

3. 实战练习

   • 在实际项目中启用严格模式
   • 制定团队的TypeScript编码规范
   • 实现一个完整的类型安全的组件

4. 类型系统练习

   • 学习TypeScript的高级类型特性
   • 实现一个复杂的类型工具函数
   • 分析第三方库的类型声明文件

通过本集的学习，你已经掌握了TypeScript严格模式的配置选项、Vue 3中的严格模式支持、最佳实践以及常见问题的解决方案。在实际项目中，合理配置和使用严格模式，能够充分发挥TypeScript的类型系统优势，提高代码的类型安全性、可读性和可维护性。下一集我们将进入新的主题：Vue Router 4.x安装配置，开始学习Vue 3的路由系统。