吉帅振博客

在 TypeScript 中提供了许多自带的工具类型，因为这些类型都是全局可用的，所以无须导入即可直接使用。了解了基础的工具类型后，我们不仅知道 TypeScript 如何利用前几讲介绍的基础类型知识实现这些工具类型，还知道如何更好地利用这些基础类型，以免重复造轮子，并能通过这些工具类型实现更复杂的类型。学习操作接口类型、联合类型、函数、字符串的工具类。掌握类型操作的技巧，自由地组合更多的工具类型。

在 TypeScript 中预留了一个增强类型的口子，使得我们可以方便地扩展原来的类型系统，以兼容 JavaScript 的代码。增强类型系统，顾名思义就是对 TypeScript 类型系统的增强。在 npm 中，有很多历史悠久的库都是使用 JavaScript 编写的，而 TypeScript 作为 JavaScript 的超集，设计目标之一就是能在 TypeScript 中安全、方便地使用 JavaScript 库。

TypeScript 中类型的兼容性都是基于结构化子类型的一般原则进行判定的。类型兼容性决定了赋值操作是否可以通过类型检测。

JavaScript 作为一种动态语言，意味着其中的参数、值可以是多态（多种类型）。因此，我们需要区别对待每一种状态，以此确保对参数、值的操作合法。举一个常见的场景为例，如下我们定义了一个可以接收字符串或者字符串数组的参数 toUpperCase，并将参数转成大写格式输出的函数 convertToUpperCase。{}}}...

关于什么是泛型这个问题不是太好回答，比如在面试中，如果有候选人反过来问我这个问题，可能我也给不出一个特别标准的答案。不过，我们可以借用 Java 中泛型的释义来回答这个问题：泛型指的是类型参数化，即将原来某种具体的类型进行参数化。和定义函数参数一样，我们可以给泛型定义若干个类型参数，并在调用时给泛型传入明确的类型参数。设计泛型的目的在于有效约束类型成员之间的关系，比如函数参数和返回值、类或者接口成员和方法之间的关系。这一讲关于泛型的知识点看起来不是太多，不过难点在于如何理解泛型。...

在 JavaScript 原生语言中并没有与枚举匹配的概念，而 TypeScript 中实现了枚举类型（Enums），这就意味着枚举也是 TypeScript 特有的语法（相对于 JavaScript）。在 TypeScript 中，我们可以使用枚举定义包含被命名的常量的集合，比如 TypeScript 支持数字、字符两种常量值的枚举类型。我们也可以使用 enum 关键字定义枚举类型，格式是 enum + 枚举名字 + 一对花括弧，花括弧里则是被命名了的常量成员。...

我们介绍了基础类型、字面量类型、函数类型及接口类型等内容，它们都是单一、原子的类型元素。实际编程场景的示例所示，我们还需要通过组合/结合单一、原子类型构造更复杂的类型，以此描述更复杂的数据和结构——联合和交叉类型（Unions and Intersection Types）。联合和交叉类型赋予了 TypeScript 类型最基本的“编程”（运算）能力，学习和掌握联合和交叉类型后，可以培养我们抽离、复用公共类型的意识和能力。...

TypeScript 不仅能帮助前端改变思维方式，还能强化面向接口编程的思维和能力，而这正是得益于 Interface 接口类型。通过接口类型，我们可以清晰地定义模块内、跨模块、跨项目代码的通信规则。TypeScript 对对象的类型检测遵循一种被称之为“鸭子类型”（duck typing）或者“结构化类型（structural subtyping）”的准则，即只要两个对象的结构一致，属性和方法的类型一致，则它们的类型就是一致的。...

在JavaScript（ES5）中仅支持通过函数和原型链继承模拟类的实现（用于抽象业务模型、组织数据结构并创建可重用组件），自 ES6 引入 class 关键字后，它才开始支持使用与Java类似的语法定义声明类。TypeScript 作为 JavaScript 的超集，自然也支持 class 的全部特性，并且还可以对类的属性、方法等进行静态类型检测。在 TypeScript 中，因为我们需要实践 OOP 编程思想，所以离不开类的支撑。在实际工作中，类与函数一样，都是极其有用的抽象、封装利器。...

在 JavaScript 中，函数是构建应用的一块基石，我们可以使用函数抽离可复用的逻辑、抽象模型、封装过程。在 TypeScript 中，虽然有类、命名空间、模块，但是函数同样是最基本、最重要的元素之一。我们还可以显式指定函数参数和返回值的类型，示例如下。}函数是 JavaScript 和 TypeScript 中极其重要的基础部分，无论是面向过程，还是面向对象编程，都离不开函数的抽象、封装。...

}{}在示例中，使用 let 定义变量时，我们写明类型注解也就罢了，毕竟值可能会被改变。可是，使用 const 常量时还需要写明类型注解，那可真的很麻烦。实际上，TypeScript 早就考虑到了这么简单而明显的问题。在很多情况下，TypeScript 会根据上下文环境自动推断出变量的类型，无须我们再写明类型注解。{// 等价// 等价// 等价}{// 不等价// 不等价// 不等价}...

TypeScript 其实就是类型化的 JavaScript，它不仅支持 JavaScript 的所有特性，还在 JavaScript 的基础上添加了静态类型注解扩展。从某种意义上来说，TypeScript 其实就是 JavaScript 的超集。在 TypeScript 中，我们不仅可以轻易复用 JavaScript 的代码、最新特性，还能使用可选的静态类型进行检查报错，使得编写的代码更健壮、更易于维护。......

TypeScript 与 JavaScript 本质并无区别，你可以将 TypeScipt 理解为是一个添加了类型注解的 JavaScript，比如 const num = 1，它同时符合 TypeScript 和 JavaScript 的语法。此外，TypeScript 是一门中间语言，最终它还需要转译为纯 JavaScript，再交给各种终端解释、执行。...

相信对有一定基础的前端开发工程师来说，路由并不陌生，它最初源于服务端，在服务端中路由描述的是URL与处理函数之间的映射关系。而在Web前端单页应用SPA中，路由描述的是URL与视图之间的映射关系，这种映射是单向的，即URL变化会引起视图的更新。相比于后端路由，前端路由的好处是无须刷新页面，减轻了服务器的压力，提升了用户体验。目前主流支持单页应用的前端框架，基本都有配套的或第三方的路由系统。......

作为一名前端开发工程师，平时开发页面少不了要写一些过渡动画，通常可以用CSS脚本来实现，当然一些时候也会使用JavaScript操作DOM来实现动画。那么，如果我们使用Vue.js技术栈，有没有好的实现动画的方式呢？Vue.js提供了内置的Transition组件，它可以让我们轻松实现动画过渡效果。Transition组件是如何渲染的，如何执行过渡动画和相应的钩子函数的，以及当两个视图切换时，模式的工作原理是怎样的。...

当flag为true的时候，就会触发组件A的渲染，然后我们点击按钮把flag修改为false，又会触发组件A的卸载，及组件B的渲染。?0})1}),onClick_ctx.flag)}我们使用了KeepAlive组件对这两个组件做了一层封装，KeepAlive是一个抽象组件，它并不会渲染成一个真实的DOM，只会渲染内部包裹的子节点，并且让内部的子组件在切换的时候，不会走一整套递归卸载和挂载DOM的流程，从而优化了性能。nametrue,true,?}...

Vue.js的核心思想之一是组件化，组件就是DOM的映射，我们通过嵌套的组件构成了一个组件应用程序的树。但是，有些时候组件模板的一部分在逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到应用程序之外的其他位置。一个常见的场景是创建一个包含全屏模式的对话框组件。在大多数情况下，我们希望对话框的逻辑存在于组件中，但是对话框的定位CSS是一个很大的问题，它非常容易受到外层父组件的CSS影响。data(){...

很多人会把Vue.js的响应式原理误解为双向绑定，其实响应式原理是一种单向行为，它是数据到DOM的映射。而真正的双向绑定，除了数据变化，会引起DOM的变化之外，还应该在操作DOM改变后，反过来影响数据的变化。v-model也不是可以作用到任意标签，它只能在一些特定的表单标签如input、select、textarea和自定义组件中使用。"onUpdate])}''value'change'return}}})})}if(!lazy){}},return。...

Vue.js的核心思想之一是数据驱动，数据是DOM的映射。在大部分情况下，不用操作DOM的，但是这并不意味着你不能操作DOM。有些时候，我们希望手动去操作某个元素节点的DOM，比如当这个元素节点挂载到页面的时候通过操作底层的DOM来做一些事情。为了支持这个需求，Vue.js提供了指令的功能，它允许我们自定义指令，作用在普通的DOM元素上。//注册全局v-focus指令//挂载的钩子函数}})//当然，我们也可以在组件内部局部注册directives{focus。...

有些时候我们希望子组件模板中的部分内容可以定制化，这个时候使用Props就显得不够灵活和易用了。因此，Vue.js受到WebComponent草案的启发，通过插槽的方式实现内容分发，它允许我们在父组件中编写DOM并在子组件渲染时把DOM添加到子组件的插槽中，使用起来非常方便。了解插槽的实现原理，知道父组件和子组件在实现插槽feature的时候各自做了哪些事情。...