技术文章 | Technical articles

Html5web全栈前端开发_angular框架(一)

Typescript

typescript简称ts,是js语法的超集,很多js新的语法就借鉴了ts语法。ts是由微软团队维护的

底部领取全套angular视频教程

1.1 TS简介

1.1.1 Github地址

https://github.com/Microsoft/typescript

在过去,js的出现是为了解决页面中的一些简单交互,因此js被设计非常简单,被很多开发者接受

js特点

弱类型:定义变量没有具体的类型,可以存储任何类型的数据

动态的:变量存储的数据需要开辟多少内存空间,不是在定义时候说的算,而是运行时候动态开辟的

...

由于js是弱类型的,因此变量存储的是什么样式的数据,需要多少的内容空间,我们在定义的时候无法获知,只能在js运行的时候,动态的分配,所以js运行的时候,一边处理业务逻辑,一边分配内存空间,对于小型项目来说,运行是临时分配空间的性能消耗是可以接受的,在大型项目中,这种消耗是无法接受的。所以在一些强类型语言中,为变量在定义的时候指明类型,这样运行前就可以针对变量的类型分配内存空间,这样在程序运行的时候就不需要分配空间了,可以减少不必要的资源消耗,所以ts是一个强类型语言

在大型项目中,为了提高代码可维护性,我们通常采用面向对象编程方式,但是在面向对象编程中,我们势必要使用类,继承,接口,私有属性,共有属性等等,但是这些关键字,诸如:class,extendsimplementinterfaceprivatepublic等等js都不支持,但是js为了实现这些功能,自身模拟了这些功能,但是为了模拟这些功能势必会产生一些不必要的开销,在大型项目中,这些开销是无法接受的。所以TS基于面向对象编程方式,实现了这些关键字。

... ts语法着眼于未来与大型项目。

遗憾的是,这些功能并没有一个浏览器实现,也没有一个浏览器宣称要实现(并且IE浏览器都没有实现),所以我们就要将其编译成js语言(ES3.1版本或者是ES5版本)。

图片1.png 

1.1.2官网

http://www.typescriptlang.org/

1.1.3中文网站

https://www.tslang.cn/

1.2浏览器端编译

浏览不识别ts,我们既要将ts编译成js语言,在学习中,为了测试方便,我们可以在浏览器端编译。

我们要引入两个库

typescript.min.js   用来检测ts语法的

typescript.compile.min.js 用来编译ts语法的

想使用ts,就要创建一个ts环境,我们通过将script标签的type属性值改成text/typescript即可使用ts

ts环境一定要写在引入库的前面

1.3数据类型

ts是一个强类型语言,因此定义的任何数据,我们都要赋值类型。这样在运行前,就可以获知需要多大内存空间了。

ts是js语法的超集,因此js支持数据类型,ts也支持,

例如

数字  number

字符串  string

布尔值   boolean

...

定义类型的语法

var 数据: 类型 =

ts也允许我们定义变量的时候,忽略数据类型,此时ts就会对数据进行类型的猜测了

如果赋值了。就根据赋值的数据猜测类型

如果没有赋值,此时将猜测该变量的类型是any类型。

any类型是ts中新增的一种类型,可以存储任何类型的数据

由于ts加载需要时间,ts编译成js也需要时间,js再执行也需要时间,因此需要很多时间,不适合在浏览器端编译。

<!-- 创建ts运行环境 -->

<script type="text/typescript">

// 定义ts语法了

var color:string = 'red';

var hasChoose:boolean = true;

var num = 100;

// ts根据赋值,猜测num类型是number类型,因此就不能在赋值其他类型

// num = 'red';

var num2;

10 num2 = 300;

11 num2 = true;

12 // 等价于

13 var demo: any = true;

14 demo = 200;

15 </script>

16 <!-- 引入ts-->

17 <script type="text/javascript" src="lib/typescript.min.js"></script>

18 <script type="text/javascript" src="lib/typescript.compile.min.js"></script>

 

1.4工程化编译

我们已经学习了gulp,webpack等工程化工具,所以我们可以用这些工具,将ts编译成js的语法(es3.1, es5.

例如,我们用webpack编译,我们就需要引入ts的编译插件:ts-loader

npm install ts-loader

由于ts-loader依赖于typescript,因此我们要安装typescript

npm install typescript

在webpack看来,ts文件也是一类资源,是资源就可以模块化打包加载

为了区分ts和js文件,我们通常将ts的拓展名定义成.ts

定义ts加载机

{

test: /\.ts$/,

loader: ts-loader

}

在编译ts的时候,typecript模块需要tsconfig.json,所以我们要定义出来

1.5数组

ts中定义数组的语法

var 数组:类型[] = 数据;

这里的类型就约束了,数组中每一个成员的类型。

如果成员类型不确定,我们可以将类型定义成any

// 定义数组

let nums:number[] = [1, 2, 3];

let nums:any[] = [1, 2, 'color'];

console.log(nums)

 

1.6其他类型

ts是js语法的超集,因此js中的基本类型,ts都支持:numberbooleanstring, symbol, null, undefined...

1.7类型推断

当我们定义变量的时候,没有定义类型,ts会根据变量赋值结果来推断数据类型,如果没有赋值,此时就定义成any

1.8元组

类似数组,只不过声明了数组中每个成员的类型

语法 let 数据:[成员1类型,成员2类型] = 数据

成员类型的个数是有限的,当我们添加其他成员的时候,其他成员的类型将这几种类型的联合类型

其他成员的类型为: 成员1类型 | 成员2类型...

如果为变量赋值的时候,成员不符合以上要求,就会抛出错误

1.9类型断言

很多时候,ts要猜测数据的类型,有时候我们可能比机器更了解该数据的类型,此时我们可以使用类型断言(有点类似数据类型转换的意思)

只能断言数据类型,不能转换数据类型

两种语法

第一种:let 数据1:类型1 = (<类型2>数据2)其他语句

第二种:let 数据1:类型1 = (数据2 as 类型2)其他语句

1.10枚举类型

枚举类型是介于数组与对象之间的一种类型

我们可以像数组一样,通过索引值访问属性名称

我们可以像对象一样,通过属性名称访问索引值

枚举类型通过enum关键字定义

语法 enum 数据 {

定义枚举个体

}

注意

1 枚举数据变量首字母大写

2 我们可以为枚举个体定义索引值,此时前面的成员索引值不变,后面成员索引值递增

 

// 定义数据

// let arr:[number, string];

let arr:[number, string, boolean];

// arr赋值

// arr = [100, 'red'];

arr = [100, 'red', false];

// 颠倒位置

// arr = ['red', 100];

// 添加新的成员数据

10 arr[5] = 200;

11 arr[4] = 'green';

12 arr[3] = true;

13 // 不能添加不在元组中的类型数据

14 // arr[6] = [];

15 // console.log(arr)

16 

17 // 定义一个字符串

18 let str:string = 'hello';

19 // let str:number = 200;

20 

21 // 获取字符串的长度

22 let strLen:number = (<string>str).length;

23 // 第二种语法

24 // let strLen:number = (str as string).length;

25 

26 // console.log(strLen)

27 

28 // 定义枚举类型

29 enum Color {

30  red,

31  green = 10,

32  blue

33 }

34 

35 // 可以像数组一样使用

36 console.log(Color[0])

37 console.log(Color[1])

38 console.log(Color[2])

39 // 可以像对象一样使用

40 console.log(Color.red)

41 console.log(Color.green)

42 console.log(Color.blue)

 

1.11函数

在js中,函数有三种定义形式:函数定义式,函数表达式,构造函数式

当我们用函数定义式定义函数的时候,在函数中的哪些位置会出现数据?

函数的参数以及函数的返回值会出现数据,所以我们要通过数据类型来约束他们

函数定义类型的语法  

function demo(arg1:type1, arg2:type2):type {}

对于函数来说,执行完毕可能有结果,可能没有结果

函数有结果,肯定是基本类型之一,我们可以定义

函数没有结果,我们就要约束为void类型

函数抛出错误,永远不会执行完毕,我们要约束成never

使用函数的时候的说明

1 为函数传递的参数类型,一定要与定义时函数参数类型一致

2 为函数传递的参数的个数,一定要与定义时函数参数的个数一致

3 如果函数的参数是可有可无的,我们可以在定义函数参数的时候,在参数后面添加?

1.12泛型

也叫泛类型,在表达式前后,让变量的类型必须一致,我们可以使用泛型

有的时候,我们输入一种数据类型,但是得到了另外一种数据类型,我们未来让输入与输出的类型统一,我们可以使用泛型

语法是:<类型>

使用泛型函数

使用泛型函数的时候,有两种方式

一种是在使用前指明类型

ickt<string>(hello)

一种是省略类型,让ts猜测(工作中常用)

ickt(hello)

1.13联合类型

我们通过|定义联合类型

数据可以是联合类型中的任意一种类型

 

// 定义函数

// 参数可有可无,添加问号

function add(num1:number, num2?:number):number {

// 如果不存在第二个参数

if (num2 === undefined) {

 return num1 + 10;

}

return num1 + num2;

}

10 

11 // 使用函数

12 // 个数不统一

13 console.log(add(10, 20, 30))

14 // 参数类型不对

15 console.log(add(10, '20'))

16 console.log(add(10, 20))

17 // 第二个参数可有可无

18 console.log(add(10))

19 

20 // 没有返回值定义成void

21 function say():void {

22  console.log('say fn')

23 }

24 say();

25 function errFn():never {

26  console.log('before error')

27  throw new Error('find a error');

28  console.log('after error')

29 }

30 // 执行函数

31 errFn();

32 

33 // 定义函数

34 function ickt(arg:any):any {

35  return 'hello ' + arg;

36 }

37 // 使用函数

38 // 输入的是字符串,得到的也是字符串

39 console.log(ickt('爱创课堂'), typeof ickt('爱创课堂'))

40 // 输入的是数字,得到的确是字符串

41 console.log(ickt(100), typeof ickt(100))

42 

43 // 我们可以定义泛型,解决上述问题

44 function ickt<T>(arg:T):T {

45  return arg;

46 }

47 

48 console.log(ickt('爱创课堂'), typeof ickt('爱创课堂'))

49 console.log(ickt(100), typeof ickt(100))

50 console.log(ickt<number>(100), typeof ickt<number>(100))

51 

52 // 联合类型

53 function ickt(arg1:number, arg2?:number):number|string {

54  if (arg2) {

55   return arg1 + arg2;

56  }

57  return 'hello ' + arg1;

58 }

59 console.log(ickt(100, 200))

60 console.log(ickt(100))

 

1.14

跟es6一样,我们也通过class关键定义类

class 类名 {}

1.14.1构造函数

我们constructor定义构造函数

构造函数中如果出现了参数,就要定义参数的类型

构造函数是没有返回值的,因此我们不能为构造函数定义返回值(构造函数是唯一一个不需要定义返回值的函数)

如果构造函数的参数可有可无,我们在参数后面添加?

1.14.2属性

我们可以在类体中直接声明属性,并且要定义类型,没有声明类型,就会猜测类型

ts中为属性赋值有两种语法

第一种在构造函数外部,直接在声明属性的时候赋值

第二种在构造函数内部,为声明的属性赋值

即使在构造函数内部赋值,我们也要在构造函数外部声明

注意:参数的类型要与属性的类型相同

赋值的时候我们可以使用构造函数的参数,如果用构造函数的参数为属性赋值,此时就实现数据由类的外部流入类的内部存储

声明的属性,如果没有被赋值,编译的时候会移除

1.14.3方法

定义方法的语法跟es6一样

方法名称(arg: type):type {}

方法中的参数要定义类型

方法的返回值要定义类型

如果方法的参数是可有可无的,我们要添加?

1.14.4关键字

面向对面语言在定义类的时候,可以使用一些关键字,实现一些功能,例如static, public, private, protected等等,ts也都支持

但是ts要编译成js语言,在jspublic, private, protected等关键字无法模拟,或者模拟成本很高,因此编译的时候忽略(很多框架用这些关键字实现了一些语法糖)

但是static关键定义的是静态属性和静态方法,js可以实现(就是对类添加),因此我们可以定义,就是在类的属性和方法前面,添加static关键字,就是静态的了,

静态的属性和方法,只能通过类来访问,实例化对象无法访问
注意:在类的外部为静态属性赋值,该静态属性也一定要在类的内部通过static关键字声明


 全套angular视频教程,请添加微信“haomei0452”



微信个人号二维码.jpg

关注微信公众号“icketang”,获取最新前端资讯,学习资料

B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg

上一篇文章: 月薪12k的零基础自学前端必备手册
下一篇文章: Web前端三大框架_angular.js 6.0(二)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>