Vue现在非常热门，并且很长一段时间以来我一直在考虑与它进行认真的项目，所以当机会突然出现时，我跳了进去。但是有一个小问题-该项目的要求之一是用TypeScript编写。 一开始，我对如何开始使用此组合感到非常压力，但是vue-cli使其变得如此简单。
如果我说这次骑行非常顺利，我会撒谎。 有很多挫折感，数小时的盯着屏幕看，桌子上还有一些麻烦，但是在使用Vue + TypeScript工作了一个多月之后，我可以说这是值得的-如果我必须用Vue编写另一个应用程序，我不会没有TypeScript就不会这样做。
本文是关于将Vue和TypeScript配对的，并假定了两者的一些基本知识。 如果您还没有机会和他们一起玩并且好奇， Vue提供了很好的指南 ，并且TypeScript文档是一个不错的起点。
我们需要在全球范围内安装vue-cli ，以便我们可以快速启动Vue项目。 通过在终端中运行以下命令来安装vue-cli：
npm install -g @vue/cli一旦安装完成，那就很好了。 如果您没有安装TypeScript，那么我们不需要事先做，因为vue-cli会在您启动新项目并在其中选择TypeScript时进行处理。
现在，我们已经安装了vue-cli，启动启动Vue + TypeScript的项目所需要做的就是运行vue create 。 在创建新项目时，选择TypeScript，我们一切顺利。
vue create <app-name>项目启动后，结果如下：
<img src="https://s2.51cto.com/images/blog/202411/28074115_6747ae1b36d7e26662.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">
vue-cli还为我们提供了选择Babel以及TypeScript来进行Polyfill，CSS预处理器，lint，单元测试库（我选择了Jest，请选择Jest！）以及其他配置的能力。 您甚至可以将选择保存在预设中，以供以后用于其他项目。
以下是配置项目时会被问到的一些方便的问题的摘要：
<img src="https://s2.51cto.com/images/blog/202411/28074115_6747ae1b89e0c29619.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">
我想提到的一件事是vue-cli 3.0带有一个用户界面 ，使创建新项目更加容易。 在终端中运行vue ui ，vue-cli将打开一个UI
完成vue-cli之后，我们已经完成了所有设置，并获得了一个漂亮的应用程序目录结构。
- tsconfig.json：全部设置完毕 ，我们可以对其进行编辑以适合我们的要求。
- shims-vue.d.ts：已经设置了这些垫片，以帮助TypeScript在导入
.vue文件（单个文件组件）时理解它们。 - vue-property-decorator：如果选择使用类样式的组件，则vue-cli会添加此插件，以便我们可以使用各种装饰器。 这非常方便，并使代码更具可读性。
- 类组件：如果选择使用它们，则vue-cli为您设置舞台。 请记住，您仍然需要注册路由器挂钩，以便类组件可以解决它们。
我需要设置的一件事，是希望将Sass的局部部件包括在包装中。 为了避免在每个组件中导入Sass变量和mixins，我必须将它们加载到vue.config.js 。 shared.scss是导出应用程序内使用的所有变量和mixin的文件。
这是我使用Sass配置进入的地方：
chainWebpack: (config) => {
config
.module
.rule('vue')
.uses
.get('vue-loader')
.tap(({ loaders, loaders: { scss }, ...options }) => ({
...options,
loaders: {
...loaders,
scss: [
...scss,
{
loader: 'sass-resources-loader',
options: {
resources: [
'./src/styles/shared.scss',
],
},
},
],
},
})); vue-property-decorator包公开了Vue属性，并使它们可用作装饰器。 在我的应用程序，我最后只用@Component ， @Prop ， @Watch但也有其他如@Emit ， @Inject和@Model ，使你的代码更加广泛地使用时繁琐。
Vuex打字了……虚张声势！ Vuex支持TypeScript引导，起初，我什至都不知道。 我开始寻找将Vuex与TypeScript结合的正确方法，偶然发现了Alex Jover Morales关于Vue.js状态管理与Vuex和TypeScript 的egghead.io课程 。 它帮助我了解使用TypeScript时管理Vuex状态的正确方法。
例如：
// actions.ts
import { ActionTree } from 'vuex';
import { RootState, ModuleState } from '@/types';
const actions: ActionTree<ModuleState, RootState> = {
// all your actions go here
};这是我刚开始时不知道的另一件事，但希望早日找到它。 我正在为几乎所有东西创建吸气剂，但是那感觉并不对。 我开始寻找更好的方法来执行此操作，并找到弗朗切斯科·维图洛（Francesco Vitullo）的一篇有趣的文章 ，为我整理了一些内容。 这就是我发现的vuex类的地方， 该类为所有vuex映射器提供了装饰器。
因此，现在我可以这样做：而不是编写仅用于访问状态属性的新getter：
import {
State,
} from 'vuex-class'
@Component
export class MyComp extends Vue {
@State(state => state.bar) stateBar
} 使用TypeScript， VS Code的编码体验要好得多。 没有来回检查我在mutation-types.ts声明的突变类型mutation-types.ts因为VS Code可以识别它们并在我键入时建议正确的mutation-types.ts类型。
<img src="https://s2.51cto.com/images/blog/202411/28074117_6747ae1d82c6185676.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">
修改突变中的状态也是如此-使用TypeScript，编辑器知道我的状态结构是什么样，并建议正确的属性。
如果您使用的是VS Code，我强烈建议您使用Vetur插件，因为它提供了Vue工具，并附带了其他语法，例如语法突出显示（这对于Vue单个文件组件非常有用）以及立即可用的lint 。
就像JavaScript生态系统中的所有其他内容一样，Vue + TypeScript还有很长的路要走。 例如，我无法使用vuelidate，因为它没有类型 。 但值得庆幸的是， vee-validate提供了一种解决方法，因此我不必走自己编写这些书的艰难道路。
总之，我发现开发经验更加顺畅，并且在使用TypeScript时VS Code是完全不同的野兽。 我真的不需要唱Vue的赞美-它很容易上手并开始构建，并且节省了很多时间来尝试围绕框架的内部工作。
翻译自: https://css-tricks.com/vue-typescript-a-match-made-in-your-code-editor/
