vue3项目集成TypeScript

首先 当然是你需要有一个vue3的项目

然后在项目终端输入 vue add typescript
‘然后这里一定要输y按回车啊 如果你输n 直接就退出了

然后就会出现一些列选项 建议大家 第一个 输入n回车
其他都输入y 回车

然后我们ts就进来了
然后运行项目 如果跑的起来就说明没问题了

然后 我们会发现 他对我们组件内容都做了一些修改
然后我们可以看到 文件的变化
特别是 main.js 变成了 main.ts

我们打开app.vue 会发现两点变化

第一 我们的script上有一个 lang 值等于字符串 ts
我们要使用ts就要这么声明
然后组件导出要套个 defineComponent
defineComponent在于将组件暴露出去 暴露之前就会对语法进行检查

然后我们对app.vue做一些修改

<template>
  <div>
    <button @click = "setTitle('修改值')">修改title</button>
    {{ title }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
let title:String="我是一个ts组件";
export default defineComponent({
  name: 'App',
  data() {
    return {
        title
    }
  },
  methods:{
    setTitle(value:String):void{
        this.title = value;
    },
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这时我们就使用了ts语法
做了 默认值 和 类型的限制
然后我们有声明了一个setTitle方法 返回值类型填void 表示没有返回值
接受一个字符串类型的参数
方法逻辑修改了 title的值
代码效果如下

当我点击按钮

也是没有任何问题

我们还可以限制data中的数据
参考代码如下

<template>
  <div>
    {{ name }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
interface standard{
    name:String,
    age:number,
    mobilePhone?:String
}
let newData:standard = {
    name:'张三',
    age:22,
}
export default defineComponent({
  name: 'App',
  data() {
    return newData
  },
  methods:{
   
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里我们用ts语法 定义了一个接口 叫standard 他规定要有三个字段 name 类型必须是 字符串 age 类型必须是数字

mobilePhone类型必须是字符串 但可以没有 后面加个问号 就表示 可有 可无

然后我们定义newData对象 实现了standard 接口 并按接口约定 定义了字段

然后data直接就返回了newData 此时 data中定义的数据 就是 newData的数据

运行的也没有任何问题

ts对象实现接口有两种写法 一种是我们上面写的、

let newData:standard = {
    name:'张三',
    age:22,
}

也可以是

let newData = {
    name:'张三',
    age:22,
} as standard

vue的计算属性中也可以这样使用

computed:{
   min():number{
    return 13
   }
}

这里我们定义了computed vue计算属性 然后定义了一个min方法 要求必须返回一个number类型的值
我们返回了13

然后我们用插值表达式输出这个min {{ min }}

这些就是比较基础的vue继承TS 和一些基础的使用方法啦