Vue3.0之前的TypeScript最佳输入实践的详细描述

前言

我个人对更严格的类型限制没有正面的看法。毕竟，我习惯于用各种类型的散文写作。

然而，在鹅最近的一个项目中，请学习它.真香！

注意这篇文章标题的“前面”。本文旨在讨论Ts混合框架的使用，而不是类API

1.使用官方脚手架建造

npminstall-g @ Vue/CLI # or arnglobal add @ Vue/CLI新的Vue CLI工具允许开发人员使用TypeScript集成环境创建新项目。

只需运行vue create my-app。

然后，命令行会要求预设。使用箭头键选择手动选择功能。

接下来，只需确保选择了TypeScript和Babel选项，如下图所示：

完成后，它会询问您是否要使用类样式的组件语法。

然后配置其余的设置，如下图所示。

Vue CLI工具现在将安装所有依赖项并设置项目。

接下来让我们运行这个项目。

总之，先跑。

2.项目目录分析

通过树形指令看目录结构，可以发现它的结构和正常构造的有很大的不同。

这里主要涉及两个文件，垫片-tsx.d.ts和垫片-vue.d.ts

两句话总结如下：

Shims-tsx.d.ts允许您在Vue项目中编写jsx代码。shims-vue.d.ts主要用于TypeScript识别。vue文件。Ts默认不支持导入vue文件。这个文件告诉ts导入。vue文件根据VueConstructorVue。这时，当我们打开友好的src/components/HelloWorld.vue时，会发现写法大不相同

模板div class='hello' h1{{ msg }}/h1！-省略-/div/templatescript lang=' ts '从' vue-property-decorator '导入{component，prop，vue }；@Componentexport默认类HelloWorld扩展了Vue { @Prop()私有消息！字符串；}/脚本！-添加“scoped”属性以将CSS限制为此组件-style scoped/style此时，准备打开一个新的章节TypeScript快速介绍和vue-property-decorator

3.TypeScript正在开始

3.1基本类型和扩展类型

Typescript与Javascript共享相同的基本类型，但也有一些额外的类型。

元组元组枚举枚举Any和Void1的并集。基本类型

//number，让decLiteral: number=6支持二进制、八进制和十六进制；设hexLiteral:数=0xf00d//string，单引号和双引号都让name: string=' bob让句子： string=`你好，我叫$ {name}。//Array，第二种方式是使用数组泛型，数组的元素类型是let list: number[]=[1，2，3]；让list : Arraynnumber=[1，2，3]；让u: undefined=undefined让n: null=null2.特殊类型

1.元组元组

将元组想象成有组织的数组，您需要以正确的顺序预定义数据类型。

const messyArray=[' things '，2，true，undefined，null]；constuple :[number，string，string]=[24，' indrek '，' lasn']如果默认情况下不遵循元组排序的索引规则，那么