码迷,mamicode.com
首页 > 其他好文 > 详细

typeScript基础学习

时间:2020-01-19 19:24:50      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:规则   取值   protect   来讲   query   约束   函数   day   对象   

关于 TypeScript

TypeScript 是 JavaScript 的一个超集,主要提供了类型系统对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub 上。


 

什么是 TypeScript

TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。


 

安装 TypeScript

TypeScript 的命令行工具安装方法如下:npm install -g typescript

编译一个 TypeScript 文件:tsc hello.ts


 

基础类型——值类型

1、布尔值

声明方式:boolean

如:let isDone: boolean = true;

2、数值

声明方式:number

如:let num1: number = 6;

注意:其他进制、NaN、Infinity和JS的方式相同

3、字符串

声明方式:string

如let name: string = ‘lml‘;

4、空值void

声明方式:void

let without: void = undefined;

不返回任何值,一般用在函数上

声明一个void类型的变量没有什么大用,因为你只能为它赋予undefined和null

5、null

声明方式:null

let unknowObj: null = null;

只能赋值为null或undefiend,是任何类型的子类型

6、undefined

声明方式:undefined

let unkonw: undefiend = undefined;

只能赋值为null或undefiend,是任何类型的子类型

 


基础类型——任意值

1、any

声明方式:any

如:let anyone: any = 18; anyone = ‘lml‘;

不做类型检查,可以是任何类型

在任意值上访问任何属性都是允许,也允许调用任何方法

声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值

2、 未声明类型的变量

变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型


类型推论

如果没有明确的指定类型,那么 TypeScript 会依照类型推论的规则推断出一个类型(根据第一次赋值时的类型)

如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查


联合类型

联合类型表示取值可以为多种类型中的一种

联合类型使用 | 分隔每个类型

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法 


对象类型——接口

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。

接口是对行为的抽象,而具体如何行动需要由类去实现。

TypeScript中的接口是一个非常灵活的概念,可用于对类的一部分行为进行抽象,也常用于对对象的形状进行描述。

接口定义时一般首字母大写。

定义的变量比接口少了一些属性是不允许的,多一些属性也是不允许的。赋值的时候,变量的形状必须和接口的形状保持一致

有时我们希望不要完全匹配一个形状,那么可以用可选属性,可选属性的含义是该属性可以不存在。

有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性。


对象类型——数组

声明1:使用「类型 + 方括号」来表示数组,数组的项中不允许出现其他的类型。

声明2:使用数组泛型Array<elemType> 来表示数组

声明3:接口也可以用来描述数组

声明4:使用类表示数组

any 在数组中的应用,表示数组中允许出现任意类型


对象类型——函数

一个函数有输入和输出,要在 TypeScript 中对其进行约束,需要把输入和输出都考虑到

输入多余的(或者少于要求的)参数,是不被允许的

用接口定义函数的形状,我们也可以使用接口的方式来定义一个函数需要符合的形状

输入多余的(或者少于要求的)参数,是不允许的,与接口中的可选属性类似,我们用?表示可选的参数。

可选参数必须接在必需参数后面。换句话说,可选参数后面不允许再出现必需参数了

我们允许给函数的参数添加默认值,TypeScript 会将添加了默认值的参数识别为可选参数

 


类型断言

第一种方式:<类型>值如(<string>someValue)。

第二种方式:值 as 类型如(someValue as string)。


 

声明文件

当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。

新语法索引

  declare var 声明全局变量

  declare function 声明全局方法

  declare class 声明全局类

  declare enum 声明全局枚举类型

  declare namespace 声明(含有子属性的)全局对象

  interface 和 type 声明全局类型

  export 导出变量

  export namespace 导出(含有子属性的)对象

  export default ES6 默认导出

  export = commonjs 导出模块  

  export as namespace UMD 库声明全局变量

  declare global 扩展全局变量

  declare module 扩展模块

  /// <reference /> 三斜线指令

通常我们会把声明语句放到一个单独的文件(jQuery.d.ts)中,这就是声明文件,声明文件必需以 .d.ts 为后缀。

第三方声明文件:Query 的声明文件不需要我们定义了,社区已经帮我们定义好了。npm install @types/jquery --save-dev


 

 

内置对象

ECMAScript 的内置对象,如let e: Error = new Error(‘Error occurred‘);

DOM 和 BOM 的内置对象,如let allDiv: NodeList = document.querySelectorAll(‘div‘);

TypeScript 核心库的定义文件

用TypeScript写Node,Node不是内置对象,需要引入第三方声明文件:npm install @types/node --save-dev


 

 

 

类型别名

类型别名用来给一个类型起个新名字,我们使用 type 创建类型别名。

类型别名常用于联合类型。


 

 

字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个。

类型别名与字符串字面量类型都是使用 type 进行定义。


 

 

其他类型——元祖

数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。

例如:let tom: [string, number] = [‘Tom‘, 25];


 

 

其他类型——枚举

用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。

枚举使用 enum 关键字来定义:enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};


 

其他类型——类

类(Class):定义了一件事物的抽象特点,包含它的属性和方法

TypeScript 中的类

  public:修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是public的。

  private:修饰的属性或方法是私有的,不能在声明它的类的外部访问。

  protected:修饰的属性或方法是受保护的,它和private类似,区别是它在子类中也是允许被访问的。

  readonly:只读属性关键字,只允许出现在属性声明或索引签名中。

  抽象类:abstract 用于定义抽象类和其中的抽象方法。

  类的类型:给类加上TypeScript的类型很简单,与接口类似。

 

 

 


类与接口

类实现接口:实现(implements)是面向对象中的一个重要概念。一般来讲,一个类只能继承自另一个类,有时候不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

接口继承接口:接口与接口之间可以是继承关系,我们使用extends使一个接口继承另一个接口。

接口继承类:接口也可以继承类,同样使用extend。

混合类型:可以使用接口的方式来定义一个函数需要符合的形状。有时候,一个函数还可以有自己的属性和方法

 


 

 

其他类型——泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。

 


 

 

ts代码检查工具

编译配置文件 tsconfig.json

 

typeScript基础学习

标签:规则   取值   protect   来讲   query   约束   函数   day   对象   

原文地址:https://www.cnblogs.com/brightLian/p/12214646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!