typescript

正清和雅

一、typescript
1.简介：typescript是JavaScript的一个超集(语法遵循es6标准)，是微软发明的语言
ts做为js的一个语法糖，类似于css和less，sass的关系，ts相比js更加容易维护和开发，但是最后一定要转为js才能运行
ts==》Microsoft
ts=>Angular4=>Google
ts支持es6的语法，Angluar4的开发语言是ts，编译器(IDE)的支持下良好
2.安装ts环境
1）安装node.js
2)安装ts
windows：npm install -g typescript
mac:npm install -g typescript
使用命令 tsc -v 。查看版本号，出现版本号说明成功
3.ts语法编译
1）在线编译
http://www.typescriptlang.org/play/index.html
2）终端编译
cd文件夹 进入ts文件所在位置
使用tsc 命令编译：tsc xxx.ts
3）.IDE对ts强大的支持可以帮助我们直接编译
4）直接使用<script></script>中写ts语法
引入文件：
<script src='../lib/typescript.min.js'><script>
<script src='../lib/typescript.compile.min.js'><script>
直接对ts语法进行解析
5)vsCode构造ts语法编译自动监听
（1）创建项目根目录 eg：vs
（2）打开终端，进入这个文件夹
mac：cd文件夹路劲
windows：cd/d文件夹路径
鼠标放在文件夹上，右键终端打开
（3）tsc -init
将根目录初始化为自动构建目录 生成一个文件tsconfig.json
(4)打开tsconfig.json文件
rootDir：输入文件夹，配置了这个属性的文件夹里边的ts。文件都会被解析
outDir：输出文件夹，将编译好的ts文件转为js文件并放进这个文件夹
（5）在vs文件下创建目录
ts文件目录：src
js文件目录：bin
配置：
rootDir："./src",
outDir:"./bin"
在src文件夹创建文件 hello.ts
开始监听：
mac:com+shift+b
windows:ctrl+shift+b
弹出框有两个内容
监视 watch：自动监听，自动将文件转为js
构建 build：手动构建，只会构建当前有的文件
关闭监听：
windows:ctrl+c
mac:ctrl+c

4.字符串 string
1）//多行字符串
var str=`hello
world`;
console.log(str);

2）字符串模板
var a='lisi';
var getA=function(){
return 'lisi';
}
console.log(`我是${a}`);
console.log(`我是${getA()}`);

3.函数参数拆分字符串
function fun2(temp: TemplateStringsArray, name: string, age: number, sex: string) {
console.log(temp);
console.log(name);
console.log(age);
console.log(sex);
}
var myName = 'lisi';
var getAge = function () {
return 23;
}
var sex = '男';
fun2`我的名字是${myName},我今年${getAge()},我是${sex}的`;

5.指定变量和参数的类型
1）在定义变量的后面直接加上变量的类型
语法：
var a=10;a='lisi';js不报错
===》
var a:number=10;
a='lisi';//ts中报错

ts对变量有一个新的类型推断机制。在第一次声明变量并赋值时，会自行推断变量的类型，如果改变变量的值类型不同，会报语法错误，不被允许
如果不想被限制变量类型，可以使用any
var str:any='123';
str=123;

2)void 类型
一般用于函数声明，如果函数声明使用了void。则说明该函数没有返回值，如果写了返回值就会报错，
语法：
function test():void{
//函数体中不允许写return
}

3.指定函数返回值类型
语法：
function test():string{
return '123';
}
//指定函数返回值必须是string类型，否则报错
4）指定函数参数的类型
语法：
function test2(sname:string,age:number):object{
return{
name:sname,
age:age
}
}

5)通过class自定义类型，这样的好处在于实例化类的时候可以自动提示类中的属性：
语法：
class Person{
name:string,
age:number,
sex:string,
friends:object
}

var info2: Person = new Person();
info2.name = 'lisi';
info2.age = 23;
info2.sex = '男';
info2.friends = ['lisi', 'wangwu'];
console.log(info2);

6)函数参数有类型的默认值
有默认值的参数一定是尾参数
function test3(a:string,b:number,c:string='lisi'){
console.log(a,b,c);
}
test3('wangwu',34);
test3('mazi',21,'lalal');

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',23,false);//lisi 23 false

六、函数
1）rest and spread 操作符，用来操作任意数量的函数参数
function fun1(...args){
console.log(args);
}
fun1(1,2,3);
fun1(1,2,3,4,333);

2)Generator函数
用于控制函数的执行过程，手动的停止和恢复代码的执行
yield: 暂停函数执行
.next：恢复函数执行
注意：函数的执行需要将函数赋值给一个变量，然后调用next，进行一步一步的执行
//generator函数
function* fun3() {
console.log('开始');
yield '暂停';//只允许在生成器正文中使用 "yield" 表达式
var a = 10;
console.log(a);
yield;
console.log('结束');
}
// fun3()//生成器无法如此调用
var f = fun3();
f.next();//开始
f.next();//结束10
f.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指向问题

 

来源：https://www.cnblogs.com/txf-123/p/11550465.html