1 ts 与 vue3

  • ts 与 vue3 的关系
    • Vue 3 是用 TypeScript 重写的，因此原生支持 TypeScript。
    • Vue 3 提供了完整的 TypeScript 类型定义，提升了开发体验。
    • TypeScript 在 Vue 3 中是可选的，开发者可以根据需要选择是否使用。
  • 在当前项目中添加 TypeScript
    • 需要将 *.vue 文件的 <script> 标签修改为 <script lang="ts">。
    • 安装所需的依赖：使用 npm install -D typescript @vue/tsconfig。

2 js 与 ts

2.1 TypeScript 语法更为严谨

  • 必须为变量声明类型
  • 函数的参数和返回值需要添加类型注解
  • 对象的属性必须符合接口定义

2.2 类的区别

  • JavaScript 没有类型声明
  • JavaScript 没有访问修饰符（private/public）
  • JavaScript 无法检查参数类型
  • JavaScript 只能在运行时发现类型错误
特性 JavaScript TypeScript
类型系统 动态类型，类型检查在运行时进行 静态类型，类型检查在编译时进行
类型注解 没有类型注解 支持类型注解，增加类型安全
类型推导 由 JavaScript 引擎在运行时推导 支持类型推导，自动推导类型
错误检查 运行时错误 编译时错误检查，减少运行时错误
面向对象编程 基本支持类和继承，但没有强类型检查 强类型支持面向对象编程（类、接口、修饰符等）
枚举 没有枚举类型 支持枚举类型
模块化 支持模块化（ES6） 支持模块化，并提供类型检查

2.3 总结

简而言之，TypeScript 相较于 JavaScript 具有更强的语法检查能力，使代码更加清晰和接近 Java 的风格。在编写复杂项目时，TypeScript 的明确定义和语法检查可以帮助避免一些错误，但对于代码较少且简单的项目来说，使用 TypeScript 可能没有太大必要。

在使用 Vue 搭配 TypeScript 和 JavaScript 时，两者本身的差别不大，但在工具链上，TypeScript 会复杂得多。需要考虑以下几点：

  • 使用什么工具将 TypeScript 编译为 JavaScript。
  • 何时进行 TypeScript 到 JavaScript 的编译（通常希望在运行 npm run serve 时，当 TypeScript 代码变更后立即进行编译）。
  • JavaScript 文件存放在哪个位置，以保持代码结构清晰，上传到 Git 时简化操作，同时不大幅更改工具链。
  • 涉及的配置包括：
    • package.json：在 npm run serve 中添加 tsc watch，安装相关包。
    • tsconfig.json：在 compilerOptions 中设置 checkJs、outDir、path 等。
    • vue.config.js：设置需要监听的文件、ts_loader 等配置。