TypeScript 小记

原文链接:http://www.cnblogs.com/colima/p/9738904.html

1. 对比JavaScript

  • TypeScript是JavaScript的超集,可编译为JavaScript,主要提供类型系统等增强代码的可读性和可维护性,适合中大型项目多人协作;
  • TypeScript只会进行静态检查,如果发现有错误,编译的时候就会报错;

2. 原始数据类型

  • boolean,number,string,null,undefined,void(一般用于返回值);
  • 与void的区别是,undefined和null是所有类型的子类型,也就是说undefined类型的变量,可以赋值给number类型的变量,void不行;

3. 任意值any

  • 赋值为任意类型,如果未指定类型,则为任意值类型;

4. 类型推论

  • 若没指定变量类型赋值,则会根据之前变量的类型进行推论,之后重新赋值会检测类型;

5. 联合类型(Union Types)

  • 多种类型 let a: string | number; 

6. 接口(interface)

  • 用于定义对象的类型,对类的行为进行抽象,对象的描述;接口首字母一般大写;
  • 可选属性:a?: string;
  • 任意属性:[propName: string]: string,一旦定义了任意属性,则确定属性和可选属性都必须是它的子属性;
  • 只读属性:readOnly a: string;只能在创建阶段被赋值;

7. 数组

  • 类型+[] 表示,let arr: number[] = [1, 2, 3];
  • 数组泛型表示,let arr: Array<number> = [1, 2, 3];
  • 接口表示
    interface NumberArray {
        [index: number]: number
    }
    let arr: NumberArray = [1, 2, 3];
  • any表示数组中允许出现任意类型;
  • 常见的类数组都有自己的接口定义,如 IArgumentsNodeListHTMLCollection 等;

8. 函数

  • 会对参数进行约束,不允许输入多余(或少)的参数;
  • 在 TypeScript 的类型定义中,=> 用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型;
  • 可选参数后面不允许再出现必须参数;
  • TypeScript 会将添加了默认值的参数识别为可选参数,这时就不受「可选参数必须接在必需参数后面」的限制;
  • 重载允许一个函数接受不同数量或类型的参数时,作出不同的处理;

9. 类型断言(Type Assertion)

  • 可以用来手动指定一个值的类型;
  • <类型>变量;
  • 类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的;

10. 声明文件

  • declare var jQuery: (selector: string) => any;
  • 通常我们会把类型声明放到一个单独的文件中,这就是声明文件,约定以.d.ts为后缀;
  • 然后在使用到的文件的开头,用「三斜线指令」表示引用了声明文件,
    /// <reference path='./jQuery.d.ts' />

11. 内置对象

  • Boolean、Error、Date、RegExp等;
  • DOM 和 BOM 的内置对象;
  • TypeScript 核心库的定义文件中定义了所有浏览器环境需要用到的类型,并且是预置在 TypeScript 中;
  • TypeScript 核心库的定义中不包含 Node.js 部分

12. 类型别名

  • 给类型起新名字;
  • type Name = string;
  • 类型别名常用于联合类型;

13. 字符串字面量类型

  • 约束取值只能是某几个字符串中的一个;
  • type EventNames = 'click' | 'scroll' | 'mousemove';
  • 类型别名与字符串字面量类型都是使用type进行定义;

14. 元组(Tuple)

 

  • 数组合并了相同类型的对象,而元组合并了不同类型的对象;
  • 当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型;

15. 枚举(Enum)

  • 用于取值被限定在一定范围内的场景,如一周七天
    enum Week { Sun, Mon, Tue }
  • 可以手动赋值
    enum Week { Sun = 6, Mon, Tue }
  • 两种类型:常数项(constant member)和计算所得项(computed member);
  • 常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算成员;
  • 外部枚举(Ambient Enums)是使用declare enum定义的枚举类型;

16. 类

  • OOP三大特性:封装、继承、多态;
  • 存取器(getter & setter):用以改变属性的读取和赋值行为;
  • 修饰符(Modifiers):用于限定成员或类型的性质,TypeScript中有public、private、protected;protected类似于private,区别是它在子类中也是允许被访问的;
  • es6使用static修饰符修饰的方法称为静态方法,它们不需要实例化,而是直接通过类来调用;es7中可以使用static定义一个静态属性;
  • abstract用于定义抽象类(不允许被实例化)和其中的抽象方法;

17. 类与接口

  • 一般来讲,一个类只能继承自一个类,有时不同类之间有些共有的特性,就可以提取成接口,用implements实现;
  • 接口可以继承接口,接口也可以继承类;

18. 泛型(Generics)

  • 指在定义函数、接口或类的时候,不预先指定类型,而在使用时再指定类型的一种特性;

19. 声明合并

  • 若定义了两个相同名字的函数、接口或类,那么它们会合并成一个类型;
  • 合并的属性的类型必须是唯一的。

 

转载于:https://www.cnblogs.com/colima/p/9738904.html

原文地址:https://blog.csdn.net/weixin_30824277/article/details/98889814

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


我最大的一个关于TypeScript的问题是,它将原型的所有方法(无论访问修饰符)编译.例classExample{publicgetString():string{return"HelloWorld";}privategetNumber():number{return123;}}众所周知,访问修饰符仅在编译时检
我对React很新,我正在尝试理解子组件之间相互通信的简洁方法.在一个简单的组件中,我知道我可以使用props将数据传递给子节点,并让子节点的回调将数据传递回父组件.在稍微复杂的情况下,当我在父组件中有多个子组件时,子组件之间的通信会有点混乱.我不确定我应该为同级别的儿童组
我有一个非常简单的表单,我将用户电子邮件存储在组件的状态,并使用onChange函数更新状态.有一个奇怪的事情发生在我的onChange函数用函数更新状态时,我在键入时在控制台中得到两个错误.但是,如果我使用对象更新状态,则不会出现错误.我相信用函数更新是推荐的方法,所以我很想知道为
我发现接口非常有用,但由于内存问题我需要开始优化我的应用程序,我意识到我并不真正了解它们在内部如何工作.说我有interfaceFoo{bar:number}我用这种类型实例化一些变量:letx:Foo={bar:2}Q1:这会创建一个新对象吗?现在,假设我想改变bar的值.我这样做有两种
我得到了一个json响应并将其存储在mongodb中,但是我不需要的字段也进入了数据库,无论如何要剥离不道德的字段?interfaceTest{name:string};consttemp:Test=JSON.parse('{"name":"someName","age":20}')asTest;console.log(temp);输出:{name:'someName
我试图使用loadsh从以下数组中获取唯一类别,[{"listingId":"p106a904a-b8c6-4d2d-a364-0d21e3505010","section":"section1","category":"VIPPASS","type":"paper","availableTi
我有以下测试用例:it("shouldpassthetest",asyncfunction(done){awaitasyncFunction();true.should.eq(true);done();});运行它断言:Error:Resolutionmethodisoverspecified.SpecifyacallbackorreturnaPromise;n
我正在一个有角度的2cli项目中工作,我必须创建一个插件的定义,因为它不存在它的类型.这个插件取决于已经自己输入的主库,它可以工作.无论如何,我有两个文件主要的一个图书馆类型文件AexportclassAextendsB{constructor(...);methodX():void;}我需要为我的
我有三元操作的问题:leta=undefined?"Defined!":"DefinitelyUndefined",b=abc?"Defined!":"DefinitelyUndefined",//ReferenceErrorc=(abc!==undefined)?"Defined!":"DefinitelyUndefin
下面的代码片段是30秒的代码网站.这是一个初学者的例子,令人尴尬地让我难过.为什么这样:constcurrentURL=()=>window.location.href;什么时候可以这样做?constcurrentURL=window.location.href;解决方法:第一个将currentURL设置为一个求值为window.location.href的
我是TypeScript和AngularJS的新手,我正在尝试从我的API转换日期,例如:"8/22/2015"…到ISO日期.将日期正确反序列化为Date类型的TypeScript属性.但是,当我尝试以下命令时(在typescript中,this.dateDisplay的类型为string)this.dateDisplay=formats.dateTimeValue.toISOString
我的名为myEmployees的数组中有5个名字,但是当我运行代码时,它只打印出其中的3个.我相信这种情况正在发生,因为脚本中的for循环覆盖了它在HTML文档中编写的前一行.我怎样才能解决这个问题?YearlyBulletinBoardAnnouncements!CongratulationstoTaylor,youhavebeenheref
我看到有一种方法可以在摩纳哥编辑器中设置scrolltop.如何滚动到特定行而不是特定像素?解决方法:如在文档中:https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.icodeeditor.html滚动到顶部,在px中:editor.setScrollPosition({scrollTop:0});滚动到特定
在从同一个类继承的一个数组中收集各种不同的对象时,如何在TypeScript中设置一个优等的类,以便TypeScript不显示错误?我正在尝试这样:interfaceIVehicle{modelName:string}interfaceICarextendsIVehicle{numberOfDoors:number,isDropTop:boolean}inte
什么是TypescriptTypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。作者是安德斯大爷,Delphi、C#之父(你大爷永远是你大爷)。把弱类型语言改成了强类型语言,拥有了静态类型安全检查,IDE智能提示和追踪,代码重构简单、可读性
0.系列文章1.使用Typescript重构axios(一)——写在最前面2.使用Typescript重构axios(二)——项目起手,跑通流程3.使用Typescript重构axios(三)——实现基础功能:处理get请求url参数4.使用Typescript重构axios(四)——实现基础功能:处理post请求参数5.使用Typescript重构axios(五
1.1Typescript介绍1.TypeScript是由微软开发的一款开源的编程语言,像后端java、C#这样的面向对象语言可以让js开发大型企业项目。2.TypeScript是Javascript的超级,遵循最新的ES6、Es5规范(相当于包含了es6、es5的语法)。TypeScript扩展了JavaScript的语法。3.最新的Vu
0.系列文章1.使用Typescript重构axios(一)——写在最前面2.使用Typescript重构axios(二)——项目起手,跑通流程3.使用Typescript重构axios(三)——实现基础功能:处理get请求url参数4.使用Typescript重构axios(四)——实现基础功能:处理post请求参数5.使用Typescript重构axios(
webpack.config.jsconstpath=require('path');constCopyWebpackPlugin=require('copy-webpack-plugin');constExtractTextPlugin=require('extract-text-webpack-plugin');const{CleanWebpackPlugin}=require('clean-webpac
我在这篇ECMAScriptpage上读到“class”是JavaScript的一部分.在这个关于TypeScript的页面上,我看到’class’也可以在Typescript中找到.我的问题是,开发未来JavaScript应用程序的正确方法是利用(a)JavaScript中的面向对象功能以及EMACScript7.0中可用的功能或(b)使用TypeScript