使用 typescript 开发 vue 项目

最新推荐文章于 2025-05-27 23:44:35 发布

原创最新推荐文章于 2025-05-27 23:44:35 发布 · 660 阅读

2 ·

CC 4.0 BY-SA版权

前端进阶同时被 2 个专栏收录

21 篇文章

订阅专栏

typescript

14 篇文章

订阅专栏

本文详细解析了基于Vue的TypeScript项目结构，包括关键文件的作用及配置，并补充了TS语法要点，如计算属性、接口定义、装饰器和类型断言，帮助开发者深入理解并高效运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）文件目录解析

.
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue // 页面入口文件
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts // 项目入库文件
│   ├── router.ts
│   ├── shims-tsx.d.ts // tsx 负责 tsx 的模块注入
│   ├── shims-vue.d.ts // 负责vue 的模块注入
│   ├── store.ts
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tsconfig.json // ts的配置文件  ts最终会转化为js
├── tslint.json
└── yarn.lock

1. @vue/cli-plugin-typescript ：这个插件负责把 ts 编译成为 js

2. shims-vue.d.ts：用来支持 .vue 后缀的文件的生效 ts 本身是不支持vue的

shims-tsx.d.ts：同理用来支持 .tsx 后缀文件的生效

（二）ts 语法补充（自己不会的记一下）

ts 的类与es6 的类大致相同，但是会多几个特性

1. 计算属性（原computed）

get 关键字：

<div>{{ count }}</div>

get count () {
  return this.moneyList.length
}

把 moneyList 的数组长度实时监听

2. 接口（定义规范和约束）

定义了 upgradeList 的规范，注意接口书写位置 @Component 上面

如果类型不对，编译会报错

interface upgradeList {
  comboType: number
  condition: number
  conditionDesc: string
  desc: string
  downMoney: number
  levelId: number
  money: number
  name: string
  orderMaxCount: number
  promotionId: number
  type: number
  valid: boolean,
  comboId: number
}

private upgradeList:upgradeList[] = [] // 升级套餐列表

定义 upgradeList 数组，使用upgradeList的规范~

在项目中最常用的是定义函数传参数的类型~

方法一：传递的参数先结构，再引用接口定义

interface paramsCheck {
  activityId: string,
  age: number
}

const getUserInfo = ( { activityId, age }: paramsCheck ):string => {
  return `activityId: ${activityId}, age: ${age}`
}

var res = getUserInfo({
  activityId: '23',
  age: 23
})

console.log(res)

方法二：不用接解构了

interface paramsCheck {
  activityId: string,
  age: number
}

const getUserInfo = (params: paramsCheck):string => {
  return `activityId: ${params.activityId}, age: ${params.age}`
}

3. 装饰器

如：@Component 中的@

主要作用：扩展功能（es7）

例子：原理

let addUrl = (url:string) => {
  return (target:any) => {
    target.prototype.url = url
    // 这个例子中target指向 Stu 这个类，给Stu这个累的原型加上url属性
  }
}

@addUrl('我是lily')
class Stu {
  
}

let stu1:any = new Stu()
console.log(stu1.url) // 我是lily

装饰器要写在被扩展功能的上面，紧挨着，当调用类的时候触发装饰器

import { Component, Vue, Prop } from 'vue-property-decorator'

'vue-property-decorator' 是一个库，用来简化书写装饰器

@Prop private name!:string; // ! 表示name确定有值  附加!到其声明中来断定确实已赋值

4. 断言：判断类型

5. typescript 出现的目的，解决 js 弱类型的一个缺陷