>[success] # 高级类型
>[danger] ##### 交叉类型
~~~
1.交叉类型：我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性,取多个类型的并集
简单的说' 交叉类型是将多个类型合并为一个类型',用'&' 来表示
2.下面的案例是将两个对象合并，并且返回合并后的对象
~~~
~~~
const mergFunc = <T,U>(arg1:T,age2:U):U&T=>{
let res = {} as U&T
res = Object.assign(arg1,age2)
return res
}
mergFunc({a:1},{b:2})
~~~
>[danger] ##### 联合类型
~~~
1.联合类型表示一个值可以是几种类型之一，用'|' 来表示
~~~
~~~
const getLenFunc = (content:number|string)=>{
if (typeof content === 'string'){ return content.length}
else {return content.toString().length}
}
// getLenFunc(true) // 报错 只能是string 或者是number类型中的一个
~~~
* 接口用联合类型
~~~
1.如果一个值是联合类型，我们只能访问此联合类型的所有类型里共有的成员
简单的说'使用一个联合类型的参数只能使用共有成员'，下面案例中c虽然有age属性，但是会报错
只能使用他们的共有成员name
~~~
~~~
interface a {
name:string,
age:number
}
interface b {
name:string,
sex:string
}
// const c:(a|b) = {
// age:13,
// sex:'nan'
// } // 报错
const c:(a|b) = {
name:'fff',
age:12,
sex:'w'
}
// c.age// 报错
c.name
~~~
>[danger] ##### 类型守卫
~~~
1.第一种使用方法封装 ，方法返回值的格式 是 '值' is '类型'
2.第二中是直接使用type of ，但只能针对"number"，"string"，"boolean"或"symbol"，
这里的针对要解释一下，首先type of 是js 的，所以 写type of === ‘object’是可以的
，但是不会自带自动后往后的判断，下面案例为例'判断了string'类型else 自动判断就是
number 类型，如果是判读是非这四种类型，else 还需要要自己处理
3.如果是类用instance of 作为类型保护
~~~
* 什么场景实用
~~~
const getRandomValue = (list:(string|number)[])=>{
const randomNumber = Math.random() * 10
if (randomNumber>5) return list[0]
else return list[1]
}
const item = getRandomValue([1,'w'])
// 直接这些写会报错
// 首先第一个问题是返回值的类型不确定是字符还是数字
// 数字是没有length 属性的所以这么写的判断ts 会报错的
// if(item.length){
// console.log(item.length)
// }else{
// console.log(item.toFixed())
// }
// 解决第一种使用类型断言
// 缺点 每一个item 都要使用对应的类型断言
if ((item as string).length ){
console.log((item as string).length)
}else{
console.log((item as number).toFixed())
}
~~~
* 封装方法--用户自定义的类型守卫
（复杂情况用这种）
~~~
const getRandomValue = (list:(string|number)[])=>{
const randomNumber = Math.random() * 10
if (randomNumber>5) return list[0]
else return list[1]
}
const item = getRandomValue([1,'w'])
// 类型保护
// 注意 这里的is 可以是任意类型，可以是自己定义的接口类型
// 这里是因为需求是string 类型，并且返回相当于必须是一个boolean类型
function isString (value:number|string):value is string{
return typeof value === 'string'
}
if (isString(item)) {
console.log(item.length)
} else {
console.log(item.toFixed())
}
~~~
* typeof类型守卫（简单情况用这种）
~~~
const getRandomValue = (list:(string|number)[])=>{
const randomNumber = Math.random() * 10
if (randomNumber>5) return list[0]
else return list[1]
}
const item = getRandomValue([1,'w'])
// 简单的逻辑直接typeof 即可
// 比较的类型只能是"number"，"string"，"boolean"或"symbol"
if (typeof item === 'string') {
console.log(item.length)
} else {
console.log(item.toFixed())
}
~~~
* instanceof 类型保护
~~~
interface Padder {
getPaddingString(): string
}
class SpaceRepeatingPadder implements Padder {
constructor(private numSpaces: number) { }
getPaddingString() {
return Array(this.numSpaces + 1).join(" ");
}
}
class StringPadder implements Padder {
constructor(private value: string) { }
getPaddingString() {
return this.value;
}
}
function getRandomPadder() {
return Math.random() < 0.5 ?
new SpaceRepeatingPadder(4) :
new StringPadder(" ");
}
// 类型为SpaceRepeatingPadder | StringPadder
let padder: Padder = getRandomPadder();
if (padder instanceof SpaceRepeatingPadder) {
padder; // 类型细化为'SpaceRepeatingPadder'
}
if (padder instanceof StringPadder) {
padder; // 类型细化为'StringPadder'
}
~~~
>[danger] ##### null 和undefined
~~~
1.在tsconfig.json 设置 'strictNullChecks':当你声明一个变量时，它不会自动地包含null或undefined。
~~~
* 如果设置是true
~~~
let s = "foo";
s = null; // 错误, 'null'不能赋值给'string'
sn = undefined; // 错误,
~~~
* 如果设置false
~~~
let s = "foo";
s = null; //可以
sn = undefined; // 可以
~~~
* 如果设置了false 在可选参数的时候 是只能自动添加一个undefined
~~~
function f(x: number, y?: number) {
return x + (y || 0);
}
f(1, 2);
f(1);
f(1, undefined);
f(1, null); // error, 'null' is not assignable to 'number | undefined'
~~~
>[danger] ##### 类型断言
~~~
1.如果编译器不能够去除null或undefined，你可以使用类型断言手动去除。 语法是添加!后缀：
~~~
~~~
function broken(name: string | null): string {
function postfix(epithet: string) {
// return name.charAt(0) + '. the ' + epithet; // 报错 有可能是null
return name!.charAt(0) + '. the ' + epithet; // 排除是null
}
name = name || "Bob";
return postfix("great");
}
~~~
>[danger] ##### 类型别名 -- type
~~~
1.'类型别名':给 这个类型起一个新的名字,简单的理解 和js 一样是给重复使用的变量起一个统一的名字调用,只不过ts规定的是类型
2.可以是原始值，联合类型，元组以及其它任何你需要手写的类型
~~~
~~~
type Name = string
type NameResolver = ()=>string
// 联合类型
type NameOrResolver = Name | NameResolver
function getName(n: NameOrResolver): Name {
// 类型保护 所以else 会自动知道另外一个类型
if (typeof n === 'string') {
return n;
}
else {
return n();
}
}
let names:Name = 'w' // 相当于这个name 是string 类型
~~~
* 类型别名可以向接口一样使用泛型
~~~
// 也可以像接口一样使用泛型
type c<T> = {name:T,age:T}
~~~
* 利用类型别名生成树型结构
~~~
1.这里要注意，child 字段必须是可选类型，否则就会让你一直写下去，而且这种自己用自己
只能出现在对象字段中，不能像下面这样的写法'type Yikes = Yikes[]; // error'
~~~
~~~
// 创建属性结构的时候可以自己引用自己
type Childs<T>= {
current:T,
child?:Childs<T> // 可选参数
}
let tree:Childs<string> = {
current:'first',
child:{
current:'second',
child:{
current:'third'
}
}
}
~~~
* 交叉类型使用
~~~
type LinkedList<T> = T & { next: LinkedList<T> };
interface Person {
name: string;
}
var people: LinkedList<Person>;
var s = people.name;
var s = people.next.name;
var s = people.next.next.name;
var s = people.next.next.next.name;
~~~
>[danger] ##### 类型别名和接口的区别
~~~
1.'类型别名'不能被extends和implements（自己也不能extends和implements其它类型）
2.如果你无法通过接口来描述一个类型并且需要使用联合类型或元组类型，这时通常会使用类型别名。
~~~
>[danger] ##### 字符串字面量 和 数字类型
~~~
1.指定具体字符串或数字
~~~
~~~
type Type= 'w'|1|'s'
// let type:Type = 6 //报错 只能是 w 1 或者 s
~~~
>[danger] ##### 可辨识联合
~~~
interface Square {
kind: "square";
size: number;
}
interface Rectangle {
kind: "rectangle";
width: number;
height: number;
}
interface Circle {
kind: "circle";
radius: number;
}
type Shape = Square | Rectangle | Circle;
// 可辨识联合
function area(s: Shape) {
switch (s.kind) {
case "square": return s.size * s.size;
case "rectangle": return s.height * s.width;
case "circle": return Math.PI * s.radius ** 2;
}
}
~~~
>[danger] ##### 完整类型检查
~~~
1.这是时候其实我们代码是有问题的如果传入的是'Triangle' 类型整个代码就会出现问题
~~~
~~~
type Shape = Square | Rectangle | Circle | Triangle;
function area(s: Shape) {
switch (s.kind) {
case "square": return s.size * s.size;
case "rectangle": return s.height * s.width;
case "circle": return Math.PI * s.radius ** 2;
}
// should error here - we didn't handle case "triangle"
}
~~~
* 解决这种帮助自动检出有未用类型错误
~~~
1.启用tsconfig--strictNullChecks并且指定一个返回值类型
~~~
~~~
function area(s: Shape): number { // error: returns number | undefined
switch (s.kind) {
case "square": return s.size * s.size;
case "rectangle": return s.height * s.width;
case "circle": return Math.PI * s.radius ** 2;
}
}
~~~
~~~
2.使用never类型，编译器用它来进行完整性检查
~~~
~~~
function assertNever(x: never): never {
throw new Error("Unexpected object: " + x);
}
function area(s: Shape) {
switch (s.kind) {
case "square": return s.size * s.size;
case "rectangle": return s.height * s.width;
case "circle": return Math.PI * s.radius ** 2;
default: return assertNever(s); // error here if there are missing cases
}
}
~~~
- Vue--基础篇章
- Vue -- 介绍
- Vue -- MVVM
- Vue -- 创建Vue实例
- Vue -- 模板语法
- Vue -- 指令用法
- v-cloak -- 遮盖
- v-bind -- 标签属性动态绑定
- v-on -- 绑定事件
- v-model -- 双向数据绑定
- v-for -- 只是循环没那么简单
- 小知识点 -- 计划内属性
- key -- 属性为什么要加
- 案例说明
- v-if/v-show -- 显示隐藏
- v-for 和 v-if 同时使用
- v-pre -- 不渲染大大胡语法
- v-once -- 只渲染一次
- Vue -- class和style绑定
- Vue -- filter 过滤器
- Vue--watch/computed/fun
- watch -- 巧妙利用watch思想
- Vue -- 自定义指令
- Vue -- $方法
- Vue--生命周期
- Vue -- 专属ajax
- Vue -- transition过渡动画
- 前面章节的案例
- 案例 -- 跑马灯效果
- 案例 -- 选项卡内容切换
- 案例-- 筛选商品
- 案例 -- 搜索/删除/更改
- 案例 -- 用computed做多选
- 案例 -- checked 多选
- Vue--组件篇章
- component -- 介绍
- component -- 使用全局组件
- component -- 使用局部组件
- component -- 组件深入
- component -- 组件传值父传子
- component -- 组件传值子传父
- component -- 子传父语法糖拆解
- component -- 父组件操作子组件
- component -- is 动态切换组件
- component -- 用v-if/v-show控制子组件
- component -- 组件切换的动画效果
- component -- slot 插槽
- component -- 插槽2.6
- component -- 组件的生命周期
- component -- 基础组件全局注册
- VueRouter--获取路由参数
- VueRouter -- 介绍路由
- VueRouter -- 安装
- VueRouter -- 使用
- VueRouter--router-link简单参数
- VueRouter--router-link样式问题
- VueRouter--router-view动画效果
- VueRouter -- 匹配优先级
- vueRouter -- 动态路由
- VueRouter -- 命名路由
- VueRouter -- 命名视图
- VueRouter--$router 获取函数
- VueRouter--$route获取参数
- VueRouter--路由嵌套
- VueRouter -- 导航守卫
- VueRouter -- 写在最后
- Vue--模块化方式结构
- webpack--自定义配置
- webpack -- 自定义Vue操作
- VueCli -- 3.0可视化配置
- VueCli -- 3.0 项目目录
- Vue -- 组件升级篇
- Vue -- 组件种类与组件组成
- Vue -- 组件prop、event、slot 技巧
- Vue -- 组件通信（一）
- Vue -- 组件通信（二）
- Vue -- 组件通信（三）
- Vue -- 组件通信（四）
- Vue -- 组件通信(五)
- Vue -- 组件通信(六)
- Vue -- bus非父子组件通信
- Vue -- 封装js插件成vue组件
- vue组件分装 -- 进阶篇
- Vue -- 组件封装splitpane(分割面板)
- UI -- 正式封装
- Vue -- iview 可编辑表格案例
- Ui -- iview 可以同时编辑多行
- Vue -- 了解递归组件
- UI -- 正式使用递归菜单
- Vue -- iview Tree组件
- Vue -- 利用通信仿写一个form验证
- Vue -- 使用自己的Form
- Vue -- Checkbox 组件
- Vue -- CheckboxGroup.vue
- Vue -- Alert 组件
- Vue -- 手动挂载组件
- Vue -- Alert开始封装
- Vue -- 动态表单组件
- Vue -- Vuex组件的状态管理
- Vuex -- 参数使用理解
- Vuex -- state扩展
- Vuex -- getters扩展
- Vuex--mutations扩展
- Vuex -- Action 异步
- Vuex -- plugins插件
- Vuex -- v-model写法
- Vuex -- 更多
- VueCli -- 技巧总结篇
- CLI -- 路由基础
- CLI -- 路由升级篇
- CLI --异步axios
- axios -- 封装axios
- CLI -- 登录写法
- CLI -- 权限
- CLI -- 简单权限
- CLI -- 动态路由加载
- CLI -- 数据性能优化
- ES6 -- 类的概念
- ES6类 -- 基础
- ES6 -- 继承
- ES6 -- 工作实战用类数据管理
- JS -- 适配器模式
- ES7 -- 装饰器（Decorator）
- 装饰器 -- 装饰器修饰类
- 装饰器--修饰类方法（知识扩展）
- 装饰器 -- 装饰器修饰类中的方法
- 装饰器 -- 执行顺序
- Reflect -- es6 自带版本
- Reflect -- reflect-metadata 版本
- 实战 -- 验证篇章（基础）
- 验证篇章 -- 搭建和目录
- 验证篇章 -- 创建基本模板
- 验证篇章 -- 使用
- 实战 -- 更新模型(为了迎合ui升级)
- 实战 -- 模型与接口对接
- TypeSprict -- 基础篇章
- TS-- 搭建（一）webpack版本
- TS -- 搭建（二）直接使用
- TS -- 基础类型
- TS -- 枚举类型
- TS -- Symbol
- TS -- interface 接口
- TS -- 函数
- TS -- 泛型
- TS -- 类
- TS -- 类型推论和兼容
- TS -- 高级类型(一)
- TS -- 高级类型(二)
- TS -- 关于模块解析
- TS -- 声明合并
- TS -- 混入
- Vue -- TS项目模拟
- TS -- vue和以前代码对比
- TS -- vue简单案例上手
- Vue -- 简单弄懂VueRouter过程
- VueRouter -- 实现简单Router
- Vue-- 原理2.x源码简单理解
- 了解 -- 简单的响应式工作原理
- 准备工作 -- 了解发布订阅和观察者模式
- 了解 -- 响应式工作原理（一）
- 了解 -- 响应式工作原理（二）
- 手写 -- 简单的vue数据响应(一)
- 手写 -- 简单的vue数据响应(二)
- 模板引擎可以做的
- 了解 -- 虚拟DOM
- 虚拟dom -- 使用Snabbdom
- 阅读 -- Snabbdom
- 分析snabbdom源码 -- h函数
- 分析snabbdom -- init 方法
- init 方法 -- patch方法分析（一）
- init 方法 -- patch方法分析（二）
- init方法 -- patch方法分析（三）
- 手写 -- 简单的虚拟dom渲染
- 函数表达解析 - h 和 create-element
- dom操作 -- patch.js
- Vue -- 完成一个minVue
- minVue -- 打包入口
- Vue -- new实例做了什么
- Vue -- $mount 模板编译阶段
- 模板编译 -- 分析入口
- 模板编译 -- 分析模板转译
- Vue -- mountComponent 挂载阶段
- 挂载阶段 -- vm._render()
- 挂载阶段 -- vnode
- 备份章节
- Vue -- Nuxt.js
- Vue3 -- 学习
- Vue3.x --基本功能快速预览
- Vue3.x -- createApp
- Vue3.x -- 生命周期
- Vue3.x -- 组件
- vue3.x -- 异步组件？？？
- vue3.x -- Teleport？？？
- vue3.x -- 动画章节 ？？
- vue3.x -- 自定义指令 ？？？
- 深入响应性原理 ？？？
- vue3.x -- Option API VS Composition API
- Vue3.x -- 使用set up
- Vue3.x -- 响应性API
- 其他 Api 使用
- 计算属性和监听属性
- 生命周期
- 小的案例（一）
- 小的案例（二）-- 泛型
- Vue2.x => Vue3.x 导读
- v-for 中的 Ref 数组 -- 非兼容
- 异步组件
- attribute 强制行为 -- 非兼容
- $attrs 包括 class & style -- 非兼容
- $children -- 移除
- 自定义指令 -- 非兼容
- 自定义元素交互 -- 非兼容
- Data选项 -- 非兼容
- emits Option -- 新增
- 事件 API -- 非兼容
- 过滤器 -- 移除
- 片段 -- 新增
- 函数式组件 -- 非兼容
- 全局 API -- 非兼容
- 全局 API Treeshaking -- 非兼容
- 内联模板 Attribute -- 非兼容
- key attribute -- 非兼容
- 按键修饰符 -- 非兼容
- 移除 $listeners 和 v-on.native -- 非兼容
- 在 prop 的默认函数中访问 this -- ??
- 组件使用 v-model -- 非兼容
- 渲染函数 API -- ??
- Slot 统一 ??
- 过渡的 class 名更改 ???
- Transition Group 根元素 -- ??
- v-if 与 v-for 的优先级对比 -- 非兼容
- v-bind 合并行为 非兼容
- 监听数组 -- 非兼容