从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 ...
随机推荐
- python基础学习(十二)
模块 前面有简单介绍如何使用import从外部模块获取函数并且为自己的程序所用: >>> import math >>> math.sin(0) #sin为正弦函数 ...
- Java内存模型_基础
线程之间的通信机制有两种: 1.共享内存:线程之间共享程序的公共状态,通过写-读内存中的公共状态进行隐式的通信. 2.消息传递:线程之间没有公共状态,线程之间必须发送消息来显示的进行通信 同步:是指程 ...
- Selenium启动关闭Webdriver
第一 启动chrome driver 1. 首先要通过System.setProperty指定chrome driver的路径,才能正常打开一个chrome浏览器: System.setPropert ...
- 小而美的 React Form 组件
背景 之间在一篇介绍过 Table 组件< React 实现一个漂亮的 Table > 的文章中讲到过,在企业级后台产品中,用的最多且复杂的组件主要包括 Table.Form.Chart, ...
- 区块链下的io域名到底有多神秘?
不知大家发现没有 一些科技创业公司首选域名后缀 是.IO WHY? 因为给人一种很酷的感觉啊~ 譬如,极客届享誉盛名的盘古越狱团队官网:http://pangu.io 国内优质社区,简书--创作你的创 ...
- ORACLE分区表、分区索引详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt160 ORACLE分区表.分区索引ORACLE对于分区表方式其实就是将表分段 ...
- ROS学习记录(一)————创建简单的机器人模型smartcar
这是我在古月居上找的(http://www.guyuehome.com/243),但直接运行的话,没办法跑起来,我也是查了好多博客和日志,才实现最后的功能的,所以,记录下来,以备后用吧,也欢迎其他和我 ...
- pip 警告!The default format will switch to columns in the future
pip警告! DEPRECATION: The default format will switch to columns in the future. You can use --format=(l ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- 【深入Java虚拟机】之八:Java垃圾收集机制
转载请注明出处:http://blog.csdn.net/ns_code/article/details/18076173 对象引用 Java中的垃圾回收一般是在Java堆中进行,因为堆中几乎存放了J ...