文档章节

TypeScript基础入门之高级类型的可null类型

durban
 durban
发布于 2018/09/16 07:48
字数 757
阅读 14
收藏 0

转发

TypeScript基础入门之高级类型的可null类型

高级类型

可null类型(Nullable Types)

TypeScript具有两种特殊的类型,null和undefined,它们分别具有值null和undefined。 默认情况下,类型检查器认为null与undefined可以赋值给任何类型。
null与undefined是所有其它类型的一个有效值。 这也意味着,你阻止不了将它们赋值给其它类型,就算是你想要阻止这种情况也不行。
null的发明者,Tony Hoare,称它为价值亿万美金的错误。

--strictNullChecks标记可以解决此错误:当你声明一个变量时,它不会自动地包含null或undefined。
你可以使用联合类型明确的包含它们,如下

let s = "foo";
s = null; // 错误, 'null'不能赋值给'string'
let sn: string | null = "bar";
sn = null; // 可以

sn = undefined; // error, 'undefined'不能赋值给'string | null'

注意,按照JavaScript的语义,TypeScript会把null和undefined区别对待。 
string | null,string | undefined和 string | undefined | null是不同的类型。

可选参数和可选属性

使用了 --strictNullChecks,可选参数会被自动地加上| undefined:

function f(x: number, y?: number) {
    return x + (y || 0);
}
f(1, 2);
f(1);
f(1, undefined);
f(1, null); // error, 'null' is not assignable to 'number | undefined'

可选属性也会有同样的处理:

class C {
    a: number;
    b?: number;
}
let c = new C();
c.a = 12;
c.a = undefined; // error, 'undefined' is not assignable to 'number'
c.b = 13;
c.b = undefined; // ok
c.b = null; // error, 'null' is not assignable to 'number | undefined'

类型保护和类型断言

由于可以为null的类型是通过联合类型实现,那么你需要使用类型保护来去除 null。 幸运地是这与在JavaScript里写的代码一致:

function f(sn: string | null): string {
    if (sn == null) {
        return "default";
    } else {
        return sn;
    }
}

这里很明显地去除了null,你也可以使用||运算符:

function f(sn: string | null): string {
    return sn || "default";
}

如果编译器不能够去除null或undefined,你可以使用类型断言手动去除。 语法是添加!后缀:identifier!从identifier的类型里去除了null和undefined:

先看第一个失败的例子

function broken(name: string | null): string {
  function postfix(epithet: string) {
    return name.charAt(0) + '.  the ' + epithet; // error, 'name' is possibly null
  }
  name = name || "Bob";
  return postfix("great");
}


在看下第二个成功的例子

function fixed(name: string | null): string {
  function postfix(epithet: string) {
    return name!.charAt(0) + '.  the ' + epithet; // ok
  }
  name = name || "Bob";
  return postfix("great");
}

上面的例子使用了嵌套函数,因为编译器无法去除嵌套函数的null(除非是立即调用的函数表达式)。 因为它无法跟踪所有对嵌套函数的调用,尤其是你将内层函数做为外层函数的返回值。 如果无法知道函数在哪里被调用,就无法知道调用时name的类型。

© 著作权归作者所有

durban
粉丝 100
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
Typescript 小书之入门篇-连载中...

假想你会问(没有这个问题更好) 已经有 Typescript 官方手册 和 Typescript 非官方中文网 这两个权威且全面讲解 Typescript 的站点,干嘛还要再浪费时间整理这本小书? 首先,对于官方的和类...

pr
07/03
0
0
TypeScript基础入门之高级类型的类型保护与区分类型

转发 TypeScript基础入门之高级类型的类型保护与区分类型 项目实践仓库 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。 后面自己在练习的时候可...

durban
2018/09/15
0
0
TypeScript基础入门之Javascript文件类型检查(五)

转发 TypeScript基础入门之Javascript文件类型检查(五) 继续上篇文章【TypeScript基础入门之Javascript文件类型检查(四)】 @constructor 编译器根据此属性赋值推断构造函数,但如果添加@cons...

durban
2018/11/01
0
0
为vue3学点typescript(1), 体验typescript

看了vue conf 2019的视频, 特别兴奋, vue3要来了! vue3是用typescript开发的, 我揣测在vue的带领下typescript会成为主流呢, 要不先学点. 19年最酷的前端技术 我是19年初开始使用的typescrip...

铁皮饭盒
07/01
0
0
TypeScript基础入门 - 基础类型

转载地址 TypeScript基础入门 - 基础类型 项目实践仓库 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。 后面自己在练习的时候可以这样使用 基础...

durban
2018/07/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Archsummit 2019重磅分享|闲鱼Flutter&FaaS云端一体化架构

作者:闲鱼技术-国有   讲师介绍 国有,闲鱼架构团队负责人。在7月13号落幕的2019年Archsummit峰会上就近一年来闲鱼在Flutter&FaaS一体化项目上的探索和实践进行了分享。 传统Native+Web+...

阿里云云栖社区
9分钟前
0
0
总结无线AP与AC之间的各种问题

无线网络搭建中,都说AP+AC的组网模式最现在最先进的,但是在使用过程中还是存在一些问题,下面这些有没有大家碰到的呢? 无线网络搭建中,都说AP+AC的组网模式最现在最先进的,但是在使用过程...

Linux就该这么学
16分钟前
1
0
bootstrap 图标使用说明

1、小图标使用说明 <i class="fa fa-search"></i>详情<a class="btn btn-warning btn-xs"><i class="fa fa-search"></i>搜索</a> 2、元素背景颜色 我们先来看看元素背景的颜色有哪几......

moon888
19分钟前
0
0
windows 远程下载sftp 服务器 文件

下载 putty https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html 把安装后的 psftp.exe 放到需要下载文件的目录 尝试执行远程连接 运行 psftp.exe open : 111:111:111:111 录入...

donald121
34分钟前
2
0
阿里、网易和腾讯面试题 C/C++

一、线程、锁 1、Posix Thread互斥锁 线程锁创建 a.静态创建 pthread_mutex_tmutex = PTHREAD_MUTEX_INITIALIZER; b.动态创建 pthread_mutex_tmutex = pthread_mutex_init(pthread_mutex_t*......

linux服务器架构
35分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部