从C#到TypeScript - 高级类型
C# vs TypeScript - 高级类型
上一篇讲了基础类型,基本上用基础类型足够开发了,不过如果要更高效的开发,还是要看下高级类型,这篇和C#共同点并不多,只是延用这个主题。
联合类型
可以从字面上进行理解:其实就是多个类型联合在一起,用|
符号隔开。
如: string | number
, 表示希望这个类型既可以是string
,又可以是number
。
联合类型的字段只能调用这些类型共同拥有的方法,除非类型推论系统自动判断出真正的类型。
//这里sn就是一个联合类型的字段,由于类型推论推断出sn肯定是string,所以sn可以调用string的所有方法
let sn: string | number = 'string, number';
//这里就推断不出具体的类型,只能调用toString, toValue了
function snFunc(): string | number{
return 'string, number';
}
联合类型不光是可以联合基本类型,也可以是用户自定义的class, interace
等。
交叉类型
有|
就有&
,交叉类型就是用&
符号隔开,表示把多个类型合在一起,新类型包含所有类型的功能。
一些语言如Python有mixins
功能,用这个就很容易做到,主要是类似多重继承,不过个人不是用喜欢这个,明显违反了单一原则。
下面这段代码就显示了mixins
结合两个类的功能,看起来是不是有点不大合理,目前的趋势也是组合优先,用组合同样也可以做到这些。
class Person {
talk(): string {
return `一个人`;
}
}
class Dog {
bark(): string {
return '汪汪汪';
}
}
function extend<T, U>(first: T, second: U): T & U {
let result = <T & U>{};
for (let func of Object.getOwnPropertyNames(Object.getPrototypeOf(first))) {
(<any>result)[func] = (<any>first)[func];
}
for (let func of Object.getOwnPropertyNames(Object.getPrototypeOf(second))) {
(<any>result)[func] = (<any>second)[func];
}
return result;
}
let personDog = extend(new Person(), new Dog());
console.info(personDog.talk());
console.info(personDog.bark());
类型转换
C#里常用的类型转换一个是前面圆括号加类型,一个是as
。
TypeScript和C#一样,只不是圆括号改成尖括号。
let test: any = '123';
let str1: string = <string>test;
let str2: string = test as string;
类型保护
联合类型返回的是多个类型的其中一个,但是用的时候并不知道是哪个,需要一个一个判断,这显得很麻烦。
function get(): number | string{
return 'test';
}
let test = get();
var len = test.length; //编译不了,不知道test到底是number还是string
let str = '';
if((<string>test).sub){
// string
} else {
// number
}
除了通过是否有string特有的方法来判断是否是string,也可以用类似C#的typeof
来得到它的类型,而且重要的是会提供类型保护机制,
即在typeof
作用域里会知道这个变量的类型。
function get(): number | string{
return 'test';
}
let test = get();
if(typeof test === 'string'){
console.info(test.length); // 这里由于typeof确定了test类型是string,所以作用域内可以直接取length,而不用<string>转一次
}
typeof
比较是有限制的,自己创建的类返回的都是object
,这时会用到instanceof
,并且instanceof
同样会提供类型保护机制。
另外还有类型断言可以提供类似的功能,不过不如上面的来得方便。
function get(): number | string{
return 'test';
}
let test = get();
function isStr(p : number | string): p is string{
return (<string>p).sub !== 'undefined';
}
if(isStr(test)) {
console.info(test.length);
} else {
console.info(test + 1);
}
上面p is string
就是断言参数p
是string
类型,从而在isStr
后可以自动得到test
的类型,并且在else
里也知道是number
类型。
这点上比C#来得好,一般C#做法可能是用as
操作符转过来,然后判断是否为空,如果类型多操作起来也很复杂。
类型别名
类型别名即可以为现有类型取一个新名字。
type newstring = string;
let str: newstring = 'aaa';
console.info(str.length);
在C#中也可以用using strList = System.Generic.List
做个别名,不过还是不一样,C#的是可以实例化的。
TypeScript别名不是新建一个类型,而是现有类型的一个引用。
给现在类型起别名意义不大,倒是可以配合联合类型或交叉类型做成一些可读的或比较新颖的类型。
别名也支持泛型,现在就有一个用别名创建了一个Tree类型,不过也只是别名,不能实例化,只能是看的,这点不如接口实在。
class Chicken{}
class Duck{}
type Fowl = Chicken | Duck;
type Tree<T> = {
value: T;
left: Tree<T>;
right: Tree<T>;
}
字符串字面量类型
TypeScript可以让string成为一个类型,比如let strType = 'string type'
。
这个可以用在方法参数中,用来限制参数的输入。
function test(param1: 'test1' | 'test2' | 'test3'){
}
test('test'); // 编译不了,参数只能是test1, test2或test3
可辨识联合
综合上面的字符串字面量类型、联合类型、类型保护、类型别名可以创建一个可辨识联合的模式。
必须要在自定义的多个类中有相同的字段,这个字段用的是字符串字面量类型并且把这些类型联合起来。
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;
}
}
类型推论
TypeScript可以根据赋值或上下文推论出变量的类型,所以有时可以不用明确标明变量或函数返回值的类型。
let x = 123; // 这里能推论出x是number,就不用写成这样: let x: number = 123;
function get(){
return [1, 2, 3];
}
let arr = get(); // 这里也能推论出arr是number[];
function get(){
return [1, '2', 3];
}
let arr = get(); // 这里能推论出arr是(number | string)[];
不过个人觉得除了一些很明显的let x = 123
之类可以不写,其他的最好还是写上类型,增加代码可读性。
以上就是TypeScript的类型了,比较灵活也比较难,可能要在实际项目中用用就会比较好掌握。
从C#到TypeScript - 高级类型的更多相关文章
- C# vs TypeScript - 高级类型
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- Typescript高级类型与泛型难点详解
最近做的TS分享,到了高级类型这一块.通过琢磨和实验还是挖掘出了一些深层的东西,在此处做一下记录,也分享给各位热爱前端的小伙伴. 其实在学习TS之前就要明确以下几点: 1. typescrip ...
- TypeScript 高级类型
⒈交叉类型(Intersection Types) 交叉类型是将多个类型合并为一个类型. 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性. 例如, Person &a ...
- TypeScript 高级类型 接口(interface)
在代码的实现或者调用上能设定一定的限制和规范,就像契约一样.通常,我们把这种契约称为接口. TypeScript的核心原则之一是对值所具有的结构进行类型检查. 有时称为“鸭式辨型法”或“结构性子类型化 ...
- TypeScript 高级类型 类(class)
传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员来讲就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的. 从ECMAScript ...
- TypeScript高级类型
交叉类型 将多个类型合并成一个类型,去两个类型的并集.与继承的区别是,继承可以有自己的属性,而交叉没有. interface DogInterface { run():void } interface ...
- TypeScript入门-高级类型
高级类型 交叉类型 交叉类型,就是将多个类型合并为一个新的类型,这个新的类型具有这多个类型的成员,含有这几个类型的所有特性,是他们的综合体,像是集合的并集 例子: function extend< ...
- typescript枚举,类型推论,类型兼容性,高级类型,Symbols(学习笔记非干货)
枚举部分 Enumeration part 使用枚举我们可以定义一些有名字的数字常量. 枚举通过 enum关键字来定义. Using enumerations, we can define some ...
- TypeScript 之 基础类型、高级类型
基础类型:https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Basic%20Types.html 高级类型:https ...
随机推荐
- VMware Workstation 12 Pro 之安装XP系统
使用VMware Workstation 12 Pro 安装XP系统 ... <个人觉得现在没有必要再给自己的电脑装XP系统了.虽然XP很小..但是功能相比现在的Windows差很多.兼容性与 ...
- 程序员的自我修养五Windows PE/COFF
5.1 Windows的二进制文件格式PE/COFF PE文件格式事实上与ELF同根同源,它们都是由COFF格式发展而来. 5.2 PE前身——COFF 在win下,Command Prompt fo ...
- 初入angular4——实际项目搭建总结
前言 接到一个pc端后台项目,还会加入两个安卓同事一起学习和做这个项目,需要带一下他们. 既ng1之后,我就没怎么有过其它后台框架的实际项目经验了,期间用的移动端框架也并非vue.angular系列. ...
- Java架构师系统培训高并发分布式电商实战activemq,netty,nginx,redis dubbo shiro jvm虚拟机视频教程下载
15套java架构师.集群.高可用.高可扩 展.高性能.高并发.性能优化.Spring boot.Redis.ActiveMQ.Nginx.Mycat.Netty.Jvm大型分布 式项目实战视频教程 ...
- Spring Security学习笔记
Spring Web Security是Java web开发领域的一个认证(Authentication)/授权(Authorisation)框架,基于Servlet技术,更确切的说是基于Servle ...
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...
- win7系统盘扩容后不识别修复方法
谢天谢地 终于在不重装系统的情况下,把C盘修复好了. win7系统,C盘之前是200G,使用中慢慢的就用完, 虽然把几乎所有的软件都移植到D盘了但是还是不能释放更多的空间.剩下60多G的空间,一般够用 ...
- 【转载】js常用方法和片段
在网上看了不少js方法的总结没,自己也尝试总结过,这篇只迄今为止觉得最清楚的,尤其是call和apply的方法总结,很到位!! 1.javascript删除元素节点 IE中有这样一个方法:remove ...
- B树及B+树
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp80 B树及B+树 一.B树 1.B树的定义 B树是一种平衡的多分树 ...
- kill -3 导出 thread dump
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt361 有些Java应用服务器是在控制台上运行,如Weblogic,为了方便获 ...