【金秋打卡】第12天 Vue3 + Typescript 从0到1开发通用基础组件（4-4~4-6）

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
4-4 样式解决方案
4-5 设计图拆封和组件属性分析
4-6 ColumnList 编码第一部分

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、安装bootstrap样式框架；
2、开发流程；
3、数组的类型断言；
4、类型自动补全设置；

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：
一、安装bootstrap样式框架
安装最新的bootstrap版本

npm install bootsrap@next --save

二、开发流程
1、将UI划分出组件的层级；
2、创建应用的静态版本；

三、数组的类型断言
类型断言：Array as PropType<ColumnProps[]>

为了类型推论，让我们在使用属性的时候获取更丰富的类型提示，比如在这里我们定义了一个属性 list，使用 vue 默认的 Array，只能确定它是一个数组类型，不能确定数组里面的每一项到底是什么样子的。你在 setup 中，看 props.list 就是一个any数组，但是如果使用PropType <ColumnProps[]> 这个时候，props.list 就变成一个 ColumnProps 的数组，你使用它的时候不论在 ts 中还是模版中都能获得类型的推断和自动补全等等。

四、类型自动补全设置

"vetur.experimental.templateInterpolationService": true