TypeScript 初识 - 高级类型

2019-08-15 admin

联合类型

联合类型表示一个值可以时集中类型之一,使用 | 进行分隔每种类行。

联合类型的变量在被赋值的时候,根据类型推论的规则,推断出一个类型。

联合类型的变量当被推断出类型后,就变得和正常声明的变量一样:

let ddd: string | number;
ddd = 'hello world';
// ddd被推断成了 string,访问 length 属性不会报错
console.log(ddd.length);
ddd = 255;
// 报错 ddd 被推断成了 number,访问 length 属性时就报错了
console.log(ddd.length);

联合类型的变量没有被推断出类型时,这个变量只能访问联合类型中所有类型共有的属性:

function func(name: string, age: string | number) {
    // Error,Property 'length' does not exist on type 'string | number'.Property 'length' does not exist on type 'number'.
    console.log(age.length);
    // 编译通过
    console.log(age.toString());
}

交叉类型

交叉类型是将多个类型合并为一个类型,交叉类型的变量拥有所有类型的所有属性、方法,使用 & 进行合并类型:

function extend<T, U>(first: T, second: U): T & U {
    const result = <T & U>{};
    for (let id in first) {
        (<T>result)[id] = first[id];
    }
    for (let id in second) {
        if (!result.hasOwnProperty(id)) {
            (<U>result)[id] = second[id];
        }
    }

    return result;
}

const x = extend({ a: 'hello' }, { b: 42 });

// 现在 x 拥有了 a 属性与 b 属性
const a = x.a;
const b = x.b;

[转载]原文链接:https://segmentfault.com/a/1190000020076402

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72517.html

文章标题:TypeScript 初识 - 高级类型

相关文章
c#程序员对TypeScript的认识过程
简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript也是半罐子,本文描述了一个c#程序员认识...
2017-03-25
JavaScript基本数据类型及值类型和引用类型
在JavaScript中四种基本的数据类型:数值(整数和实数)、字符串型(用“”号或‘'括起来的字符或数值)、布尔型(使True或False表示)和空值。在JavaScript的基本类型中的数据可以是常量,也可以变量。由于JavaScrip...
2017-03-30
TypeScript 中接口详解
在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念。 先看看一个简单的例子: function printLabel(labe...
2017-03-25
千呼万唤始出来!一键构建Vue-TypeScript应用
A simple TypeScript CLI for scaffolding Vue.js projects. Installation Prerequisites: Node.js (&gt;=4.x, 6.x preferred)...
2017-12-20
Javascript中的包装类型介绍
最近不看犀牛书了,那本翻译的特烂而且好拗口,尤其是原型那块说的乱七八糟,后来经同事介绍,买了本js高级程序设计,然后就继续苦逼的看,不吐槽了,继续说说js中有新鲜感的包装类型。 ** 一:String** 说到String类型,蛮有意思,平...
2017-03-22
vscode-eslint的踩坑实践--typescript无法格式化
引言 最近开发的前端项目随着开发的人员越来越多,代码规范已经是一个很难避免的问题了,虽然百度有fecs这个规则检查,但是不论是icode或者是项目本地都没有配置或检查,完全靠自觉,这是件非常扯淡的事。 icode负责人表示暂时没法支持这个,...
2018-03-01
javascript限制文本框输入值类型的方法
本文实例讲述了javascript限制文本框输入值类型的方法。分享给大家供大家参考。具体分析如下: 要求:所有的文本框,只能输入数字和小数点,其他的符号一概不能输入; 重点是我希望在用户输入时就做限制,而不是提交时判断——也就是说如果用户在...
2017-03-23
判断访客终端类型集锦
当用户使用手机等移动终端访问网站时,我们可以通过程序检测用户终端类型,如果是手机用户,则引导用户访问适配手机屏幕的移动站点。本文将介绍分别使用PHP和JAVASCRIPT代码判断用户终端类型。 PHP版 我们使用PHP的$_SERVER[‘...
2017-03-24
详细分析JavaScript变量类型
变量类型 只有6种 : 四种原始数据类型boolean , number, string , undefine, 其他object,function是对象 **typeof,instanceof ** 直接看实例: var obj ...
2017-03-27
关于JavaScript的变量的数据类型的判断方法
虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number、String、Boolean、Object、Udefined、Null。其中,Object属于复杂数据类型,Object   由无序的键值对组成。其...
2017-03-29
回到顶部