TypeScript_TS系列之高级类型

时间: 2018-04-02阅读: 1975标签: TypeScript

高级类型


交叉类型

将多个类型合并为一个类型。

function extend<T, U>(first: T, second: U): T & U {
    let result = <T & U>{};
    return result;
}

class Person {
    constructor(public name: string) { }
}
interface Loggable {
    log(): void;
}
class ConsoleLogger implements Loggable {
    log() {
        // ...
    }
}
var jim = extend(new Person("Jim"), new ConsoleLogger());
var n = jim.name;
jim.log();


联合类型

表示取值可以为多种类型中的一种。联合类型使用 | 分隔每个类型。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

如果一个值是联合类型,我们只能访问此联合类型的所有类型里共有的成员。

function getString(something: string | number): string {
    return something.toString();
}


混合类型

一个例子就是,一个对象可以同时做为函数和对象使用,并带有额外的属性。

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;


类型断言

可以用来手动指定一个值的类型,它没有运行时的影响,只是在编译阶段起作用。类型断言有两种形式。

//<类型>值
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
//值 as 类型
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
//需要在还不确定类型的时候就访问其中一个类型的属性或方法
function getLength(something: string | number): number {
    if (something.length) {
        return something.length;
    } else {
        return something.toString().length;
    }
}          //报错

//使用类型断
function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的


类型推论

TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。

let x = 3;
变量x的类型被推断为数字。 这种推断发生在初始化变量和成员,设置默认参数值和决定函数返回值时。

如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查。


类型兼容性

TypeScript里的类型兼容性是基于结构子类型的。 结构类型是一种只使用其成员来描述类型的方式。

TypeScript结构化类型系统的基本规则是,如果x要兼容y,那么y至少具有与x相同的属性。

interface Named {
    name: string;
}

let x: Named;
// y's inferred type is { name: string; location: string; }
let y = { name: 'Alice', location: 'Seattle' };
x = y;

//检查函数参数时使用相同的规则
function greet(n: Named) {
    alert('Hello, ' + n.name);
}
greet(y); // OK

这里要检查y是否能赋值给x,编译器检查x中的每个属性,看是否能在y中也找到对应属性。 在这个例子中, y必须包含名字是name的string类型成员。y满足条件,因此赋值正确。


函数

形参

let x = (a: number) => 0;
let y = (b: number, s: string) => 0;

y = x; // OK
x = y; // Error
允许忽略参数。


返回值

let x = () => ({name: 'Alice'});
let y = () => ({name: 'Alice', location: 'Seattle'});

x = y; // OK
y = x; // Error because x() lacks a location proper


枚举

枚举类型与数字类型兼容,并且数字类型与枚举类型兼容。不同枚举类型之间是不兼容的。

enum Status { Ready, Waiting };
enum Color { Red, Blue, Green };

let status = Status.Ready;
status = Color.Green;  //error


比较两个类类型的对象时,只有实例的成员会被比较。 静态成员和构造函数不在比较的范围内。

class Animal {
    feet: number;
    constructor(name: string, numFeet: number) { }
}

class Size {
    feet: number;
    constructor(numFeet: number) { }
}

let a: Animal;
let s: Size;

a = s;  //OK
s = a;  //OK


来源:https://segmentfault.com/a/1190000014121475

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/575

Typescript中以变量方式传递类

最近尝试用TypeScript写一个工具库,需要实现这样一个场景:声明一个抽象类Parent,声明一组子类ChildA、ChildB继承这个Parent,实现它的抽象方法

TypeScript 被吹过头了?

使用 TypeScript 还可以增强重构能力,并且在对修改后的代码运行 TypeScript 编译器时,可以立即识别出代码中断(例如方法签名的更改)。TypeScript 带来了良好的类型检查,并且绝对比没有类型检查器或仅使用普通的 eslint 要更好

TypeScript:入门TS

官方网站的定义是:TypeScript 是 JS 类型的超集。它假设咱们知道什么是超集,什么是类型化。为了简单起见,你可以将 TypeScript 看作是 JavaScript 之上的一个外壳。TypeScript 是一个外壳,因为编写 TypeScript 的代码

TypeScript 渐进迁移指南

最大的问题是我没有提供迁移大型项目的解决方案。显然,大型项目不可能在短时间内重写一切。因此,我很想分享下我最近学到的迁移项目到 TypeScript 的主要经验。

Nerv_一款类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库

Nerv_是一款由京东凹凸实验室打造的类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库。它基于React标准,提供了与 React 16 一致的使用方式与 API。

在 React 中使用 Typescript

用 Typescript 写 React 可比写 Vue 舒服太多了,React 对 ts 的支持可谓天生搭档,如果要用 ts 重构项目,不像 Vue 对项目破坏性极大,React 可以相对轻松的实现重构

如何编写 Typescript 声明文件

使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。有关TypeScript声明类型声明相关的目前就总结了这些比较常用的

TypeScript 中高级应用与最佳实践

当我们讨论 TypeScript 时,我们在讨论什么?TypeScript 中的 Decorator 较为特殊,为 Angular 团队和 TypeScript 团队交易的结果,有兴趣可自行搜索相关资料。而且近期 EcmaScript 规范中的 decorator 提案内容发生了剧烈变动

TypeScript最佳实践:是否使用noImplicitAny

我应该使用noImplicitAny TypeScript编译器标志吗?noImplicitAny编译器选项所做的,基本上是将TypeScript从可选类型语言转换为强制类型检验语言。这使得TypeScript离JavaScript的超集稍微远了一些,因为简单的:

TypeScript 中的类型保护

如上所示,getSmallPet 函数中,既可以返回 Fish 类型的对象,又可以返回 Bird 类型的对象。由于返回的对象类型不确定,所以使用联合类型对象共有的方法时,一切正常,但是使用联合类型对象各自独有的方法时,ts 会报错。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!