TypeScript Type Innference(类型判断)_javascript技巧

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可以作为最佳公共类型。

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索typescript类型判断
typescript_type
typescript type、javascript type、javascript nodetype、type text javascript、javascript typeerror,以便于您获取更多的相关知识。

时间: 2025-01-07 18:55:49

TypeScript Type Innference(类型判断)_javascript技巧的相关文章

五种js判断是否为整数类型方式_javascript技巧

这篇看看如何判断为整数类型(Integer),JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示,和Java的double类型一样.但实际操作中比如数组索引.位操作则是基于32位整数.方式一.使用取余运算符判断任何整数都会被1整除,即余数是0.利用这个规则来判断是否是整数. function isInteger(obj) { return obj%1 === 0 } isInteger(3) // true isInteger(3.3) // false 以上输出可以

简单谈谈Javascript中类型的判断_javascript技巧

数据类型的判断有这么几种方式 1.一元运算符 typeOf 2.关系运算符 instanceof 3.constructor 属性 4.prototype属性 一.typeof typeof的返回值有以下几种 类型 结构 Undefined "undefined" Null "object" (见下方) 布尔值 "boolean" 数值 "number" 字符串 "string" Symbol (ECMAS

Javascript中的包装类型介绍_javascript技巧

最近不看犀牛书了,那本翻译的特烂而且好拗口,尤其是原型那块说的乱七八糟,后来经同事介绍,买了本js高级程序设计,然后就继续苦逼的看,不吐槽了,继续说说js中有新鲜感的包装类型.  一:String 说到String类型,蛮有意思,平时我们都是这样定义一个string类型,如下图: 但是在js中有一点非常特别,那就是string类型是属于基本类型,不属于引用类型,那就说明string的值是保存在"栈"上面的,而很多语言不是这样,比如C#,我觉得js不作为引用类型也是情有可原,毕竟它玩不了

JS自定义函数对web前端上传的文件进行类型大小判断_javascript技巧

废话不多说了直接给大家贴js代码了.具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

判断访客终端类型集锦_javascript技巧

当用户使用手机等移动终端访问网站时,我们可以通过程序检测用户终端类型,如果是手机用户,则引导用户访问适配手机屏幕的移动站点.本文将介绍分别使用PHP和JAVASCRIPT代码判断用户终端类型. PHP版 我们使用PHP的$_SERVER['HTTP_USER_AGENT']来获取手机用户浏览器的用户代理,然后匹配已有的各种手机浏览器代理库,如果含有匹配的关键字,则判断为手机(移动终端)用户. function is_mobile() { $user_agent = $_SERVER['HTTP_

js判断上传文件类型判断FileUpload文件类型代码_javascript技巧

asp.net中html标签代码: 复制代码 代码如下: <asp:FileUpload ID="fuMain" runat="server" /> <asp:Button ID="btnUpload" runat="server" OnClientClick="return CheckWorkFile()" Text="上传" /> 普通的html标签: 复制代

Javascript 判断客户端浏览器类型代码_javascript技巧

复制代码 代码如下: <script type="text/javascript"> /*详细方法1*/ function CheckBrowser() { var app=navigator.appName; var verStr=navigator.appVersion; //火狐浏览器 if (app.indexOf('Netscape') != -1) { alert("你使用的是Netscape浏览器或火狐浏览器."); } else if (

浅谈js数据类型判断与数组判断_javascript技巧

写在开篇: 昨天面试发现一个十分非常简单的问题竟然没有回答上来,可能也确实是因为太紧张了,感觉被自己蠢哭了.后来想想还是应该认真记录一下,这样才能印象深刻.革命尚未成功,壮实仍需努力! 1. js六大数据类型 number:数字,整数.浮点数等等, string:单引号或者双引号来说明, Boolean:返回true和false,这两个值不一定对应1和0 object:对象,可以执行new操作符后跟要创建的对象类型的名称来创建. null:只有一个值得数据类型,逻辑上讲,null值表示一个空对象

Javascript 类型转换方法_javascript技巧

Javascript中的变量同样支持自由类型转换成为适用(或者要求)的内容以便于使用. 弱类型的Javascript不会按照程序员的愿望从实际的变量类型到所需要的数据类型转换,例如一个非常常见的错误,在浏览器脚本中,从表单控件中获取用户将要输入的一个数值类型的变量与另一个数值变量的和.因为变量类型在表单控件中是字符串类型(计时字符串序列包含一个数字)这种尝试将会添加那个字符串到变量,即使这些值碰巧是一些数字,结果在第二个变量将会被转换为字符串类型,在最后只会把从表单控件中得到的变量添加到第一个字