几周前，我开始了一个新的Vue项目。 我的一位联合开发人员建议在项目上使用TypeScript：“它将帮助我们发现错误和错误，并且我们添加的越早，越容易”。 这是我第一次使用TypeScript进行开发。“
为什么使用TypeScript？TypeScript主页：https://www.typescriptlang.org/index.html
首先，您现在应该执行TypeScript的操作。 TypeScript是一种与Java语法相同的语言。 TypeScript是我们所谓的Javascript超集。 这意味着您编写的每个Javascript代码都是有效的TypeScript代码，并且可以由TypeScript进行编译。 因此，您可以将TypeScript添加到您现有的Javascript项目中。 TypeScript的主要目标是提供可选的静态类型和类型推断。
// The variable x will be seen as a boolean
let x: boolean
// Here the type inference makes y as a boolean too
let y = true
您可以键入变量，函数参数，函数返回... TypeScript然后将对您的代码进行静态分析以检查危险的操作（根据类型）。 您可能会意外地尝试为变量分配错误的类型或访问未定义对象的属性。 最后一个问题在运行时发生很多，您没有检查对象是否不是null。 然后，代码崩溃了……
let x: boolean
/**
If you want to assign another a value with the wrong type
TypeScript will trigger an error. In my editor I have :
Assigned expression type "This is a string, not a bool" is not assignable to type boolean
**/
x = 'This is a string, not a bool'
/**
Here 'find' can return undefined if no correct document is found.
Therefore, accessing the property 'type' will trigger a runtime error
**/
const documents = [{type: 'Review'}, {type: 'Book'}]
const myArticle = documents.find(document => (document.type === 'Article'))
const myArticleType = myArticle.type
对于最后一个示例，在编译过程中将出现以下错误：
TypeScript strict null check error
希望本文能说服您使用TypeScript。 如果您是新手，建议您阅读手册
现在让我们看看如何在Vue项目中安装它。
在Vue中使用TypeScript
安装TypeScript在一个新项目上
如果启动新项目，则可以使用Vue CLI进行自己的设置，然后在选项中选择Typescript。
然后输入“yes”以使用类样式的组件语法。 稍后我们将介绍为什么您应该使用此语法。
在现有项目上
如果将其添加到现有项目中，仍然可以使用NPM添加TypeScript：
npm install -g typescript
而且，您可以检查TypeScript配置的建议配置。
在Vue中使用TypeScript的代码语法
首先，让我们告诉我们的Vue编译器，Javascript将是TypeScript。 在Vue文件的script标签中，执行以下操作：
<template>
</template>
<!--Add lang="ts" to specify it's TypeScript-->
<script lang="ts">
</script>
<style>
</style>
然后，我们需要将语法修改为TypeScript友好的。
在安装期间（通过Vue CLI），我建议您使用类样式的组件语法。 但是存在其他语法。 在Vue中，主要有3种语法：Options API，Composition API和Class API。 我建议您使用后者。 但是，我们将看到如何将TypeScript与它们一起使用。
Options API
此语法是Vue的基本语法。 但是您需要以不同的方式导出组件。 通常的导出没有启用类型推断：
<template>
</template>
<script lang="ts">
export default {
//No type inference
components: {},
data() { return {} },
computed: {},
created() {},
methods: {}
}
</script>
<style>
</style>
因此，您将需要使用Vue.extend语法导出Javascript：
<template>
</template>
<script>
import Vue from 'vue';
// Note the Vue.extend
export default Vue.extend({
//Type inference
components: {},
data() { return {} },
computed: {},
created() {},
methods: {}
})
</script>
<style>
</style>
在我的项目开始时，我们在Vue文件中使用options API。但是我们在TypeScript方面遇到了一些问题，因此决定使用Class API。坦白地说，事后看来，我认为一些问题是由于我们未正确使用TypeScript与选项API一起使用。例如，不键入函数将返回。现在，随着TypeScript的最新更新，我不再能够重现这些错误。
但是我仍然建议您使用类样式的组件进行编码，因为您可能像我一样对Options API遇到一些小问题。此外，网络上还有更多带有类样式组件的示例。
Composition API