TS | Z blog

31 逐条来看tsconfig.json配置

本小结我们主要讲 tsconfig.json 文件的可配项以及功能。 tsconfig.json 是放在项目根目录，用来配置一些编译选项等。当我们使用 tsc 命令编译项目，且没有指定输入文件时，编译器就会去查找 tsconfig.json 文件。如果在当前目录没找到，就会逐级向父文件夹查找。我们也可以通过在 tsc 命令中加上–project 参数，来指定一个包含 tsconfig.json 文件的目录。如果命令行上指定了输入文件时，tsconfig.json 的配置会被忽略。 # 直接在项目根目录下执行tsc命令，会自动根据tsconfig.json配置项编译 tsc # 指定要编译的项目，即tsconfig.json所在文件目录 tsc --project ./dir/project # 指定要编译的文件，忽略tsconfig.json文件配置 tsc ./src/main.ts 接下来我们看一下 tsconfig.json 里都有哪些可配置项。tsconfig.json 文件里有几个主要的配置项： { "compileOnSave": true, "files": [], "include": [], "exclude": [], "extends": "", "compilerOptions": {} } 我们来逐个学习它们的作用，以及可配置的值： [1] compileOnSave compileOnSave 的值是 true 或 false。如果设为 true，在我们编辑了项目中文件保存的时候，编辑器会根据 tsconfig.json 的配置重新生成文件，不过这个要编辑器支持。 [2] files files 可以配置一个数组列表，里面包含指定文件的相对或绝对路径。编译器在编译的时候只会编译包含在 files 中列出的文件。如果不指定，则取决于有没有设置 include 选项；如果没有 include 选项，则默认会编译根目录以及所有子目录中的文件。这里列出的路径必须是指定文件，而不是某个文件夹，而且不能使用*、?、**/等通配符。 [3] include include 也可以指定要编译的路径列表，但和 files 的区别在于，这里的路径可以是文件夹，也可以是文件，可以使用相对和绝对路径，而且可以使用通配符。比如"....

32 书写声明文件之磨刀：识别库类型

前面我们提到几次.d.ts后缀的文件，这节课我们来完整学习下与声明文件相关的内容。我们之前讲模块的时候讲到过两种常见模块标准，即 CommonJS 和 RequireJS。不同的模块在实现方式上是不一样的。我们要为已有的第三方 JS 库编写声明文件，以便在 TS 中更好地使用类型系统，所以首先需要知道我们使用的 JS 库被编译成了什么类型。我们来分别看下几种类型的特征： 5.2.1. 全局库在一开始，没有 webpack 这些编译工具的时候，我们都是在 html 文件里使用 script 标签引入 js 文件，然后就可以在引入的后面使用引入的库了。比如我们使用 jQuery，只需要在<body>标签里通过<script src=“http://xxx.com/jQuery.min.js”></script>引入 jQuery 库，然后就可以在<script></script>标签内使用： $(function() { // ... }); 这种不需要我们引入什么变量，只需要将库引入即可使用的库，就叫做全局库。后面讲到 UMD 模块的时候要注意，UMD 模块既可以作为模块使用，又可以作为全局库使用的模块，所以在判断一个库的时候，如果它可以像例子中那样全局使用，首先要确定它是不是 UMD 模块；如果不是，那它可能就是一个单纯的全局库。另外，你还可以通过看库的源码，来判断它是什么类型，一个全局库，通常会包含下面内容中的一个或多个：顶级的 var 语句或 function 声明；一个或多个赋值给 window.someName 的赋值语句；判断 document 或 window 是否存在的判断逻辑。因为顶级的 var 或 function 是直接在全局环境声明变量或函数，不使用立即执行函数包裹会影响到全局，所以有这种一般会是全局库；当出现给 window 设置某个属性名 someName ，然后给这个属性赋值的语句时，是在给全局对象 window 赋值。引入这个库后直接通过 window.someName 即可在全局任何地方访问到这个属性值；如果出现 if 语句或三元操作符这种判断 document 或 window 是否存在的语句，也有可能是要给这两个全局对象添加内容，所以也有可能是全局库。...

33 书写声明文件之砍柴：为不同类型库书写声明文件

5.3.1 模块插件或 UMD 插件一些模块和插件是支持插件机制的，比如我们常见的 jQuery，它的插件有非常多。我们可以为库书写声明文件的同时，为库的插件定义声明文件，可以参考官方模板 module-plugin.d.ts。 5.3.2 全局插件全局插件往往会修改全局中一些对象，在这些对象上添加或修改属性方法，比如下面的示例： // add-methods-to-string.js String.prototype.getFirstLetter = function() { return this[0]; }; 这段代码在 String 构造函数的原型对象上添加一个 getFirstLetter 方法，这个方法可以返回字符串的第一个字符。我们创建一个字符串，就可以调用这个方法。来讲下这个原理，我们在 String 构造函数原型对象上添加一个方法，这个方法就会被 String 创建的实例继承，如果我们使用new String(‘Lison’)的方式创建一个实例 name，那么这个 name 将是一个对象类型的值，它的属性是 0 开始到 n 的数字，属性值对应字符串的第 1 个、第 n 个字符；但是像例子中这样使用const name = 'Lison’字面量的形式定义的 name，其实是个字符串类型的值，字符串就不会继承构造函数的方法了，以为它不是对象，但事实是它可以调用getFirstLetter方法。这是因为它在调用方法的时候，会先将这个字符串包装成一个封装对象，在内部即使用 String 构造函数，所以它依然可以调用原型对象上的方法。我们在 html 文件里引入这个 js 文件后创建一个字符串，这个字符串就可以调用 getFirstLetter 方法： <script type="text/javascript" src="./add-methods-to-string.js"></script> <script type="text/javascript"> var str = "Lison"; console.log(str.getFirstLetter()); // "L" </script> 如果我们在 TS 中使用，就需要为这个创建声明文件，我们创建一个声明文件 global-plugin.d.ts：...

34 搭建基础项目

这一章是实战章节，我们将会使用 Vue+TypeScript 来开发一个简单管理后台，这个实战项目的目的是演示如何在Vue 项目中使用 TypeScript 进行开发，而不是为了实现一个管理后台。所以我们在开发的时候，以尽可能多的展示如何使用 TypeScript 结合 Vue 全家桶进行开发为前提，进行这个实战项目的开发，对于涉及到相同知识点的功能性代码，我们会尽可能不去重复讲解。 6.1.1 安装Vue CLI 本小节我们先来进行第一步，就是创建我们的初始项目，首先你需要在全局安装 Vue 命令行工具 Vue CLI，首先你要确定你安装了 NodeJS，如何安装我们已经在1.3小节讲过了，我们直接看如何安装 Vue CLI： sudo npm install -g @vue/cli Windows系统直接运行npm install -g @vue/cli命令即可。因为是在全局安装，所以你可能需要以管理员身份去运行，Mac中就是前面加sudo然后输入密码。安装之后你可以通过检查他的版本号来确定是否成功安装： vue -V 或者 vue --version 注意这里是使用vue命令，而不是@vue/cli，如果使用-V参数一定记着是大写的V，我这里安装的是3.3.0版本的，如果你发现你创建的项目和我创建的项目包含的文件或者配置信息有差异，有可能是版本差异造成的，你也可可以直接安装与我相同的版本。 6.1.2 使用Vue CLI创建项目安装好Vue CLI后，在终端启动Vue的可视化项目管理页面，运行如下命令： vue ui 几秒钟之后就会自动打开浏览器在浏览器中打开一个本地页面，然后打开创建项目界面：选择要存放新项目的文件夹后，点击底部的“在此创建新项目”，然后进入配置流程，一共四个流程：“详情” - “预设” - “功能” - “配置”，我们来逐个配置。 (1) 详情填写项目名，这里我们写的是"vue-ts-project"，然后选择包管理器，我这里选的是npm，如果你建了git仓库，你可以在git栏填写git的仓库地址。配置完成后点击“下一步”。 (2) 预设每次创建一次项目，你的功能配置都可以保存为预设，方便下次直接使用，这里我们先选择手动，来手动配置项目。然后点击“下一步”。 (3) 功能这里我们勾选这几项： Babel：使用Babel可以将新特性语法转为低版本浏览器支持的语法； TypeScript：这个肯定要勾选了，因为我们要使用TypeScript开发； Router：我们要开发单页面SPA应用，所以页面间的跳转需要使用前端路由； Vuex：多个页面直接或者组件之间的通信可以使用Vuex来做状态管理； CSS Pre-processors：CSS预处理器，如果你使用Less或者Sass等CSS预处理器编写CSS样式，则勾选这项； Linter/Formatter：代码规范或格式检查器，如果你需要使用TSLint对代码规范或格式进行检验，勾选这项；使用配置文件：如果需要将一些插件的配置保存在各自的配置文件中，则需要勾选这项。配置完成后点击“下一步”。...

35 封装接口请求

我们在开发中广泛使用的axios调用接口，为了更好地调用，做一些全局的拦截，我们通常会对其进行一下封装，本小节我们就来看下如何使用TypeScript对它进行封装，使其同时能够有很好的类型支持。首先我们需要安装axios，如何安装依赖我们在1.3小节学习过了，这里直接安装： npm install axios 我们在src文件夹下创建utils文件夹，然后在utils文件夹创建*axios.ts文件，axios这个插件自带声明文件，所以我们不需要另外安装了。先来看下最基础的封装： import axios, { AxiosInstance, AxiosRequestConfig, AxiosPromise,AxiosResponse } from 'axios'; // 引入axios和定义在node_modules/axios/index.ts文件里的类型声明 class HttpRequest { // 定义一个接口请求类，用于创建一个axios请求实例 constructor(public baseUrl: string) { // 这个类接收一个字符串参数，是接口请求的基本路径 this.baseUrl = baseUrl; } public request(options: AxiosRequestConfig): AxiosPromise { // 我们实际调用接口的时候调用实例的这个方法，他返回一个AxiosPromise const instance: AxiosInstance = axios.create() // 这里使用axios.create方法创建一个axios实例，他是一个函数，同时这个函数包含多个属性，就像我们前面讲的计数器的例子 options = this.mergeConfig(options) // 合并基础路径和每个接口单独传入的配置，比如url、参数等 this.interceptors(instance, options.url) // 调用interceptors方法使拦截器生效 return instance(options) // 最后返回AxiosPromise } private interceptors(instance: AxiosInstance, url?: string) { // 定义这个函数用于添加全局请求和响应拦截逻辑 // 在这里添加请求和响应拦截 } private mergeConfig(options: AxiosRequestConfig): AxiosRequestConfig { // 这个方法用于合并基础路径配置和接口单独配置 return Object....

36 实现登录页并用Mock响应请求

本小节我们来开发一个登录页，调用api请求，然后使用mockjs模拟请求响应，来返回登录成功与否的状态。登录成功之后，我们会跳到后台系统首页。如果没有登录，无论访问后台系统哪个页面的url，都会跳到登录页。接下来我们开始学习。首先添加一个登录页，在src/views文件夹下创建一个login文件夹，所有和login页相关的文件都放到这个文件夹内，然后在这个文件夹创建一个index.tsx文件。因为项目默认添加的两个页面About.vue和Home.vue都是使用Vue单文件.vue后缀的形式，所以我们添加一个以.tsx为后缀的文件，来学习如何使用tsx写法写vue。 // src/views/login/index.tsx import { Component, Vue } from 'vue-property-decorator' @Component export default class LoginPage extends Vue { protected render() { return ( <div>login</div> ) } } 我们这里用到一个新的依赖"vue-property-decorator"，你需要先安装它，然后在这里引入，我们这里暂时只用到Component和Vue，Component是一个装饰器工厂函数，可以用来修饰我们要作为组件实例的类的定义。它可以传入一个对象参数，用来配置组件的一些信息，也可以不传参数，我们待会儿会补充一些参数，现在我们先使用默认参数。使用Component装饰器修饰之后，这个类LoginPage的定义再继承Vue，它的定义就包含了一些组件需要的属性等，然后我们这里就可以定义一个render方法，用来书写渲染的dom内容。这个方法名是固定的，Vue会拿到这个方法返回的内容去渲染实际的DOM。注意它的写法，return返回的内容用括号包住，然后里面就像写html一样写html标签，还可以写组件，当然JSX语法内容不是简答几句话可以概括完的，我们一点一点来看。这里我们就只渲染一个div标签，然后里面包含字符串"login"。这里还有一点要特别注意，一个组件最外层只能由一个节点包裹，也就是这里你要将所有内容都包在这个<div>标签里，不能有和这个<div>标签同级的第二个标签了。接下来这个组件就可以用了，我们定义一下路由，使得我们可以把这个组件作为一个页面访问。在src/router/routes.ts文件的路由配置里，增加一个： // ... export default [ // ... { path: '/login', name: 'login', component: () => import('@/views/login/index'), }, ] 现在你可以在浏览器里访问login页面啦，默认情况下本地起的服务路径为http://localhost:8080/#/login，如果你起了别的服务，可能端口号8080会是别的，你可以直接在控制台查看服务的url。打开这个url之后，你会看到页面上有login这个词，说明你前面的这些步骤没有疏漏，如果出现问题，需要你仔细对照一下上面讲解的步骤啦。接下来我们要添加两个输入框，一个用来输入用户名，一个用来输入密码。再添加一个按钮，用来请求登录api，我们对前面render方法做一些补充： // src/views/login/index.tsx // ... @Component export default class LoginPage extends Vue { public user_name: string = '' public password: string|number = '' protected render() { return ( <div class='login-page'> <input v-model={ this....

37 搭建后台界面布局和结合Vuex实现完整登录流程

本小节我们来搭建一个后台基本框架，所有的页面除了登录页，都在这个框架里展示，左侧显示菜单，右侧显示页面，我们先看下要实现的效果：接下来我们继续上个小节的节奏进行。在开始之前我们需要安装一个UI组件库，Ant Design Vue，它是React版本的Ant Design组件库的Vue版本，因为Ant Design是使用TypeScript编写的，类型声明文件较为完善，而Ant Design Vue延用这些声明文件，所以可以更好地在TypeScript环境下使用。首先来安装它：npm install ant-design-vue。接下来我们在入口文件引入组件库及其样式，并且全局注册它： // src/main.ts // ... import AntVue from 'ant-design-vue' import 'ant-design-vue/dist/antd.css'; Vue.use(AntVue) // ... 顺便修改一下src/App.vue的样式，我们在App.vue文件的样式里，增加如下样式，使页面具有高度： html,body{ height: 100%; margin: 0; padding: 0; } #app{ height: 100%; .home{ text-align: center; } } 接下来我们在src/components文件夹下创建一个TMain文件夹，之所以叫这个，是因为根据Vue开发规范强烈建议组件名使用大写字母开头，然后使用驼峰形式命名，而且不要使用单个单词，应该统一加个前缀，所以我们这个框架组件叫做TMain，然后在TMain文件夹下创建一个index.vue文件。我们来使用单文件的形式编写组件。我们先只添加基本的代码： <template> <div class="t-main-wrap">  <a-layout style="height: 100%">  <a-layout-sider></a-layout-sider> <a-layout>  <a-layout-header style="background: #fff"></a-layout-header>  <a-layout-content>  <router-view></router-view> </a-layout-content> </a-layout> </a-layout> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component({ name: 'TMain' }) export default class TMain extends Vue {} </script> <style lang="less"> ....

38 使用TypeScript开发Vue组件和使用Vue组件

本小节我们将学习使用Vue+TypeScript进行组件的开发和使用。我们在本章前面的小节中，虽然讲了很多内容，但是还没有封装一个可以复用的组件，没有涉及到属性和自定义事件。本小节我们将通过封装一个CountTo组件，展示如何封装一个组件。首先我们先将创建项目时初始添加的src/views/Home.vue文件改为如下简单结构，把没用的先删掉： <template> <div class="home"> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component({ name: 'HomePage' }) export default class Home extends Vue {} </script> 然后我们来封装CountTo组件，这里需要安装一个第三方插件：npm install countup，这个插件可以实现一个数字的动画过渡效果，它虽然有声明文件，但是有问题，所以我们自己写一份声明文件，使用我们自己定义的声明文件。首先在根目录下创建一个types文件夹，然后在types文件夹下创建一个countup文件夹，也就是和我们要引入的模块同名的文件夹，然后在这个文件夹下创建一个index.d.ts声明文件。创建好之后，我们要用这个声明文件覆盖node_modules/countup里的声明文件，注意，不是去修改node_modules/countup/index.d.ts文件的内容，而是通过配置tsconfig.json里的paths字段来指定countup模块的声明文件位置，配置如下： { "comilerOptions": { "paths": { "countup": [ "./types/countup/index.d.ts" ], } } } 这样，当我们使用import去引入countup插件的时候，编译器就会去我们这里指定的路径加载声明文件。接下来我们修改下声明文件，内容如下： // types/countup/index.d.ts declare function CountUp(target: string, startVal: number, endVal: number, decimals: number, duration: number, options: any): void; declare module CountUp { var options: CountUpOptions; function version(): string; function printValue(value: any): void; function count(timestamp: any): void; function start(callback: Function): boolean; function pauseResume(): void; function reset(): void; function update(newEndVal: number): void; } interface CountUp { new(target: string, startVal: number, endVal: number, decimals: number, duration: number, options: any): CountUp; options: CountUpOptions; version(): string; printValue(value: any): void; count(timestamp: any): void; start(callback?...

39 结束语

TypeScript 的基础知识，以及使用 TypeScript 开发 Vue 应用的实战内容，我们到这里就已经学习完了。相信你对 TypeScript 已经有了一个系统、全面的了解了。最后，Lison 最后再跟你絮叨几句。 7.1.1 使用TypeScript心得如果你过去使用 React 开发 web 应用，在不使用 TypeScript 的情况下，编辑器对代码的提示并不是很好，但是如果使用 TypeScript，因为在编写代码阶段，数据的结构都是很明确的，所以编辑器会进行很友好的代码提示。这样我们在使用一些自己封装的方法，或者第三方对 TypeScript 支持良好的一些插件的时候，能减少很多去翻文档翻 api 介绍的时间。使用 TypeScript 使得代码的可读性大大，比如对于一些数值类型的常量，我们可以使用枚举值定义，这样就可以只用枚举成员代替数值字面量，提高可读性。对于函数的定义，在定义函数的时候定义完整的函数类型，包括参数类型和返回值类型等，在调用的时候，通过编辑器的代码提示，就可以看到需要几个参数，每个参数有什么要求；对函数的返回值进行操作的时候，能够知道操作的是什么类型值，可以做哪些操作。如果你使用 Vue 开发 web 应用，也是可以使用 TypeScript 的，只不过，vue 是通过补充声明文件的方式，弥补了类型声明，但是并不是很完善，所以我们只能期待 Vue3.0 的到来了。但是如果使用TypeScript 开发 Vue 应用，要获得更好的类型支持，要在 script 里，通过类形式定义组件，这样编译器可以尽可能地推断一些类型。虽然 Vue2.x 对 TypeScript 的支持并不很好，但是如果你使用VSCode 进行开发，即使是不使用 TypeScript，也能得到一些代码提示。如果你对 TypeScript 掌握的差不多了，想练手的话，可以自己先创建一个小项目来练练手。如果是实际项目开发，小型的个人完成的项目并不推荐使用 TypeScript，因为项目不复杂，内容不是很多的情况下，使用 TypeScript 会增加你的工作量，但带来的收益又不是很大。但如果是大型的多人协作的项目，或者是需要多处复用的开源或内部使用的插件库，极力推荐使用 TypeScript 进行开发，因为他可以帮助你提高代码质量，方便使用者快速上手，减少翻阅文档的次数，再配合单元测试，可以说这套代码就非常可靠了。 7.1.2 TypeScript前景过去，在 ES6 标准颁布之前，社区有众多语法糖工具，比如当初的 CoffeeScript，可以说还是受到很多人追捧的。但是 ES6 标准公布之后，随着 Babel 等工具对 ES6 标准的支持，再加上 ES6 前卫的语法标准，大家不再需要 CoffeeScript，使用 Babel 即可将 ES6 代码转义为兼容新旧浏览器的代码。...