typescript怎么部署

大家好，欢迎观看我的项目演示。我设计了之客一个课程调研数据平台， 他只在打破信息壁垒，一方面为学生提供基于真实数据的课程参考，帮助他们找到最适合自己的学习路径。另一方面也为教师提供一个窗口，直观的了解教学反馈。 接下来就让我们一起走进之课。进入平台，首先看到的是我们充满活力的手页向下滚动，我们还按照学院和课程类型进行了精细化的分类浏览， 比如点击软件工程，学院相关的课程就会立刻筛选出来。这种设计让不同专业背景的同学都能快速定位到自己感兴趣的领域，体现了我们智能推荐精准匹配的设计初衷。最上面是做了一个轮播效果， 通过四张精心设计的主题图片自动轮播，大家可以看到在每个页面的右下角都有一个非常醒目的 ai 助手悬浮按钮，这是我们为整个平台配备的智能伴侣，一个随时待命的课程助手。 接下来我们进入核心功能模块探索课程页面，这里汇集了平台上的所有课程信息， 同学们可以通过顶部的搜索框快速查找，也可以打开筛选面板，按课程类型、学院甚至学分和评分范围进行多维度筛选，非常方便的找到心仪的课程。 点击进入一门课，比如操作系统与原理，就会来到这个课程评价问卷的填写页面。首先是一段清晰的填写说明，接着就是一道道具体的题目。 我们可以看到题型非常丰富，有单选择题、多选择题、五星评分题，也有开放式的文本问答题，所有必答的题目旁都有红色星号提示，这里加速一下，节约时间。 填好了，我们可以先保存草稿，下次回来继续。只有全部必答题完成后，提交按钮才会亮起，点击后，评价数据就会正式入库。提交成功三秒后会自动返回课程详情。页面 下方可以看到课程的详细信息。授课教师介绍过往同学的真实评分、文字评价，以及大家给课程贴的标签，比如干货满满或作业量大， 这些信息是同学们选课时最真实的参考，我们自己也可以发表评价，便于其他同学借鉴参考。加速中 可以看到，刚刚发表的评价已经展示出来了，同学们也可以收藏课程。 智客不仅是一个信息查询平台，更是一个智能化的学习助手。在智能推荐模块， ai 可以 根据你的学习数据和目标，生成个性化的学习路径。 这里加速中，等待 ai 生成内容。内容生成成功，我快速浏览了一下，我觉得这个 ai 规划功能不仅仅是一个噱头，它产出的内容质量确实达到了辅助决策和指导时间的程度。 这是我们项目希望通过 ai 技术真正为学生提供有价值帮助的一个很好的体现。 这里做了智能问答的功能，可以向 ai 提问。加速中，这里是课程推荐功能，结合学生的情况向学生推荐课程。最后就是学习分析功能。 此外，学习不应该是一个人的战斗，我们的学习论坛为大家提供了一个交流的空间，这里有按分类整理的帖子，同学们可以在这里提问，分享学习经验，寻找项目伙伴， 从解决选课信息不对称的痛点出发，只可整合了课程数据、教学反馈、 ai 规划和社区交流。 他不仅是学生的选课指南，也是教师的教学助手，更是一个共同成长的线上学习社区。希望通过这个项目能为同学们的学习生活带来一些积极的改变。感谢大家的观看！

hello， 各位观众朋友们大家好，今天我们来学习 typescript 第二十四章 ts 的境界用法之返行工具。啊，那返行工具呢？是 typescript 提前帮我们去内置好的一套工具， 不需要引入，直接呢就可以使用。他呢，主要是帮助我们去编写更灵活更通用的代码，以及提高代码的可读性和可维护性啊。 那么今天的话，大家一共会学到这五个常用的发型工具。然后我是定了一个接口，然后名字为 user 里边有三个属性。好，那么先来学第一个 partial， 那 partial 的意思呢？其实就是把 interface 里边属性变成是一个可选的意思，注意，是所有属性。对，是所有属性。好，那怎么把它变成可选的呢？我们先讲 挂，加一个问号是不是就可以了？对，他呢就会便利这里边所有属性，在每个冒号前面都加上一个问号。对，那么他呢就变成一个可选的了。好，我们先来用看一下他的用法。对，其实很简单。 对，这个 pass 呢，直接就可以用。对，直接用就可以了，不需要引入直接用。然后他呢接收一个范型。对，接收一个范型啊。 好，那这个发型里面所有的属性呢，他就会变成一个可选的属性。好，我们来看一下。对，都加上了问号，说明他已经变成是一个可选的了。对，这个就是他输出的一个结果。 对，就是便利下这里边每个属性，然后前面都加上一个冒号。啊，我们来实现一下它的原理，那它的原理也是非常简单啊， 然后把这个 parsle， 然后给它粘过来， 要给他接收一个发型。对，然后我们需要去便利一下他里边属性，那便利的话怎么便利的？我们先讲，哇，需要一个中括号，就跟否定是类似的，但是否定我们是不是要自定一个 q 名啊？这个也是可以，比如我们就随便起个名字，比如说叫 p， 然后呢，通过英语操作符， 但是这个硬操作符后面只能接收什么呢？接收联合类型，那怎么把它变成一个联合类型呢？哎，直接使用 tof 一个 t 不就可以了吗？ 对，这样的话不就变成一个联合类型吗？那么就会读到 address， name， 还有 age， 哦，他就会便利这三个东西了。然后呢，我们把它加上一个问号不就可以， 那这样它里面属性不就是可选择了吗？这样的话只是便利的 k， 那这个 value 我们还没取呢， value 怎么取？通过 key value 的方式直接把它取出来不就可以了吗？好，让我们来看一下效果。 哎，发现是不是也是一样的？对，所以说它的原理呢，就是通过这种方式去实现的。好，那这个就是 partial， 把里边所有的属性加个问号，也就是变成可选的一个意思啊。然后我们再看这个 require 的， 那 required 跟它正好是相反，就是把里面所有属性的变成一个，呃，必选的。好，我们先把它变成可选的啊，不然看不出来效果。好，然后使用 required。 好，我们再划上去看。哎，是不是问号就没有了，那么 top 就变成一个必选的了。好，那这个东西他要怎么去实现呢？ 哦，这个东西，哎，很多就会说，哎，老师，我直接把这个问号给大家去掉行不行？好，我把它去掉，我们再换一下，好，来看一下，来，发现是没有效果的。对，直接把问号去掉呢，是没有效果的。那怎么去呢？那很多人又会说，老师， 那我直接把这个问号给他删掉行不行？行，那怎么删呢？哎，这么删，加一个减号给他删掉，我们再来看一下，哎，是不是就可以了？所以说他需要使用这种语法，就是一个减号把这个问号去除掉的一个意思，那么这些属性呢？就会变成 必填的了，就是必选的意思了。那这个话就是 require 的一个用法，就是把所有的属性呢变成一个必选，然后必须使用这个减号问号的方式去排除掉这个问号，它呢就会变成这个必选的了。好，然后我们再看这个 pick， 那 pick 的话，它就是提取的意思。对，去 提取里边某个属性，比如说这边属性太多了，我可能用不着，我可能只用到内，或者是 a 值。对，就是举个例子，可能只会用到这两个属性，但是呢，我又不想重复的去写这玩意，对吧？那么就可以把它提取出来。好，我们来试一下。 然后这个 pick 呢，是接收两个范型，注意是两个范型，第一个就是我们要这个传入 interface， 第二个就是它里面属性，比如说我想提取 age， 好，鼠标划上去， age 是不是提取出来的？它支持联合类型，比如说我还想再提一个，提个内容 来，鼠标再画上去。哎，这两个属性是不是就提取出来了，就不用呢？重复去编写这个 interface 了？对，直接提取出来也可以用，是完全没有问题的。好，那么它的原理又是怎么去实现的？其实也是很简单。好，然后我们就需要接收两个类型了，然后这个 类型作为 t 类型的子类型，所以说使用 extent key of 一下这个 t。 好，那么既然有了这个 key， 那么就不需要去 key of 去便利它了，那么直接用来 key 就可以了。好，直接把它换成 key， 其实就已经实现了。这是 custom pick。 好，给到他来试一下。好，鼠标滑上去， name 跟 age 是不是提取出来的？对，没有问题，然后我们可以把这个给它去掉。对，这样就原汁原味了啊。 对，就是加上这个可选的，当然你也可以再做一些别的事情，比如说提取的时候呢，我还想把它变成一个 read nully， 也是可以的。对，你可以自己再给它修饰一下，也是没有什么问题的。 好，那这个的话就是一个 pick 的一个原理，就是提取你想要的属性。对，没有问题。 好，然后我们再看这个 x 路的， x 路的呢，它是排除部分属性。注意，它排除的呢是联合类型，它不是这个 interface。 好，我们再来看一下这个 x 路的。 对，它排除的是联合类型。就是怎么玩呢？就是比如说我有一个 a， 对，我有 a、 b、 c 这三个联合类型。那第二个范型呢？也是接受一个联合类型，比如说我想排除这个 c， 那排除这个 c 只剩什么呢？只剩 a b 了。好，来看一下。 哎，是不是只剩 ab 了？对啊，比如说他也可以支持联合类型，比如说我还想排除掉 a， 那么就只剩一个 b 了。对，他是通过两个联合类型去排除掉你不需要的， 我不想要 c 和 a， 那么呢，就只能是剩下一个 b 了，那这个的话就是一个 exclude 的一个用法。好，那我们来编写一下它， 它的原理，它的原理其实就一行代码，我们叫 custom exclude， 他接收两个范型。对，他是接收两个范型，一个 t 和一个 t 啊，如果 t 能包含，对，能包含这个 t 呢？返回一个 never， 否则呢，就直接返回这个类型就可以了。 好，我们给到他来看一下，那效果是不是也是一样的？哎，很多就会问，哎，老师，为什么是 never？ 那不能是别的吗？比如说我给个 on no， on no 行吗？ on no。 好，再看一下。哎，他就返回 on no 的， on no 显然是不行的。哎，那为什么只能是 never？ 哎，这个问题是不是很奇怪，为什么给 never 它就排除掉呢？好，来看这么一个例子。 好，这也是一道面试题啊。哦，那很多人就会问，这个 test 二最后的结果是什么呢？其实只有 a b， 注意， never 在联合类型中会被排除掉的。 对，注意啊， never 在联合类型中呢，是会被排除掉的，所以说它其实就是把这个 c 和 a 变成了一个 never 了，然后只剩下什么了？只剩下这个 b 了。对，就只剩下这个 b 了，就是变成这样了。 对，就是变成这样了。但是呢，这个 never 呢，在联合类型中又会被排除掉，所以说它的结果什么呢？它的结果不就是一个 b 吗？所以说这就是它的一个原理。对，这个就是它， 它的一个原理，其实就是这样子的。好，那这个的话就是一个 exclude 的一个用法。我们再看最后一个 a mat， 这个 a mat 呢？它就是去排除这个 interface 里边的属性的。我们先来看一下用法。 好，这个其实应该跟 pick 是正好是相反的。对，比如说我想排除 age。 好，来看一下，只剩下 dress name。 对，他也只是联合类写，比如说再排除一个 name。 好，再看。哎，只剩下一个 address， 对，它跟 pick 呢？正好是相反的。好，那这个东西怎么去实现呢？那这个东西呢？需要武魂融合剂去实现， 也就是这个 x l 和这个 pick。 对，这两个要融合 合系融合一下，首先我们需要用 x 六的去排除不需要的属性，然后再用 pick 对提取剩下的属性，那不就完成了吗？那首先需要 excel 的，比如说它传了内，那把内容的去给它排除掉。排除掉，那只剩下什么呢？只剩下 address 跟 age， 那用 pig 再把这两个提出来不就完事了吗？对不对？所以说需要一个武魂融合集， 我们来实现一下 tag， 然后他是接收两个范型 t， 然后第二个范型是这个 t 类型的子类型。 ok， 然后我们先用 x 六去给它排除的，但是 x 六的针接受什么呢？接收联合类型，所以说我们还得 key off 一下 t， 然后 key 的话就已经是这个。 呃，联合类型。好，这样的话就排除掉了，排除掉的话再用 pick 去提取剩下的。好，再来一个 pick t， 然后提取剩下的就可以了。 好，那这样的话应该就实现的话，我们来看一下，看一下效果啊。好，排除掉 age， 那么就只剩下 name 跟 address。 好， 鼠标划上去 adjust name。 对，他其实就是通过这种方式去实现的，当然也支持联合类型，比如说把 name 也给排除掉，那么就只剩一个 address， ok， 那以上的话就是本章所有的知识，那知识比较多，大家下去好好练一下， ok。

大家好，现在开始继续本教程的第四节课，这节课我们要开始创建项目了，我会用保姆级喂饭式的方法，让你成功创建企业官网的项目骨架，跑通项目，在浏览器里看到自己的第一个力 app 页面， 彻底搞懂项目目录结构，后续开发不迷路。好了，我们开始第一步。首先先创建项目文件夹，在你的电脑里找一个空间充足的字盘，新建一个文件夹，命名为 company website， 名称必须是英文，不能有中文和空格，这就是我们的项目文件夹，后续所有的代码都放在这里，接着右键点击这个文件夹，选择通过扣打开， 直接用 d s 扣打开这个文件夹，这就是我们后续写代码的工作目录。接着在 d s 扣里点击顶部菜单栏的终端，选择新建终端， 打开终端窗口，后续所有命令都在这里输入，不用再去系统的 c m d 里操作，更方便。最后划重点，一定要确保终端的路径 是我们刚刚创建的项目文件加路径，不然命令会输错地方。接下来开始第二步，用 like 创建 lyac 加 type script 项目， 其中 like 是 新一代的前端构建工具，比老工具速度快很多，创建项目，打包项目都很快。我们用 like 创建项目，不用自己一点点配置环境，一行命令就能搞定。新手友好。 首先在 vs code 的 终端里输入如图片所示的命令，然后按回车，我会把命令放在评论区，大家直接复制粘贴最稳妥，避免写错符号。输完上面的命令按回车后，终端会有如视频图片的提示，大家可以先暂停视频看一下， 然后你再输入外，再按一下回车即可。等待几秒钟，终端出现 scaffolding project in x x x， 就说明项目创建成功了。然后我们开始第三步，安装项目依赖。项目创建成功后，我们需要安装项目所需的所有依赖包， react script 等。在终端里输入如视频里的命令，然后按回车。我会把命令都放在评论区，如果你怕打错，直接在评论区复制黏贴最为稳妥。这个命令的意思是，读取项目里的 package， 把所有需要的依赖包下载到项目里， 相当于给项目装零件，装完项目才能正常运行。等待安装完成，终端出现 add the x x x packages and x x x， 就 说明安装成功了。网络好的话，几十秒就能完成。如果安装速度很慢或者报错是因为 m p m 服务器在国外网络不好。 在终端里输入如视频所示的命令，切换国内淘宝镜像，再重新执行安装命令即可。命令我会放在评论区，方便大家复制。我们依赖安装完成后就可以启动项目了。 在终端里输入命令，点 pm rundf， 然后按回车。这个命令的意思是启动 mate 的 开发服务器，让我们能在浏览器里预览项目，而且支持热更新。你改了代码，浏览器会自动更新，不用手动刷新，特别方便。 这个命令同样，我会放在评论区，方便大家复制。等待几秒钟后，终端会出现如视频里的提示。恭喜你项目启动成功了。 按住 c t r 键，点击终端里的 h t t p 冒号斜杠，斜杠到 o c l h o s t 冒号五一七三斜杠就能自动在 com 浏览器里打开页面，看到 light 加瑞亚和默认欢迎页面，说明我们的项目骨架完全搭建成功了， 我们紧接着第四步，搞懂项目目录结构。很多小白打开项目看到一堆文件夹就猛了，这里我只给你讲核心的文件和文件夹， 其他的不用管，默认配置就够用。在 vs 扣左侧就能看到项目目录核心结构，如视频所示，划重点！小白只需要记住，我们写代码主要就是在 s 二 c 文件夹里，核心是 app t s x， 也就是页面结构 index c s s 大 c s s 也就是页面样式。 access 文件架是放图片用的，其他文件不用动，大家可以先暂停视频，仔细看一下。第五步，清理默认代码，准备开发自己的官网 外生成的默认代码我们用不上，先清理掉，为后续开发做准备。首先打开 s r c up t s x 文件，把里面所有代码删掉，替换成如视频所示的最简代码。然后接着打开 s r c up css 文件，把里面所有代码删掉，留空即可。最后再打开 sercc index css 文件，同样把里面所有代码删掉，一样留空即可。 教程里有关的代码或者命令，粉丝们如果在评论区找不到，可以直接找我，免费领取。改完之后按 c t r l 加 s 保存所有文件，你会发现浏览器里的页面自动变成了我的企业官网，这几个大字说明清理成功，热更新也正常生效了。 恭喜你，到这里我们的官网项目骨架就完全搭建好了，后续我们就可以在这个基础上开发官网的各个页面和模块了， 课程的最后，我们依旧按照惯例总结一下避坑指南，大家可以先暂停视频仔细看一下。好了，这节课的内容就到这里，我们下节课再见。

koser 的 ai 规则本质上就是你给 ai 助手定制的行为准则，它不是那种聊完就忘的临时指令，而是一套会自动挂载到你每一次对话和命令里的指令集。 通过配置这些规则，你可以让 ai 产出完全符合你要求的代码风格，或者按特定模板生成文档。 在团队协助里，这套规则能确保所有人写出来的东西都像出自同一个人之手，让 ai 真正理解你的工作方式。 在 cursor 里，规则的生效是有先后顺序的，你要记住，项目级规则的权重最高，它会直接覆盖掉局设置。至于那个旧版的点 cursor rules 文件，官方已经明确打算弃用了， 咱们直接跳过，千万别在这些过时的东西上浪费时间。重点说说这个项目级规则，它是从零点四五版本开始引入的重磅功能，也是目前最灵活最推荐的方案。 你只需要在项目跟目录建立一个点 curser 文件夹，在往里的 rules 目录里放点 mdc 格式的文件就行。这种方式最大的好处就是专款专用，能让你针对不同的项目需求精准定制。 ai 的 行为。 局规则则是管大局的，如果你希望所有项目都统一用中文回复，或者有一些通用的编码习惯，就去局设置里的 usruse 界面配一下。虽然它的优先级排在项目级规则后面，但它是你所有项目的底色，配置一次，全线生效。 要配置项目级规则，第一步就是在项目根目录创建一个名为点 cursor 斜杠 rules 的 文件夹，这里面的规则文件必须以点 m d c 结尾，虽然它是 cursor 专用的格式，但本质上就是带了原数据的 markdown 文档，写起来非常顺手。第一种类型是 always， 顾名思义，它就像是项目的宪法，会自动挂载到你所有的对话和 command key 命令里，只要你开口， ai 就 会默认遵循这些规则。 所以那些全项目通用的编码风格或者绝对不能踩的坑最适合写在 always 类型里。第二种是 auto attached， 这是最智能的一种，它会根据你当前正在写的文件后缀来自动触发。 比如你再写点 t s x 文件，它就自动加载 react 规范，你再写测试用力，它就加载测试规则， 这样既能保证 ai 足够专业，又不会因为加载了无关信息而浪费你的额度。 剩下的两种分别是 agent requested 和 manual， 前者是专门给 ai agent 准备的，当你的任务描述匹配到特定场景时才会激活，而 menu 则是手动的， 只有你在对话框里输入艾特符号并选中这个规则时，它才会生效，适合处理那些偶尔采用一次的特殊场景。最后，千万别把所有规则都塞进一个文件里。利用艾特 file 语法， 你可以实现规则的模块化。看这段代码，我们将点 base 点 m d c 这个基础规则文件复制给当前的组建规范。这种链式调用的方式能让你像管理代码一样管理 ai 规则，维护起来非常轻松。 追求效率的话，直接用快捷键按下 command， 加 shift 加 p， 调出命令面板，输入 new cursor rule， 回车之后给规则起个名字，比如 react components。 这时候 cursor 会自动在目录里帮你建好对应的 m d c 文件，你直接往里写 markdown 规范就行，非常丝滑。 如果你更习惯格式化操作，或者想统一管理手头的规则，那就进到 cursor 的 设置界面，找到 rules 选项， 点一下那个加号 add new rule 按钮，效果是一样的。这种方式能让你一眼看到项目里所有的规则配置改起来也方便。 局规则的设置路径稍微深一点。在设置里的 user rules 这一项，举个最实用的例子，如果你想让 ai 永远用中文回你，就直接写上一句， respond in chinese at all times。 在 逻辑上，这就是把始终用中文响应这个要求，从右向左复制给 ai 的 局行为。配置好这一行以后，不管你打开哪个项目，它都会默认跟你说中文。 如果你还在用那个旧的点 cursor 文件，现在是时候做个大扫除了。官方已经明确这玩意以后会被删掉。迁移的第一步就是把你那个臃肿的旧文件按功能拆开， 别再把所有东西都塞在一起，按业务逻辑拆成一个个独立的点 m d c 文件，这样维护起来才清晰。 拆完之后，最关键的一步是在每个点 mdc 文件的头部配置 globes 字段。简单来说，就是把适用范围复制给这个规则。看这段代码，我们将路径里的星号点 t s x 复制给这个规则的生效边界。 这种按需加载的方式，能让 ai 的 反应速度和准确度都提升一个档次。最后，为了避免重复造轮子，记得用上艾特 file 语法。 你可以把通用的基础规范写在一个文件里，然后在其他规则里通过 app file 把它引用进来。在逻辑上，这就是把基础规范的内容从右向左复制给当前的规则链条， 这样既保证了规则的统一，又实现了模块化管理迁移。做完这一步，你的规则系统就彻底升级成功了。光说不练没用，咱们直接看一个 react 加 type script 项目的实战配置。基础规则是整个项目的地基， 你得在 base 点 m d c 文件里明确要求所有文件命名必须用 k 八 case， 也就是短横线连接 函数长度死磕在五十行以内，只要超过这个数， ai 就 必须提醒你拆分。这种硬性约束能从源头上保证代码不腐烂。 接 react 组建的时候，规则得定得更死一点。强制要求 ai 只写函数组建和 hooks 组建内部的结构也得按套路来。 最上面是类型定义，接着是常量，然后才是组建实现，最后是样式。这种结构化的逻辑，能让 ai 生成的代码像流水线产品一样标准，谁来维护都能一眼看懂。 type script 这块安全是第一位的。规则里必须写死，严禁使用 any， 如果遇到类型不确定的情况，就把 envelope 复制给他，强迫自己做类型收窄。另外，除了组建的 props 必须用 interface 定义，其他地方我建议你优先把类型定义复制给 type， 开启 strict 模式，让 ai 在 最严苛的环境下帮你写代码。 注意看这段代码的逻辑，我们将右侧定义的 userlist props 接口从右向左复制给左侧组建的范型约束。这种读法能让你更清晰地看到类型是如何注入到组建里的， 这就是 ai 规则的威力，它让 ai 写的每一行代码都符合你的逻辑直觉。下集，我们聊聊怎么让 ai 自动生成高质量的单元测试，不想错过的朋友记得点个关注。除了业务逻辑，测试也是重头戏。在 testing 点 m d c 文件里， 我们将原文件同目录下的测试路径复制给 glops 匹配规则。特别注意，我们将大于百分之八十的语句覆盖率复制给项目的质量红线。 这意味着 ai 在 写代码的同时，必须同步生成高质量的测试用力。这种硬性约束能从源头上掐掉低质量代码进场的可能，确保你的项目逻辑足够健壮。最后是文档规范。 在 docs 点 mdc 里，我们将中文编辑要求复制给所有的 markdown 文件。规则里明确了文档必须包含功能说明、使用视力和 api 表格。特别强调一点，我们将表格格式复制给 api 文档的展现形式。 有了这套规则， ai 生成的就不再是随意的文字，而是配套完整的标准化技术文档，让项目的可维护性直接拉满。现在来看实战效果， 在 agent 模式下，我直接输入创建一个用户列表组建。注意看， ai 并没有随性发挥，它精准调用了我们预设的点 mdc 规则，它自动采用了短横线命名， 并且在代码里将右侧定义的 userlist props 接口从右向左复制给组建的类型约束，这种完全符合预期的产出才是真正的生产力。总结一下，项目级规则不是束缚， 而是让 ai 真正入伙的入职指南，它解决了团队写作中最头疼的代码风格不统一和规范执行不到位的问题。当你把开发标准赋值给这些规则文件， ai 就 从一个通用的聊天机器人变成了最懂你项目的老员工。 这种一致性带来的维护成本降低，是任何手动审查都比不了。关于规则的设置，就聊到这， 下集，我们玩个大的，看看怎么利用 curser agent 自动化重构那些没人敢动的陈旧代码，看看规则是如何在重构中充当首位角色的。觉得有收获的朋友点个关注，咱们下期见！

好，那我们今天给大家介绍的是 type script 进阶跟一些高分技巧啊，因为很多同学之前可能没有用过 type script， 或者有同学用过，但是掌握的不深，我们呢，今天通过三个问题来让大家从基础到进阶，再到对标到开源项目这样三个层级啊，大家可以到时候自己拿去 对应一下，看自己在哪个级别上能够跟得上啊。就是目前呢，可能你就停留在这个级别上的。呃，这个就基本的掌握情况啊，一个呢是初中级的同学呢啊，比如说去面试的时候，很多公司他现在要求用 type strip， 那 就让你去说一说你在参与的这个项目里面有哪些？ 呃，这个用 type script 来写的 type script 基本用法和它的特性是什么样子的啊？然后呢，就是项目构建跟初步化的初期你是怎么样去考虑 type script 翻译方案跟打包工具的？因为 type script 翻译跟打包非常多，它的方案你像我们给大家接下来要去介绍的啊， tsc 相信是大部分同学都知道的，对吧？就是它原生的传统的 type script 翻译工具。然后呢 wait wait， 大家这个现在基本上没有哪个前端同学不知道 wait 吧 啊？ wait。 然后再进阶一些，如果是一些工具库，我们会选择用 t s up 来进行 type 去打包啊，这是打包构建方案第二个问题，第三个问题呢，如果你作为前端 leader， 在 过往的项目设计的时候呢，有没有去参考一些热门的优秀开源项目这些项目 呃，在你的项目中是怎么样实践出来的啊？是怎么样去把它融入到你的项目里面去的，比如说我们，呃，给大家借鉴的三个啊，一个是 react hook form， 还有一个是 on to design 这三个库，它们本身全部都是通过 mono wrapper 架构 来编辑的，这是第一方面啊，第二个呢，就是它里面有非常多的 type script 配置相关的，还有一些类型推导的技巧，非常值得大家去学习啊，我们等一下一步一步的来给大家介绍。 那总共的呢，就是这样三个问题，大家可以层层递进啊，一个是基础特性，语法实战，还有呢就是你自己在做 type script 来设计项目的时候，会选择哪些方案跟工具？第三点是你基于 type script 来设计项目的时候会有哪些考虑？ 好好，那如果说今天是第一次这个接触来看 type script， 同学在评论区来扣个一 啊。今天是第一次看 type script 或者第一次学习 type script， 同学在评论区来扣个一。呃，我给大家画了一个最短路径学习图啊，大家下去之后呢，把这个文档拿到之后可以去看一看，因为可以这样来说啊，虽然现在呢， 呃，这个大部分同学可能现在还没有掌握 type script， 但是可以这样说就是 type script， 它一定是你在求职掌心的过程中必不可少的一个技能点 啊，那怎么样快速掌握呢？我们可以从这样起步，一个是基础类型，还有就是接口，还有呢自定义相关的类型，然后再是范型类型，保护高级特性 和呃，这个 type 配置最佳实践啊，以及实战项目这样几个步骤来学。那么其实我们在今天基础部分的第一个问题内容讲解的时候呢，基本上可以把前面的这些基础点给它全部覆盖到啊。好，我们现在呢，正式来从第一个问题来看， 在你的参与的项目中间常用的 type script 用法跟特性有哪些？请你说一说啊。那这个时候呢，其实你在给面试官说的时候，主要从它的类型，接口类型别名范型、类型推导，还有 extends 跟 inforce 关键字这几个方面呢，给面试官去说啊，这样才能够体现出来你对于 type script 整体的啊认识和掌握情况 啊。好，所以呢，一般呢，我给大家这个总结了第一句就是在我过往参与的项目过程项目里面呢， type sir 是 非常重要的一个点啊，它既帮助我们提升了代码的可读性，可能性跟开发效率，然后呢，又能够提供给我们非常强大的类型系统和多种特性的支持 啊，包括有类型接口别名换行以及类型推导，这是基本的概念点。给面试官这样去介绍完之后呢，我们来从第一个概念来看，就是基础类型，然后再是接口别名换行推导 extensement 啊，大家把这个部分内容 看完之后呢，他大大概三四十分钟啊，我安排的这个时间大概三四十分钟，这部分看完之后，基本上你的这个 type script 就 算入门了啊。然后呢，我们再进到第二步来看你的翻译打包工具怎么选择，再到第三步是你作为 leader 啊，怎么样用 type script 来构建你的项目，来设计你的整体项目的架构啊？这样三部分 好，我们呢从第一个问题来展开啊，一般如果你要学习 type script 的 话，基本上大家自己都要去考虑，能够有一个 type script 翻译的工具来配合你去学习，对吧？那所以呢，我现在为了给大家降低门槛，把学习的门槛降到最低，最低啊，怎么做呢？其实大家现在有个办法，就直接搜索 type script， 进到 type script， 进去之后这边呢有一个 playground， 点开 playground， playground 中间这里就是你可以去写的内容，比如说你看我在这边写一个，呃， type user 等于 合一，假设啊，这样呢就能完成这个呃基础内容的编辑了，然后我直接在这里点一个 console， 点 log， 呃，比如说定一个新的数据啊，比如说 user， 冒号 user， 等于这个时候呢，其实你就只能输入合一，对吧？它的提示也有，这里就可以直接打印 user， 打印 user 啊，这个呢是呃比较简单的一步，那么我们先可以先来看，我们待会第二个问题会专门给大家去讲啊，关于 ts 的 翻译啊，如果大家现在比较比较急，就是自己想去完完整去看一看它的写法和它的这个基础用法的话，大家就直接从这个网站来去看啊。

您是否想要快速方便的配置？ 您是否想要一边配置一边查看官方文档，一边学习一边实践？如果您的答案是肯定的，那么你一定不能错过 ts config helper 这个项目。它是一个基于 wive 的交互式工具，它可以帮助您可视化的配置 文件。您只需要在网页上勾选或填写你想要的配置下，就可以生成对应的斯咖啡省文件，并且可以下载到本地。他同时还提供了丰富的注视和文档，方便开发者进行理解和使用。而且你还可以将自己的配置 贴进去，同样可以用来作为文档来查阅。他是一个让您配置 type script 更加轻松、高效、有趣的工具，为您的 type script 项目提供强大的支持。赶快试用体验一下吧！

ok， 咱们今天正式学习这个 type script 的开发啊，那这个的话我们要先学习 tip script 语言，那必须和鸿蒙开发一样， 我们需要先有一个编辑器啊，需要一个开发者的平台啊，去运行这个 typescript 的编码啊。这里呢，我们就直接用 vs code 啊，我们百度搜索这个 vs code 就可以了啊，我们点击第一个，然后打开它的官网 啊，这个地方有一个登录的 four windows 啊，当然你要如果有 mac 的话啊，可以用这个 macos 这个下载也可以哈，然后我们直接点击下载就可以了啊，稍等一会啊。 ok， 我们下载完成了啊， 点开他这个 exe 的这个安装包，然后我们点击同意下一步，然后这些我们都勾选上就可以了啊， 就是比如还是呃添加道帕三，还是这个呃菜单啊，还是创建快捷方式，我们都过上就可以了，然后点击安装就可以了，这个安装比这个红棚这个变异器安装简单很多哈。 ok， 我们现在就安装完成了啊，我们直接勾上运行 vsco 的，然后点击完成， 这个时候他就会默认打开一个呃变音器。好吧，这就是 vsco 的这个变音器啊，我们看到都是中文的哈，是因为我设置了一个插件啊，就是这个 chinese 啊，如果说不知道的话，我们可以点击这个扩展啊，这个地方有一个类似于小方块的 这个呃，插件的一个扩展的一个地方啊，我们可以搜索这个，虽然 es 啊，这个时候呢，我们就可以搜索出这个来，然后点击这个安装就可以了啊，安装完了以后呢，我们要重启一下这个变音器啊，这个现在就是安装完成了， 很简单哈。 ok， 接下来的话，我们就直接打开一个新一个文件夹啊，我们可以在我们之前的这个呃地盘吧，然后有个华为，然后在这个下面呢，嗯，新建一个，新建一个文件夹吧， 小 t s 一，好吧，然后我们就进入了这个，我们选择 yes 啊， yes， 就是 一个权限的问题啊，然后呢我们新建一个叫 ex 第二 ts。 好， ok， 然后这个时候呢就可以看到了啊， 我们看到以后呢，我们可以设置一下字体的大小啊，然后这个地方有个小齿轮，然后我们点设置， 然后设置这个地方呢会出现一个这种配置页面，然后这里面有一个方塞子，就是控制这个字体的大小，我们设置一下，设到二十到二十就可以了，这个时候我们在编辑的时候呢，他这个字体就变大了。 ok， 字体变淡了以后呢，其实我们也已经前面讲过了哈，他这个呃 type script 呢，是基于扎布 script 的，所以说呢，我们可以使用一下 consol， 然后我们可以打印一下这个 hello word， 是吧？ 那他怎么去编译这个 hello word 呢？其实我们是需要安装一下 typescript 的一个编译的中断命令的啊，那怎么去安装呢？我们可以点击上面有一个中端啊，然后我们新建中端， 然后这个时候呢下面就会出现一个呃中断的一个命令行的一个输入地方啊，这个时候呢他是默认 power share 的啊，我们也可以在这个地方 电梯这个下拉的一个箭头啊，然后我们打开这个 command 泡泡泡啊，这个时候呢，我们就打开这个 cmd 的一个命令窗口，这个时候呢，之前我们已经安装 我这个 n p m 的一个命令啊，我们可以运行 n p m， 因此到杠 g type script， 那这个时候呢，他会就默认安装这个 typescript 的这个编译的一个命令啊，那这个时候呢， npm， 如果说大家没有安装成功的话，也可以去百度搜索 note j s 啊， note j s 安装完成以后呢 啊，他会默认带着 npm 啊，带着 npm 啊，及其他的，具体的我就不细不细讲了哈， 那这个时候呢，我们怎么去编译它呢？编译成 g s， 让它去网页端运行呢，这个时候有一个名字叫 t s c， 我们运行 t s c， 然后找到这个 index 点 tsa， 好，稍等一下，哎，我们就会发现右面右面这个地方就会边缘出来了一个叫 index 点 js， 你看我们这个地方是一模一样的啊， ctr log 啊，其实它是兼容呃， js 语法的 啊。再比如我们定一个变量啊，比如说 lint， 然后 age， ok， 那我们给他一个 number 的类型啊，比如说三十一岁， 好吧，这是什么意思呢？这个 lent 呢，就是定义变量啊，定义变量的一个前面一个标识符啊，后面呢就是我们的变量的名字啊，比如说我就是年龄取消 a 啊，但是不要执意啊，不，不能直接写年龄啊，这个是不太符合规范的。那么后面这个呢，就是这个变量的类型，你比如说这个变量呢，要放一个 数字类型的，我们一般就用 number 啊，当然 super charge 就 string 啊，后面会讲啊，它 typescript 神奇在哪呢？就是在于我们对于这个类型的一个 强制的啊，严格的要求的一个规范。那所以说我们在给 a 制定义传输 string 类型的时候呢， 特别默认说，哎，不能讲随便类型分配，可以 number 了，他是有这么一个强类型的一个限制啊，这样也以至于我们不需要去过多的关注于他的类型， 呃，不会犯和这颜色之前那种弱类型的错误啊。这个时候呢，我们先去掉，我让他们编一下，我先保存一下啊，我先保存一下，然后我们再编一下， ok， 哎，你看到这个就是编译过后的 javascript 的代码样子，是不是啊？所以说我们通过这个 javascript 的样式就可以在 html 里边去运行了 啊。其实在 t 用直接用这个 t s 去运行的话，那肯定是没法在浏览器里边运行了，它是需要一个转移的过程，那么这个 t s c 就是这个转移的过程， 转移完了以后呢，我们就可以就可以通过这个扎斯 creep 这个脚本去在浏览器里面去运行了。

好的，接下来咱们看第二张 g s t s 环境大件，咱们先看一下基础配置，咱们点击打开讲义， 在这里有几个小点咱们说一下。首先咱们说找出终端或者 power 十二，固定到桌面上，哎，这个 macos 对 应的是终端， windows 对 应的是 power 十二， 不论是终端或者 pos 机，我们未来执行命令就靠它了啊，所以说呢，我们把它放在这个桌面上，放在一个我们比较容易找得到的位置啊，这个麦克 s 这个终端在这个地方啊，我们打开，然后呢往下拉 这个麦克 s， 新的麦克 s 找这个程序实在是太麻烦了啊，大概是在最下边啊，叫做终端，这个我们点击，然后呢把它固定到然后这个地方，这样的话呢，我们使用起来会更加的方便。 这个 power 十二，我们再说 windows 安装的时候，然后呢我们也会告诉大家它具体在哪个地方啊？好， 然后呢第二个统一开发环境啊，呃，我们也说了，当然对于 java 熟了和 java 熟了这种基本语言学习啊，不统一也可以啊，但我们未来在做项目时，关于这一点是严格要求的 啊，这个我们未来写程序啊，这个我们做项目从一开始，然后呢一点一点的这个安装， 这个如果我们一开始不把这个环境做好啊，如果未来遇到问题，到时候去解决，比如说重装系统之类的，那么耗费的工程实在实在是太大了，哎，所以说呢，在这里我们提醒一下统一开发环境， 但是呢，对于咱们这个 gs 和 ts 这种基本语言学习，我们就写一点代码，不统一也可以啊，所以说呢，如果统一的话呢，可以参考一下，比如说最好重装系统官方镜像全新安装，其实这个大家一听 我就学个 gs 和 ts， 你 还让我重装系统，哎，所以说咱们说了嘛，不统一也可以，哎， 然后呢这个适应优化主要是减少对操作系统的修改，哎，这个不得不说这个优化呀，尤其是咱们在做编程这方面，只要是用了优化，那么可能就会接而连的会来到很多很多的问题，哎，最主要的就是这个优化，然后呢这个造成的，哎， 然后呢选择一款十分广泛使用的杀毒软件，哎，十分广泛使用的，主要是现在杀毒软件都自带防火墙，而不同软件的防火墙规则可能会阻止一些正常插件的安装 啊，这一点我们感觉真的是很这个啊，很深啊，因为有时候我们安装一个插件，怎么安装都安装不上啊，其实啊，最根本的原因就是这个防火墙造成的啊，所以说呢，我们找一款十分广泛使用的， 一般来说呢，广泛使用的相对来说呢，这个防火墙的规则呢定义的，然后呢会更加的明显清楚一点啊，如果实在安装不了，我们可以把防火墙先进用一下，这个时候你就会发现基本上就能解决问题啊，所以说呢，这个我们在这里就着重的说了一下这一个啊， 最后呢，我们看一下我们的安装目录啊，我们都是也安装 vs code 的， 这么一步一步来啊， 我们呢这个安装的非常细致啊，因为啊，这个呃，我们的第一步就是先把我们的环境给打好，然后呢才能这个继续写代码，所以说呢在这里我们这个详细一点不为过， 所以说我们精细安装，打好第一步。好的，这就是咱们这一节内容，我们稍后开始具体的安装。

通常情况下，我们将 type script 成为结构类型的类型系统，其原因就是 type script 只关心类型的结构和功能。接口就是一种结构类型，它是定义对象类型的另外一种方式。通过关键字 interface 来定义。 我们来看这个例子。 interface 后边跟一个类型的名字，这个名字呢，一般以大写字母开头，跟我们类型别名的定义是类似的，但是后边不要加等号，而直接跟一个对象类型就好。 那如何使用这个类型呢？方法跟我们的类型别名类似，就是直接的去引用这个类型就好了。我们来用代码诠释一下这个例子。返回代码，我们在 s、 r、 c 里边创建一个新的文件， 叫零九杠 interface， 点 t， s。 然后我们使用 interface 关键字来创建一个接口。这个接口的名字呢，叫 point。 以大写字母开头，后面直接跟一个对象的定义。 我们定义一个 x， 它的类型是 number。 我们再定义一个 y， 类型也是 number。 好，接下来我们看到这个胖特呢，有个红色的波浪线。那这个问题呢，我们来看说啊，这块胖特已经重复定义了。我们打开 tap adiosys， 我们这里边定一波胖特。所以呢，我们暂时把它给注视掉， 这样我们这里就没有问题了。接下来呢，我们来去定义一个函数，来去使用这个 point。 我们定义函数叫做 print card。 然后 我们在这里边传入一个行参 p t， 它的类型呢，就是这个 point。 好，方法体就是业务代码了，我们暂时不用写。接下来呢，我们开始准备使用这个 print code。 这个方法我们得需要给它传入一个真实的对象， x 是一个数值类型，我们可以传一个数值， y 呢，也是一个数值类型，我们可以再传入一个数值。这样的话呢，我们就可以通过接口来定义一个类型了。 那接下来呢，我们来给大家讲一个非常重要的内容，就是类型别名和接口之间有什么不同呢？ 上一节我们给大家讲解了类型别名，他也是定义类型的方法。类型别名和接口是非常相似的，在很多情况下，我们可以自由选择他们。几乎所有可以使用 interface 定义的这种类型，都可以通过 type 类型别名来定义。那它的区别 是什么呢？我们来看个例子。首先呢，我们来看如何扩展我们的接口。那我们现在看扩展接口，我们先通过什么方式来扩展呢？ interface， 比如我们定义一个接口，叫做 animal， 动物， 那里边呢，我们可以给动物定一个属性，叫做 name 名字。那接下来我们还可以给动物啊定义其他的一些属性。 那在接口里边我们如何的去扩展这个 animal 呢？我们可以通过 interface 再定义一个，比方说熊 bear， 然后我们 extends 通过这个关键字扩展来去定义 anymore 的扩展。好后边呢，还是直接跟一个划括号里面来定 我们扩展的类型。这个属性呢，我们可以叫做 honey， 为 break， 就是他喜欢的食物。那我们现在定义了一个新的属性。接下来我们去声明一个 bear 的实力， 它的类型就是 beer， 那它的值很显然有两个属性，一个是内蒙，比方说我们去写一个 zootravini， 那他还得需要去实现另外的一个属性，叫做 honey。 大家看，如果是我们不写这个属性的话，就会提示我们缺少 honey 这个属性。为什么呢？因为我们通过扩展的方法扩展了 animal。 那我们还得需要去定义一下这个属性。比方说 这是布尔纸，我们写个处。熊是非常喜欢蜂蜜的。那这个呢？我们定义好了 bear 以后，我们就可以 conso 点 log 一下 bear， 点内幕，我们可以打印一下它的名字。另外呢，我们还可以 conso 点 log 一下 bear， 点 honey。 好，我们可以去编一下，然后并且在我们的 dist 目录下面去运行一下 note 零九 interface。 我们看到 wini true 没有问题了。 那我们再来看一看，通过所谓的类型别名 tap 如何去扩展我们类型呢？那在 tap 里边，我们通过一种叫做交叉扩展的方式。那什么叫交叉扩展呢？我们通过 tap 仍旧式需要定义这个 animal。 带 定义之前呢，我们先把我们通过 interface 定义的这个，现在暂时地注视掉。那我们仍旧是定义一个类型，叫做 animal， 它有一个属性 name， 它的类型也是个锁定。注意这里边的等号一定要写上去。那接下来我们来看如何去扩展这个 animal 呢？我们在 interface 里边，通过 extent 去扩展。那在类型别名里边，我们通过什么方式去扩展呢？比方说，我们仍旧去定义一个 bear， 它等于 animal。 然后我们通过一个交叉点的方法去扩展。其事实上就是通过一个特殊符号按的去扩展。在按的的后面呢，我们去再写一个类型，比方说我们写一个 honey 为 burly。 好了，这是我们使用类型别名扩展 的方法。那下边的内容呢？其实是一样的，我们仍旧是可以定义一个 bear 这样的一个实例。然后它的类型呢？就是个 bear。 后边我们去真实的去定义一个对象啊，我们的一个 name， 比方说 winnie， 然后 honey 为处 好。我们看到这样的方式也能够扩展我们的类型。好，我们把它代码注视一下。下面我们再来看一看如何向 现有的类型或者是接口里去添加 style。 首先呢，我们来看一看接口 interface 如何去添加新字段。好，我们定一个 interface， 这个接口的名字叫做 my。 然后我们对一个属性叫做 count， 它的类型是 number。 然后我们想给这个 my window 再去添加新的字段。那我们如何添加呢？诶，我们还可以去通过 interface 再定义一次 my window。 我们再给它添加一个新的属性 title， 它的类型是 stream。 那么我们看到这回呢，我们同时定义了两个同名的 my window， 同时也定义了两个类型。那我们看这两个类型会不会覆盖，还是说它真正的能把我们这两个类型给合并呢？我们通过定义一个实例来看一下。我们 const 个 w， 它的类型就是买 window。 它的值呢，是一个真实的对象。我们定一个 title， 比方说我们 hello， t s。 那同时呢，我们看到这里已经给我们出现问题了，说 thale 缺少一个属性 count。 所以在这里头呢，我们再决定一个 count 这样的属性，比方说一百。 哎，很显然，我们通过定义两次同名的一个 interface 可以去添加新的字段。 那 tap 能不能这么办呢？我们来做个实验。比方说我们现在可以把这个代码先注视掉。接下来呢，我们开始准备去通过 tap 来定义。那我们已经就是定一个 my window。 后边呢，我们要等于一个对象的类型。 那我们仍旧是定一个 title 是四句。好。接下来，我们打算通过类似于接口的方法去扩展它。我们再通过 type 定一个 my window。 好。后边呢，我们说就是定义一个对象。这块呢，我们应该写一个 count， 比方说 number。 好。定到这呢，大家发现已经有问题了，他告诉我们，标示符 my window 是重复的。也就是说，我们类型创建以后 是不能更改的。也就是通过 tap 这种方式，一旦创建了类型，就不能够进行扩展，或者是不能通过同一个类型的名称去扩展我们这个类型。 我们来总结一下扩展接口。我们我们来总结一下可以通过 interface 接口的方式去定义类型。一般情况下，我们通过接口定义的类型都可以通过类型别民 type 的方法去定义。 那如何去扩展一个接口呢？ interface 扩展接口的方法就是可以在 interface 后面加关键字 extense 去扩展接口。 那所谓的类型别名 tap 如何去扩展呢？我们需要使用一个按的符号去扩展这个类型。 那如果我们想像一个类型添加字段 interface 呢？我们可以通过定义同名的这样的类型去扩展字段就好了。 二、类型别名 tap 是不能通过同名的方式去扩展的，我们只能通过交叉点方式加个按的符号去扩展。

我们这个编辑器的话是 vip strom 吧，大家如果想用的话就用这个来去做，那我们现在去给大家去讲解一下 ts 怎么样去做 debug 啊？ debug 的话我其实是用的比较少，一般我不喜欢，喜欢用这个 come so 方式去做，对不对？ 那其实是我们可以通过迪拜的方式去运行，并且验证我们整体的这个编码还是不错的，那怎么样去开启呢？迪拜的它本身因为 ts 这边跟 gs 这个文件啊，真正运行的是 gs 文件，所以我需要知道当前因为我打断点肯定是在打在这个 ts 里面吧，对吧？那打的这个断点应该是要就是他要知道啊，去运行 gs 时候知道这个 ts 的这个具体打的这个点的这个位置。 那怎么样做到这个方式呢？很简单，在 tscophic 去编译的过程，我们可以给它开启啊，我们的 inmate 这里我们可以开启 source map， 这个开启啊， source map 开启的话，它会在编译过程中也会去创建一个另外一个文件，我们可以看一下 tsc 啊，编译完毕，然后我们可以看一下这边会多生成一个 gs map 文件，这个 map 文件的话，主要是 让我们这个当前这个文件跟外面的这个 ts 文件做一个绑定操作运营的每一个好的代码，这个我们不需要知道啊，这个是专门去我们机器机器去看的，我们不需要去知道它里面的一个规则，我们只大概知道他就是为了连接这个 gs 跟 ts 的这个代码的啊。 ok， 那我们 ts 这个编码的话，我们可以稍微修改一下这个效果吧，比如说啊 let age 啊，然后是一个 number， 类型是三十二岁，对吧？然后我们可以写一下呢， cost next year 吧，然后这个是一个函数，对不对？然后我们去定义这个函数叫 h 啊，加上一吧， 然后我们可以运行一下 next year， 对吧？那这样的话我可以去在这边打断点啊，我需要知道当前去执行它的时候，这个 h 到底有什么变化，对不对？这个方式就可以在这边去定义，那我这边已经定义过了，我先删除一下你们看到的东西，应该是在这里去，这样子软，这里我可以增加一个新的模式啊，然后我一般是 no g s i 去执行这个 a next 文件的，所以我就 no g 这个环境啊，就叫 index 吧，好吧。然后我们这边的话是 configuration 这里啊，在这里的话是我们需要 javascript 这个文件，我们需要知道到底什么文件， 那应该是要执行这个文件，对不对？那我可以直接点一下这个文件就可以了，或者是你可以改改成，比如说 content root 这个 micro， 然后把它放在这里， 这样也可以啊，横在路，然后 des 目录里面的 index 文件就被执行，但是每次运行的时候应该去编译一遍，所以我这边比 far 浪这里还要去增加这个编译环节，编译环节这边有一个 compiletypes， 我直接点开，然后点上这个 tscophat 文件啊，咖啡文件给它读取进去， ok 就可以了，然后这样的话，我这边的第八个的时候，他就可以正常取第八个，我们去看一下， 哎，你有发现我迪拜的时候这边就出来了，如果你们这边没有运行成功，有可能是这边的被 muse 掉了，就是我的 break pond 被 music 掉了。啊，这样的话你会这样子，我点开就直接就运行成功了，你不知道的一定要按一下这个让他关闭，那这样的话我去点进去，他就直接打到这个蛋点里面，然后这个时候就可以看到当前 h 应该是三十二加减以后啊，就在下一行，他应该要变了，我们可以看一下下一行，下一行的时候你看 it 已经变成三十三。当今这个坐拥欲里面的啊， diss 就是奥迪范，因为我们当前没有是一个类啊，如果是类的话，他这个 diss 应该是类的本身啊，指向类的本身。 其实格拉布这些函数我们可以看到格拉布里面有什么样的东西。第八个工具还是比起咳嗽啊，其实是更便捷更好用的啊，大家可以去多用一下，然后其实 vivo 里面也可以这样做。 vivo 里面，呃，前提就是要你要开启 map 啊，说是 map 要在 v 里面去开启的啊，它才可以去用到这一块的内容。