TypeScript Type Innference(类型判断)


Posted in Javascript onMarch 10, 2016

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。

为什么会有 TypeScript?

JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概念,而 TypeScript 扩展了 JavaScript 实现了这些特性。TypeScript 主要特点包括:

TypeScript 是微软推出的开源语言,使用 Apache 授权协议

TypeScript 是 JavaScript 的超集.

TypeScript 增加了可选类型、类和模块

TypeScript 可编译成可读的、标准的 JavaScript

TypeScript 支持开发大规模 JavaScript 应用

TypeScript 设计用于开发大型应用,并保证编译后的 JavaScript 代码兼容性

TypeScript 扩展了 JavaScript 的语法,因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改

TypeScript 文件扩展名是 ts,而 TypeScript 编译器会编译成 js 文件

TypeScript 语法与 JScript .NET 相同

TypeScript 易学易于理解

语法特性

类 Classes

接口 Interfaces

模块 Modules

类型注解 Type annotations

编译时类型检查 Compile time type checking

Arrow 函数 (类似 C# 的 Lambda 表达式)

JavaScript 的 TypeScript 的区别

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码,并只对其中的

TypeScript 代码进行编译。

在这一节,我们将介绍TypeScript中的类型推断。我们将会讨论类型推断需要在何处用到以及如何推断。

基础

在TypeScript中,在几个没有明确指定类型注释的地方将会使用类型推断来提供类型信息。

var x = 3;

变量"x"的值被推断为number。这种推断发生在变量或者成员初始化、设置参数默认值、决定函数返回类型的时候。

最佳公共类型

当需要从多个表达式中进行类型推断的时候,这些表达式的类型将会用来推断出一个"最佳公共类型"。例如:

var x = [0, 1, null];

要想推断出什么例子中"x"的类型,我们需要考虑每个数组元素的类型。这里,我们给出了两个数组类型的选择:number和null。最佳公共类型算法要求考虑到所有候选的类型,并选择出与所有候选类型兼容的类型。(这里的类型可为Array<number>)

由于最佳公共类型是从提供的候选类型中选择的,有些情况下,候选类型共享一个共同类型,但没有任何一个类型是所有候选类型的父类型。例如:

class Animal {
name:string;
constructor(theName: string) { this.name = theName; }
}
class Snake extends Animal{
constructor(name: string) { super(name); }
}
class Elephant extends Animal{
constructor(name: string) { super(name); }
}
class Rhino extends Animal {
constructor(name: string) { super(name); }
}
var zoo = [new Rhino(), new Elephant(), new Snake()]; // 这里三个成员的类型分别为:Rhino、Elephant、Snake 他们是最佳公共类型的候选类型,Animal是他们的super type(译为父类型)

理想情况下,我们可能希望zoo被推断为Animal[]类型,但是因为数组中没有任何对象是严格的Animal类型,我们便不能做出推断。为了解决这个问题,当不能推断出所有候选类型的父类型的时候,我们需要明确的提供类型。

var zoo: Animal[] = [new Rhino(), new Elephant(), new Snake()];

当没有最佳公共类型的时候,推断的结果是产生一个空对象,{}。因为这个类型不含任何成员,对于其任何属性的访问都会导致错误。这种结果依然允许我们在忽略类型的方式中使用对象,但在保障类型安全的前提下,该对象的类型不能被隐式的确定。

上下文(语境)类型

在TypeScript中,类型推断在某些情况下也存在于"其他方面"。这被称为"上下文归类"。上下文归类发生在当一个表达式的类型在其所在的上下文中被隐式的指定的时候。例如:

window.onmousedown = function(mouseEvent) { 
console.log(mouseEvent.buton); //<- 编译时抛出错误 
};

上面的代码将会给出一个类型错误,TypeScript的类型检查器使用Window.onmousedown函数的类型来推断右边的函数表达式类型。当它这么做的时候,便能够推断出参数mouseEvent的类型。 如果这个表达式不在可进行上下文归类的位置,参数mouseEvent 需要给定一个any类型,这样就不会出现错误了。

如果需要上下文归类的表达式内容中包含明确的类型信息,则会忽略上下文归类。我们重写上面的例子:

window.onmousedown = function(mouseEvent: any) { 
console.log(mouseEvent.buton); //<- 现在不会报错了 
};

参数明确指定类型的函数表达式将会忽略上下文归类。经过这样的处理就不会报错了,因为没有应用到上下文归类。

上下文归类可应用于许多场景。常见的场景包括函数调用的参数、赋值的等号右边表达式、类型确定、对象成员和数组字面量、返回值语句。上下文类型也作为最佳公共类型的候选类型。例如:

function createZoo(): Animal[] {
return [new Rhino(), new Elephant(), new Snake()];
}

在这个例子中,最佳公共类型有四个候选类型:Animal,Rhino,Elephant,和Snake。其中,Animal可以作为最佳公共类型。

形式有点像数学中的求最小公倍数...

Javascript 相关文章推荐
JS继承 笔记
Jul 13 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
JavaScript File分段上传
Mar 10 #Javascript
ES6中非常实用的新特性介绍
Mar 10 #Javascript
ES6的新特性概览
Mar 10 #Javascript
JavaScript字符串常用的方法
Mar 10 #Javascript
javascript中call apply 与 bind方法详解
Mar 10 #Javascript
angularjs表格ng-table使用备忘录
Mar 09 #Javascript
详解AngularJS控制器的使用
Mar 09 #Javascript
You might like
php 更新数据库中断的解决方法
2009/06/05 PHP
PHP 图片水印类代码
2012/08/27 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
php生成圆角图片的方法
2015/04/07 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
销售冠军获奖感言
2014/02/03 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
机械操作工岗位职责
2014/08/08 职场文书
施工安全汇报材料
2014/08/17 职场文书
反四风对照检查材料
2014/09/22 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书