Html5web全栈前端开发_angular框架
一、Typescript
typescript简称ts,是js语法的超集,很多js新的语法就借鉴了ts语法。ts是由微软团队维护的
1.1 TS简介
1.1.1 Github地址
https://github.com/Microsoft/typescript
在过去,js的出现是为了解决页面中的一些简单交互,因此js被设计非常简单,被很多开发者接受
js特点
弱类型:定义变量没有具体的类型,可以存储任何类型的数据
动态的:变量存储的数据需要开辟多少内存空间,不是在定义时候说的算,而是运行时候动态开辟的
...
由于js是弱类型的,因此变量存储的是什么样式的数据,需要多少的内容空间,我们在定义的时候无法获知,只能在js运行的时候,动态的分配,所以js运行的时候,一边处理业务逻辑,一边分配内存空间,对于小型项目来说,运行是临时分配空间的性能消耗是可以接受的,在大型项目中,这种消耗是无法接受的。所以在一些强类型语言中,为变量在定义的时候指明类型,这样运行前就可以针对变量的类型分配内存空间,这样在程序运行的时候就不需要分配空间了,可以减少不必要的资源消耗,所以ts是一个强类型语言
在大型项目中,为了提高代码可维护性,我们通常采用面向对象编程方式,但是在面向对象编程中,我们势必要使用类,继承,接口,私有属性,共有属性等等,但是这些关键字,诸如:class,extends, implement, interface, private, public等等js都不支持,但是js为了实现这些功能,自身模拟了这些功能,但是为了模拟这些功能势必会产生一些不必要的开销,在大型项目中,这些开销是无法接受的。所以TS基于面向对象编程方式,实现了这些关键字。
... ts语法着眼于未来与大型项目。
遗憾的是,这些功能并没有一个浏览器实现,也没有一个浏览器宣称要实现(并且IE浏览器都没有实现),所以我们就要将其编译成js语言(ES3.1版本或者是ES5版本)。
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再执行也需要时间,因此需要很多时间,不适合在浏览器端编译。
1 <!-- 创建ts运行环境 --> 2 <script type="text/typescript"> 3 // 定义ts语法了 4 var color:string = 'red'; 5 var hasChoose:boolean = true; 6 var num = 100; 7 // ts根据赋值,猜测num类型是number类型,因此就不能在赋值其他类型 8 // num = 'red'; 9 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
1 // 定义数组 2 let nums:number[] = [1, 2, 3]; 3 let nums:any[] = [1, 2, 'color']; 4 console.log(nums) |
1.6其他类型
ts是js语法的超集,因此js中的基本类型,ts都支持:number,boolean,string, 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 我们可以为枚举个体定义索引值,此时前面的成员索引值不变,后面成员索引值递增
1 // 定义数据 2 // let arr:[number, string]; 3 let arr:[number, string, boolean]; 4 // 为arr赋值 5 // arr = [100, 'red']; 6 arr = [100, 'red', false]; 7 // 颠倒位置 8 // arr = ['red', 100]; 9 // 添加新的成员数据 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联合类型
我们通过|定义联合类型
数据可以是联合类型中的任意一种类型
1 // 定义函数 2 // 参数可有可无,添加问号 3 function add(num1:number, num2?:number):number { 4 // 如果不存在第二个参数 5 if (num2 === undefined) { 6 return num1 + 10; 7 } 8 return num1 + num2; 9 } 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语言,在js中public, private, protected等关键字无法模拟,或者模拟成本很高,因此编译的时候忽略(很多框架用这些关键字实现了一些语法糖)
但是static关键定义的是静态属性和静态方法,js可以实现(就是对类添加),因此我们可以定义,就是在类的属性和方法前面,添加static关键字,就是静态的了,
静态的属性和方法,只能通过类来访问,实例化对象无法访问
注意:在类的外部为静态属性赋值,该静态属性也一定要在类的内部通过static关键字声明
Html5web全栈前端开发_angular框架的更多相关文章
- 基于NodeJS的全栈式开发
前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的 NodeJS,试 ...
- (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...
- 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...
- 大数据全栈式开发语言 – Python
前段时间,ThoughtWorks在深圳举办一次社区活动上,有一个演讲主题叫做“Fullstack JavaScript”,是关于用JavaScript进行前端.服务器端,甚至数据库(MongoDB) ...
- 为什么说Python 是大数据全栈式开发语言
欢迎大家访问我的个人网站<刘江的博客和教程>:www.liujiangblog.com 主要分享Python 及Django教程以及相关的博客 交流QQ群:453131687 原文链接 h ...
- vuejs、eggjs全栈式开发设备管理系统
vuejs.eggjs全栈式开发简单设备管理系统 业余时间用eggjs.vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据至web端实时展现,包含设备参数分析.发送设备报警等模块.收获还是 ...
- vuejs、eggjs、mqtt全栈式开发设备管理系统
vuejs.eggjs.mqtt全栈式开发简单设备管理系统 业余时间用eggjs.vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据至web端实时展现,包含设备参数分析.发送设备报警等模块 ...
- 基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们 ...
- 从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js
从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js /************************************************************* ...
随机推荐
- hadoop之文件管理基本操作
# 格式化hdfs hadoop namenode -format # 查看hadoop下的文件夹 hadoop fs -ls # 创建hdfs文件夹 hadoop fs -mkdir /user/i ...
- shell多线程
a='a1' b='b1' c='c1' d='d1' e='e1' ARR=($a $b $c $d $e) rd=`date +%N` for i in ${ARR[*]} do { ;>& ...
- iOS登录及token的业务逻辑(没怎么用过,看各种文章总结)
http:是短连接. 服务器如何判断当前用户是否登录? // 1. 如果是即时通信类:长连接. // 如何保证服务器跟客户端保持长连接状态? // "心跳包" 用来检测用户是否在线 ...
- vue history 模式打包部署在域名的二级目录的配置指南
最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash ...
- 火眼推出Windows免费渗透测试套件,包含140多款工具
火眼推出Windows免费渗透测试套件,包含140多款工具 2019年3月28日,火眼发布了一个包含超过140个开源Windows渗透工具包,红队渗透测试员和蓝队防御人员均拥有了顶级侦察与漏洞利用程序 ...
- 【小记整理】mybatis配置多个扫描路径写法
百度得到,但是很乱,稍微整理下: 最近拆项目,遇到个小问题,稍微记录下: <!-- spring和MyBatis完美整合,不需要mybatis的配置映射文件 --> <bean id ...
- 基于STM32之UART串口通信协议(一)详解
一.前言 1.简介 写的这篇博客,是为了简单讲解一下UART通信协议,以及UART能够实现的一些功能,还有有关使用STM32CubeMX来配置芯片的一些操作,在后面我会以我使用的STM32F429开发 ...
- zabbix自定义监控项数据类型错误
问题描述 监控cpu使用率,脚本获取的值是浮点型 zabbix创建监控项时没有选数据类型,导致监控数据有问题. 查看 zabbix-server 日志: ::203016.768 error rea ...
- JavaScript的数据类型及其检测
一.什么是数据类型 1.基本类型 值是不可改变的 var name = 'java'; name.toUpperCase(); // 输出 'JAVA' console.log(name); // 输 ...
- Web安全深度剖析
Web安全深度剖析 链接:https://pan.baidu.com/s/15NulgWNzQ2JPCdn9q1jE-g 提取码:6y83 Web安全深度剖析>总结了当前流行的高危漏洞的形 ...