typescript

正清和雅 發表於 2019-9-19 16:14:00

一、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

頁: [1]

琼殿技术论坛's Archiver

typescript