Vue新搭档TypeScript快速入门实践记录

下面是关于《Vue新搭档TypeScript快速入门实践记录》的详细攻略。

什么是 TypeScript

TypeScript 是 JavaScript 的超集，支持静态类型和其他一些语言特性，它最终会被编译成 JavaScript 代码。它大大提升了代码的可维护性和规模化开发能力。在 Vue 项目中使用 TypeScript，可以使代码更加清晰、可读性更高、可重构性更好以及更好的支持 IDE 自动补全等功能。

TypeScript在Vue项目中的配置

依赖

在使用 TypeScript 前需要安装 TypeScript 编译器和 Vue 的 TypeScript 类型，命令如下：

yarn add -D typescript @vue/cli-plugin-typescript

配置文件

在项目的根目录下新建 tsconfig.json 文件，如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "declaration": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

配置 ESLint

在使用 TypeScript 的 Vue 项目中，为了避免一些类型错误，需要配置 ESLint 能够解析 TypeScript。可以在项目根目录下创建 .eslint.js 文件，在其中加入以下代码：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  plugins: ['@typescript-eslint'],
  rules: {}
}

配置 Vue CLI

如果是在 Vue 项目中配置 TypeScript，可以直接使用 Vue CLI。在 Vue CLI 创建项目时，选择 TypeScript 即可自动生成相关配置。

vue create myproject

在上面命令行中选择 default（默认即可）。

示例

下面是两个 TypeScript 在 Vue 项目中的示例：

示例一：字符串转换为数字

有时候我们从后端接口中获取到的值都是字符串类型的，为了方便处理数据，我们需要将其转换为数字类型。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  components: {}
})
export default class HelloWorld extends Vue {
  // 将字符串转换为数字类型 (parseInt)
  strToNumber(str: string): number {
    return parseInt(str, 10)
  }

  mounted() {
    console.log(this.strToNumber('123'))
  }
}
</script>

在上面的例子中，我们使用到了类型声明、函数的参数和返回值类型说明，这都是 TypeScript 的强大特性之一。

示例二：打印可选属性的值

在 Vue 组件中，有时存在可选的 props 属性或者 data 中的可选值，为了避免在访问时出现 undefined 或者 null 的情况，我们需要判断其是否存在，这时可以使用可选链符 ?。

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  components: {}
})
export default class HelloWorld extends Vue {
  // 定义一个可选的 prop
  @Prop({ default: undefined }) private value!: number | undefined

  mounted() {
    // 使用可选链符打印可选属性的值
    console.log(this.value?.toFixed(2))
  }
}
</script>

在上面的例子中，我们使用到了 Prop 类型声明和可选链符 ? 等 TypeScript 的特性。