一、typescript
1.简介
typescript是JavaScript的一个超集(遵循es6语法),是微软发明的
ts作为js的一个语法糖,类似于css的less和sass,ts相比js更易于维护开发,但是最后还是需要编译为js
ts ==> Microsoft
ts ==> Angular4 ==> Google
ts支持es6规范,Angular4的开发语言,编译器(IDE)的支持性很好
2.安装ts环境
1) 安装node.js
2) 安装ts
mac:sudo npm install -g typescript
window:npm install -g typescript
使用命令:tsc -v,显示版本号说明安装成功
3.ts语法编译
1) 在线编译
2) 使用终端
进入文件夹 cd
使用命令tsc xxx.ts,可以将xxx.ts文件转为js文件
3) IDE对ts强大的支持可以帮我们直接编译
4) 直接在<script type='text/typescript'></script>中写ts语法,使用
<script src="../lib/typescript.min.js"></script>
<script src="../lib/typescript.compile.min.js"></script> 对ts进行编译
4.字符串string
多行字符串:
var con=`hello
word`;
console.log(con);
字符串模板:
var a="lisi";
var geta=function () {
return 'lisi';
}
console.log(`我是${a}`);
console.log(`我是${geta()}`);
拆分字符串:
function fun(temp,name,age,sex) {
console.log(temp);
console.log(name);
console.log(age);
}
var myname='lisi';
var getAge=function () {
return 23;
};
var sex='男';
fun `我的名字是${myname},今年${getAge()}岁,我是${sex}的`;
//参数1:是一个数组,保存自动拆分的字符串
5.指定变量和参数类型
1) 在定义变量时后边直接加上变量的类型
var a = 10; a = 'lisi';
==> ts
var a:number = 10; a = 'lisi';//报错
ts对变量有一个新的类型推断机制,在第一次为某个变量赋值时,自行推断这个变量是什么类型,之后在对这个变量赋值为其他类型是不被允许的
如果将变量类型改为any,就可以随便赋值
指定其他类型:
var str:string='123';
var b:boolean=true;
2) void类型
一般用于函数声明时,如果函数声明了void,就说明该函数不需要返回值,如果有返回值语法报错
语法:
function test():void{
//不可以在这里使用return
}
3) 指定函数返回值类型
function test1():string {
// return 123;//返回类型必须是字符串,否则报错
return '123';
}
4) 指定函数参数类型
function test2(name:string,age:number):object {
return {
name:name,
age:age
}
}
console.log(test2('lisi',23));
5) 通过class自定义类型,这样的好处在于实例化类的时候可以自动提示类里边的属性
class Person{
name:string;
age:number;
sex:string;
}
var info:Person=new Person();
// info=123;//语法报错
info.name='lisi';
info.age=23;
info.sex='男';
console.log(info);
6) 函数参数指定类型的默认值
带有默认值的参数一定放在尾参数
function test3(a:string,b:number,c:string='lisi') {
console.log(a,b,c);
}
test3('wangwu',23);
test3('mazi',12,'lalala');
7) 可选参数
使用问号(?)表明该参数是可选参数
注意:必选参数不能放在可选参数之后,有默认值的参数一定是尾参数
function test4(a:string,b?:number,c:boolean=true) {
console.log(a,b,c);
}
test4('lisi');//lisi undefined true
test4('lisi',23);//lisi 23 true
test4('lisi',12,false);//lisi 12 false
6.函数
1) rest and spread 操作符,用来声明任意数量的参数
function fun1(...args) {
console.log(args);
}
fun1(1,2,3,4);
fun1(1,2,3,4,333);
fun1(1);
2) Generator函数:
用于控制函数的执行过程,手动暂停和恢复代码执行
yield:暂停
.next:恢复
函数的执行需要将函数赋值给一个变量,调用next进行一步一步的执行
运行逻辑:
(1) 当程序遇到yield,暂停执行后边的操作,并将紧跟在yield后边的那个表达式作为返回值的对象的value的属性值,
(2) 下一次next方法时,继续向下执行,直到遇到下一个yield
(3) 如果没有在遇到yield,直接运行到函数结束,到return为止,并且将return后边的语句的表达式的值,作为返回对象的value的属性值
(4) 如果该函数没有return,那么返回对象的value属性值是undefined
fun5.next() 会返回一个对象,该对象中有两个属性,value,值是yield后边的内容,一个是done,布尔值,表示遍历是否结束
注意:如果Generator函数中没有yield,这个函数就变成了延缓执行的函数,调用next就会执行整个函数
3) 析构函数
通过表达式将对象或数组拆分成任意数量的变量,也就是es6的解构
4) 箭头表达式
用来声明匿名函数,消除传统的匿名函数中this指向问题