【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践
<div id="page-content" class="rich_media_area_primary"><div class="rich_media_area_primary_inner">
<div id="img-content">
<p>1、使用官方脚手架构建</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153003772-1469602011.png"></p>
<p>新的 <code><span>VueCLI</span></code>工具允许开发者 使用 <code><span>TypeScript</span></code> 集成环境 创建新项目。</p>
<p>只需运行 <code><span>vue createmy-app</span></code>。</p>
<p>然后，命令行会要求选择预设。使用箭头键选择 <code><span>Manuallyselectfeatures</span></code>。</p>
<p>接下来，只需确保选择了 <code><span>TypeScript</span></code>和 <code><span>Babel</span></code>选项，如下图：</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153028373-2012567925.png"></p>
<p>完成此操作后，它会询问你是否要使用 <code><span>class-style component syntax</span></code>。</p>
<p>然后配置其余设置，使其看起来如下图所示。</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153104010-167808284.png"></p>
<p> Vue CLI工具现在将安装所有依赖项并设置项目。</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153122887-377631954.png"></p>
<p> 接下来就跑项目啦。</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153150013-426023427.png"></p>
<p> 总之，先跑起来再说。</p>
<h3>2、项目目录解析</h3>
<p>通过 <code><span>tree</span></code>指令查看目录结构后可发现其结构和正常构建的大有不同。</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153224386-915137765.png"></p>
<p>这里主要关注 <code><span>shims-tsx.d.ts</span></code>和 <code><span>shims-vue.d.ts</span></code>两个文件</p>
<p>两句话概括：</p>
<ul class="list-paddingleft-2">
<li>
<p><code><span>shims-tsx.d.ts</span></code>，允许你以 <code><span>.tsx</span></code>结尾的文件，在 <code><span>Vue</span></code>项目中编写 <code><span>jsx</span></code>代码</p>
</li>
<li>
<p><code><span>shims-vue.d.ts</span></code> 主要用于 <code><span>TypeScript</span></code> 识别 <code><span>.vue</span></code> 文件， <code><span>Ts</span></code>默认并不支持导入 <code><span>vue</span></code> 文件，这个文件告诉 <code><span>ts</span></code>导入 <code><span>.vue</span></code> 文件都按 <code><span>VueConstructor<Vue></span></code>处理。</p>
</li>
</ul>
<p>此时我们打开亲切的 <code><span>src/components/HelloWorld.vue</span></code>，将会发现写法已大有不同</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153243198-1411732212.png"></p>
<p> 至此，准备开启新的篇章 <code><span>TypeScript</span></code>极速入门 和 <code><span>vue-property-decorator</span></code></p>
<h3>3. Vue组件的 Ts写法</h3>
<p>从 vue2.5 之后，vue 对 ts 有更好的支持。根据官方文档，vue 结合 typescript ，有两种书写方式</p>
<p>Vue.extend</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153620558-815010770.png"></p>
<p>vue-class-component</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153642191-1562946.png"></p>
<p>理想情况下， <code><span>Vue.extend</span></code> 的书写方式，是学习成本最低的。在现有写法的基础上，几乎 0 成本的迁移。</p>
<p>但是 <code><span>Vue.extend</span></code>模式，需要与 <code><span>mixins</span></code> 结合使用。在 mixin 中定义的方法，不会被 typescript 识别到</p>
<p>，这就意味着会出现<strong>丢失代码提示、类型检查、编译报错等问题。</strong></p>
<p>菜鸟才做选择，大佬都挑最好的。直接讲第二种吧：</p>
<h3><strong>4.1 <code>vue-class-component</code></strong></h3>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153703912-470859936.png"></p>
<h3>我们回到 <code>src/components/HelloWorld.vue</code></h3>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153728528-720227724.png"></p>
<p>有写过 <code><span>python</span></code>的同学应该会发现似曾相识：</p>
<ul class="list-paddingleft-2">
<li>
<p><code><span>vue-property-decorator</span></code>这个官方支持的库里，提供了函数 <strong>装饰器（修饰符）</strong>语法</p>
</li>
</ul>
<h4><strong>1. 函数修饰符 <code><span>@</span></code></strong><code></code></h4>
<p>“@”，与其说是修饰函数倒不如说是引用、调用它修饰的函数。</p>
<p>或者用句大白话描述： <code><span>@</span></code>: "下面的被我包围了。"</p>
<p>举个栗子，下面的一段代码，里面两个函数，没有被调用，也会有输出结果：</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153804984-573674301.png"></p>
<p> 直接运行，输出结果：</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153818942-718445155.png"></p>
<p>上面代码可以看出来:</p>
<ul class="list-paddingleft-2">
<li>
<p>只定义了两个函数： <code><span>test</span></code>和 <code><span>func</span></code>，没有调用它们。</p>
</li>
<li>
<p>如果没有“@test”，运行应该是没有任何输出的。</p>
</li>
</ul>
<p>但是，解释器读到函数修饰符“@”的时候，后面步骤会是这样：</p>
<p>1、去调用 <code>test</code>函数， <code>test</code>函数的入口参数就是那个叫“ <code>func</code>”的函数；</p>
<p><code>2、test</code>函数被执行，入口参数的（也就是 <code>func</code>函数）会被调用（执行）；</p>
<p>换言之，修饰符带的那个函数的入口参数，就是下面的那个整个的函数。有点儿类似 <code><span>JavaScrip</span></code>t里面的 <code><span>functiona(function(){...});</span></code><code> </code></p>
<h4>2. <code><span>vue-property-decorator</span></code>和 <code><span>vuex-class</span></code>提供的装饰器</h4>
<p><code><span>vue-property-decorator</span></code>的装饰器：</p>
<ul class="list-paddingleft-2">
<li>
<p><code><span>@Prop</span></code></p>
</li>
<li>
<p><code><span>@PropSync</span></code></p>
</li>
<li>
<p><code><span>@Provide</span></code></p>
</li>
<li>
<p><code><span>@Model</span></code></p>
</li>
<li>
<p><code><span>@Watch</span></code></p>
</li>
<li>
<p><code><span>@Inject</span></code></p>
</li>
<li>
<p><code><span>@Provide</span></code></p>
</li>
<li>
<p><code><span>@Emit</span></code></p>
</li>
<li>
<p><code><span>@Component</span></code> (<strong>provided by</strong> vue-class-component)</p>
</li>
<li>
<p><code><span>Mixins</span></code> (the helper function named <code><span>mixins</span></code> <strong>provided by</strong> vue-class-component)</p>
</li>
</ul>
<p><code><span>vuex-class</span></code>的装饰器：</p>
<ul class="list-paddingleft-2">
<li>
<p>@State</p>
</li>
<li>
<p>@Getter</p>
</li>
<li>
<p>@Action</p>
</li>
<li>
<p>@Mutation</p>
</li>
</ul>
<p>我们拿原始Vue组件模版来看：</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153904964-953544119.png"></p>
<p> 以上模版替换成修饰符写法则是：</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153926996-1792936274.png"></p>
<p>正如你所看到的，我们在生命周期 列表那都添加 <code><span>privateXXXX</span></code>方法，因为这不应该公开给其他组件。</p>
<p>而不对 <code><span>method</span></code>做私有约束的原因是，可能会用到 <code><span>@Emit</span></code>来向父组件传递信息。</p>
<h3><strong>4.2 添加全局工具</strong></h3>
<h3>引入全局模块，需要改 <code>main.ts</code>:</h3>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116153958551-617251136.png"></p>
<p> npm iVueI18n</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116154013991-1294373847.png"></p>
<p> 但仅仅这样，还不够。你需要动 <code><span>src/vue-shim.d.ts</span></code>：</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116154031571-864528099.png"></p>
<p>之后使用 <code><span>this.$i18n()</span></code>的话就不会报错了。</p>
<h3><strong>4.3 Axios 使用与封装</strong></h3>
<h4>1. 新建文件 <code><span>request.ts</span></code></h4>
<p>文件目录:</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116154052389-1286895124.png"></p>
<p>2. <code>request.ts</code>文件解析</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116154130160-37002954.png"></p>
<p> 为了方便，我们还需要定义一套固定的 axios 返回的格式，新建 <code><span>ajax.ts</span></code>：</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116154147763-557544558.png"></p>
<p> 3. <code>main.ts</code>接口调用：</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116154210967-1022175858.png"></p>
<p>4、编写一个组件</p>
<p>为了减少时间，我们来替换掉 <code><span>src/components/HelloWorld.vue</span></code>，做一个博客帖子组件：</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116154246276-955640537.png"></p>
<p> 然后在 <code><span>Home.vue</span></code>中使用:</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116154305637-409319541.png"></p>
<p> 这时候运行项目</p>
<p><img src="https://img2018.cnblogs.com/blog/1178909/201911/1178909-20191116154323142-947711439.png"></p>
<p> 这就是简单的父子组件</p>
<h3>5、参考文章</h3>
<p>TypeScript — JavaScript with superpowers — Part II</p>
<p>VUE WITH TYPESCRIPT</p>
<p>TypeScript + 大型项目实战</p>
<p>Python修饰符 （一）—— 函数修饰符 “@”</p>
<p>Typescript 中的 interface 和 type到底有什么区别</p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：JeckHui；<br/>
个人主页：前端实用站点推荐； 热榜资讯早读：热榜资讯-导航；<br/>
转载请注明原文链接：https://www.cnblogs.com/xiaohuizhang/p/11872044.html</p><br><br>
来源：https://www.cnblogs.com/xiaohuizhang/p/11872044.html
頁:
[1]