vue中如何使用typescript

在 vue 中使用 typescript 非常简单，只需通过以下步骤添加即可：安装 typescript；在 package.json 中添加 typescript 配置；创建 typescript 文件；使用 typescript 类型为数据和方法添加类型注释；使用 tsc 命令编译 typescript 文件；集成 vue cli 以在构建 vue 应用程序时编译 typescript。

Vue 中使用 TypeScript

如何添加 TypeScript

在 Vue 项目中添加 TypeScript 非常简单：

1. 安装 TypeScript：npm install -D typescript
2. 在 package.json 中添加 TypeScript 配置：

{
  "scripts": {
    "build": "tsc && vue-cli-service build"
  },
  "devDependencies": {
    "typescript": "^4.x.x"
  }
}

登录后复制

创建 TypeScript 文件

在项目中创建 TypeScript 文件，例如 MyComponent.vue：

<template><p>My Component</p>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  name = 'MyComponent';
}
</script>

登录后复制

使用 TypeScript 类型

TypeScript 允许您为 Vue 组件中的数据和方法添加类型：

@Component
export default class MyComponent extends Vue {
  name: string = 'MyComponent';  // 类型注释

  greet(name: string) {  // 方法类型注释
    console.log(`Hello, ${name}!`);
  }
}

登录后复制

编译 TypeScript

使用 tsc 命令编译 TypeScript 文件：

立即学习“前端免费学习笔记（深入）”；

tsc --watch  // 监听模式，在文件更改时自动编译

登录后复制

集成 Vue CLI

为了在构建 Vue 应用程序时编译 TypeScript，请在 package.json 中添加以下脚本：

{
  "scripts": {
    "build": "tsc && vue-cli-service build"
  }
}

登录后复制

现在，您可以通过运行 npm run build 构建您的应用程序，它将自动编译 TypeScript 代码。

以上就是vue中如何使用typescript的详细内容，更多请关注抖狐科技其它相关文章！