【ts】typescript高阶:键值类型及type与interface区别
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
typescript高阶之键值类型及type与interface区别
- 前言
- 一、键值类型的语法
- 1、语法
- 2、错误例子
- 3、正确例子
- 二、type与interface的区别
- 1.相同点一
- 2.相同点二
- 4.不相同点一
- 三、类型别名与接口的一些使用场景总结
- 使用类型别名的场景
- 使用接口的场景
- 总结
前端必备工具推荐网站(免费图床、API和ChatAI等实用工具):
http://luckycola.com.cn/
前言
学习目标:
1、键值类型的语法
2、type与interface的区别
3、类型别名与接口的一些使用场景总结
一、键值类型的语法
1、语法
// 键值类型语法
{ [key: KeyType]: ValueType }
// 注意在键值语法中KeyType类型只能是string、number、symbol或则模板字面量 不能是纯字面量
2、错误例子
// 错误例子
interface Dictionary {[key: boolean]: string;// 错误 keyType不能是boolean
};// 模板字面量例子
interface ProChangeHandler {[key: `${string}Changed`]: () => void;// 正确
};
let handlers: ProChangeHandler = {idChanged: () => { },nameChanged: () => { },ageChange: () => { }, // 错误 不符合模板字面量规定的格式 少一个字符d
}// 使用字面量的错误例子
interface User1 {[key: 'id']: string; // 错误 keyType不允许是字面量类型
}interface User2 {[key: 'id' | 'age']: string; // 错误 keyType不允许是字面量类型
}// 解决以上问题可以如果Record这个工具类型
type User3 = Record<'id', string>; // 正确
type User4 = Record<'id' | 'age', string>; // 正确
3、正确例子
// keyType是string类型时中括号取值
interface NumberNams {[key: string]: string;
}
let names: NumberNams = {'1': 'name',2: 'age', // 正确 在对象中属性都会经过隐式转换变成 string
};
const name = names['1']; // 正确
const name2 = names[1]; // 正确 会经过隐式转换变成 stringtype N0 = keyof NumberNams; // 注意结果是 string | number,这说明由于隐式转换的作用在keyType中 string、number类型是兼容的
二、type与interface的区别
1.相同点一
代码如下(示例):
// 1.相同点一:类型别名和接口都可以用来描述对象或函数
// type
type Ponit = {x: number;y: string;
};
type SetPonit = (x: string) => void;
// interface
interface Ponit2 {x: number;y: string;
};
interface SetPoint2 {(x: number): number;
};let fn1: SetPonit = (x: string) => { };
let fn2: SetPoint2 = (x: number): number => { return 1 };
2.相同点二
代码如下(示例):
// 2.相同点二:类型别名和接口都支持拓展// type通过交叉运算拓展
type Animal = {name: string;
};
type Dog = Animal & { age: number };// {name: string;age: number};
// interfcae通过extends继承拓展(支持多继承)
interface Animal2 {name: string;
};
interface Cat extends Animal2 {color: string;
};// {name: sting;color: string;}// 同时type和interface也支持一起使用来进行拓展
type Perple = {name: string;
};interface Person {age: number;
}type P1 = Perple & Person;// {name; string;age: number};
interface P2 extends Perple {color: boolean;
};// {color: boolean; name: string}
4.不相同点一
// 不同点:同名接口会自动合并,而别名不会
// 基于这个特性常常在项目中用于拓展第三方模块的类型
// interface
interface User1 {name: string;
};
interface User1 {age: number;
}
// 所以最终的User1是{name: string;age: number};// type
type User2 = {name: string;
};
type User2 = {age: number;
}// 报错 别名定义重复
三、类型别名与接口的一些使用场景总结
使用类型别名的场景
- 定义基本类型的别名时,用type
- 定义元组类型时,用type
- 定义函数类型时,用type
- 定义联合类型时,用type
- 定义映射类型时,用type
使用接口的场景
- 利用接口自动合并特性时候,用interface
- 定义对象类型且无需type时,用interface
总结
【ts】typescript高阶:键值类型及type与interface区别相关推荐
- [ts]typescript高阶之typeof使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 typescript高阶:typeof使用 前言 一.typeof与对象结合使用 二.typeof与枚举结合使用 三.typeof与c ...
- 【ts】typeScript高阶:any和unknown
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 typeScript高阶之any和unknown 前言 一.any与unknown类型的区别 二.unknown类型与其他类型的联合类 ...
- Dynamo:亚马逊的高可用键值存储
目录 1. 简介 2. 背景 3. 相关工作 4. 系统结构 5. 实现 6. 经验和教训 7. 结论 Dynamo:亚马逊的高可用键值存储 摘要:大规模的可靠性是我们在 Amazon.com 面临的 ...
- 值类型与引用类型比较与区别
在.NET中或许我们不用担心内存管理以及垃圾回收器(Garbage Collection GC)的问题,但是我们还是应该了解这些东东以便在必要的时候优化我们程序的性能.而且,如果对内存管理如何工作有所 ...
- typescript (TS)进阶篇 --- 内置高阶泛型工具类型(Utility Type)
第一部分 前置内容 关键字 keyof 索引查询 对应任何类型T,keyof T的结果为该类型上所有公有属性key的联合: interface Eg1 {name: string,readonly a ...
- Dynamo-Amazon高可用键值存储 笔记
与Redis的区别 使用场景:Dynamo是永久可写的持久文件系统,Redis是内存数据库,主要做缓存用. 存储方式:Dynamo是磁盘存储,Redis是内存存储+磁盘持久化 系统规模:Dynamo是 ...
- Redis键命令(查找键、判断键值是否存在、查看键值类型、删除键值、设置过期时间、查看键值有效时间)
[键命令对于不同数据结构类型通用] 查找键,参数⽀持正则表达式 keys pattern 例2:查看名称中包含a的键 keys a* 判断键是否存在,如果存在返回1,不存在返回0 exists key ...
- java的map键值类型是否固定_Java中Map根据键值(key)或者值(value)进行排序实现
我们都知道,java中的Map结构是key->value键值对存储的,而且根据Map的特性,同一个Map中 不存在两个Key相同的元素,而value不存在这个限制.换句话说,在同一个Map中Ke ...
- TypeScript type 和 interface区别
在使用ts的type 和 interface时 两者作用(简单案例) interface只能定义对象数据结构类型. // 简单案例1 interface User {name: string;age: ...
最新文章
- 傻子的成长日记,编程路上	2016-04-07
- matlab pdist函数官方详解
- 全球顶级语音技术比赛中获双料冠军,这家中国公司靠什么?
- 与大家分享一下2010我的找工作历程!真累啊!不过都已经结束了!
- sql server 群集_SQL Server 2014 –安装群集实例–分步(1/3)
- VB6中SendKeys的基本应用
- python语言入门-Python语言入门详解!快速学成Python!
- arcmap 影像坐标批处理 python_ArcMap怎么把坐标系转换成投影坐标系?
- ERP财务管理模块包括什么
- docker官方文档翻译5
- 点云外包矩形框(六面体)
- jemeter做微信公众号压测
- 无法解析大于号和小于号
- 百度贴吧推广技巧:故事型营销思维
- Python爬虫下一代网络请求库httpx和parsel解析库测评
- DevFest14 珠海 Wear 主题大会总结
- java ppt课件 下载地址_Java大学实用教程ppt课件
- centos7制作U盘启动盘
- 心蓝android版本,心蓝12306订票助手2018
- 经典的自动修复工具GenProg配置过程