学习TS的总结
- 在如今的编写网页中,大都使用TS。TS作为JS的超集,功能比JS更加齐全,可以进行纯JS的编写,也可以给JS添加特定的语言扩展,让网页更加动态。
1.基本语法
- 同JS一样,TS也要区分大小写;
- TS会忽略程序中出现的空格、制表符和换行符;
- 单行注释:
//
;多行注释/**/
; - TS的数据类型及其他们对应的关键字如下:
数据类型 | 关键字 |
---|---|
任何类型 | any |
数字类型 | number |
字符串类型 | string |
布尔类型 | boolean |
数组类型 | 无 |
元组 | 无 |
枚举 | enum |
void | void |
null | null |
undefined | undefined |
never | never |
-
变量
-
声明:
与JS的var
关键字不一样,TS采用let
或const
申明变量,并且在后面加上类型说明,例如:let name: string = 'Jerry';
-
命名规则:
只能出现数字、字母、下划线、$、且不能以数字开头,可采用驼峰命名法。
-
-
运算符(选取几个例子):算数运算符:
+ - * /
,赋值运算符:= += -=
,关系运算符:== != > <
,位运算符:& | ^ ~ <<
,逻辑运算符:&& ||
,三元运算符:?
,类型运算符:type of
,字符串运算符:+
;
2.函数
TS是由JS发展过来的,在众多语法方面和JS大致相同,因此:
-
函数的定义,大致的格式如下:
function functionname() { //代码块 }
-
函数的调用,大致格式如下:
functionname();
-
在调用函数时,可以传递参数,用
,
隔开; -
可选参数,可用
?
代替,可选参数必须跟在必需参数后面; -
代码块加入
return
语句说明其有返回值;
3.对象
-
对象的创建
1.先定义一个接口,例如:Student:
interface Student{ name:string; sex:string; }
2.接着创建一个对象,例如:stu:
let stu : Student = { name:'yyds', sex:'man' }//此处的属性个数要和接口的对应,不能多也不能少
-
若要有缺少可以在属性定义的后面添加
?
-
或者直接使用字符定义一个新对象,和JS一致,例如:
var objectname = { //属性和方法; }
-
对象方法:其调用方式与JS一致,此处不再详细描述。
4.数组
-
数组的定义
-
第一种方法:
var arrayname[:datatype]; arrayname = [data1,data2,data3];
-
第二种方法:
var arrayname:number[] = [1,11,111]
-
第三种方法:
var arrayname:Array <number> = [1,11,111]
-
第四种方法:
let arrayname:[number,string] = [1,'yyds yyd yy s']
-
5.解构
将对象、数组中的元素拆分到指定变量中,以方便使用
-
解构数组
-
解构赋值
let data = [1,11,111]; let [first,second,third] = data; let first = data[0]; let second = data[1]; let third = data[2];
-
作用于函数参数
function functionname ([first,second,third]:[number,number,number]) { console.log(first); console.log(second); console.log(third); } functionname(data);
-
-
解构对象
-
解构赋值
let str = { a:"i" b:"am" c:"yyds" }; let {b,c} = str;
-
指定类型
let {b,c}:{b:string,c:string} = str;
-
6.语句
-
if…else语句
if(condition) { //当条件为true时执行的代码 } else { //当条件不为true时执行的代码 }
-
switch语句
switch(n) { case 1 : //执行代码块1 break;//阻止代码自动向下一个case执行 case 2 : //执行代码块2 break; default: //匹配不存在时做的事情 }
-
for循环
for (代码块开始前执行的语句;循环的条件;代码块执行后的执行语句) { //代码块 }
-
while循环
while(条件) { //代码块 } while的变体 do { //代码块 } while(条件);
-
- break和continue语句
- break用于跳出循环;
- continue中断当前的循环中的迭代,然后继续循环下一个迭代;
7.Map对象
-
Map对象保存键值对,并且能记住键的原始插入顺序。
-
Map的创建和初始化:
let mapname = new Map(); let mapname = new Map( [ ["key1","value1"], ["key2","value2"], ] )
-
相关函数:
- map.clear():移除 Map 对象的所有键/值对;
- map.set():设置键值对,返回该 Map 对象;
- map.get(): 返回键对应的值;
- map.has():用于判断 Map 中是否包含键对应的值;
- map.delete():删除 Map 中的元素;
- map.size :返回 Map 对象键/值对的数量;
- map.keys():返回一个 Iterator 对象;
- map.values():返回一个新的Iterator对象.
8.TS框架Angular
-
在此阶段,首先需要完成Angular的环境配置,然后从基本的英雄之旅的教程,一步一步熟悉掌握此框架;
-
英雄之旅的教程包含:
- 创建项目;
- 英雄编辑器;
- 显示列表;
- 创建特性组件;
- 添加服务;
- 添加导航;
- 从服务器获取数据。
详细的放入以下链接Angular英雄之旅.