现在玩ts的前端越来越多,作为马上来临的春季招聘,前端的小伙伴你准备好了吗?ts越来越像java,更加规整,个人认为这是一个大趋势。
Typescript 介绍
1、 TypeScript 是由微软开发的一款开源的编程语言。
2、 TypeScript升级了JavaScript,遵循最新的es5和es6规范,并且还扩展了Javascript的语法譬如多态,很像java了。
3、vue3.0已经开始支持ts文件,react也支持。
4、goole支持ts,angular2.x+也是基于typescript
二、ts的安装和编译
编译
tsc --init 生成配置文件
准备工作结束,后面开始介绍语法了:typeScript中的10大数据类型
布尔类型(boolean):var isOpen:boolean=true;
数字类型(number) : var num:number=123;
字符串类型(string) : var str:string='string';
数组类型(array) : var arr1:number[]=[1,2,3];
var arr2:Array<number>=[1,2,3]
var arr3:any[]=['131214',22,true];
元组类型(tuple) : arr:[number,string]=[1,'aaa'];
枚举类型(enum) :方式1
enum Flag {success=1,error=2};
let s:Flag=Flag.success;//1
方式2
enum Flag {success,error};
let s:Flag=Flag.success;//0就是下标
任意类型(any) : var num:any=123;
num='str';
num=true;
适用场景:
var oBox:any=document.getElementById('box');
oBox.style.color='red';
null 和 undefined :定义没有赋值就是undefined,只是声明没有赋值会报错。
如图1和图2,图3的方式可以解决。
图1
图2
图3
var num:number | undefined;
var result:null;
result=null
void类型 :typescript中的void表示没有任何类型,一般用于定义方法的时候方法没有返回值
never类型:
1、never 是任何类型的子类型, 并且可以赋值给任何类型. 2、有类型是 never 的子类型或者可以复制给 never (除了 never 本身). 3、在一个没有返回值标注的函数表达式或箭头函数中, 如果函数没有 return 语句, 或者仅有表达式类型为 never 的 return 语句, 并且函数的终止点无法被执行到 (按照控制流分析), 则推导出的函数返回值类型是 never. 4、在一个明确指定了 never 返回值类型的函数中, 所有 return 语句 (如果有) 表达式的值必须为 never 类型, 且函数不应能执行到终止点。
感谢: 参考学习:https://www.itying.com:
自己总结到有道云笔记里面有更加清楚的标注方便查阅:
* Typescript 介绍
http://note.youdao.com/noteshare?id=c3e0d5810580041ade028a345519ce96&sub=E882CE350AC94C5596B146908C406274 * typeScript中的数据类型
http://note.youdao.com/noteshare?id=a07dd9a55779068d9409b79014a9a409&sub=CE3DA74B1A27412792DF9BB8F74E8E24 * typeScript中的函数
http://note.youdao.com/noteshare?id=adc64e95404f3c382c7549f05841c7b2&sub=65D365DE900049A28DD4697B61A5544A * 对象+继承
http://note.youdao.com/noteshare?id=7f82be21375761c13ccad1981510a614&sub=7856743A59934A59A1AA608AA78497F0 * 类的定义、继承、类里面的修饰符 http://note.youdao.com/noteshare?id=a4420ac729d8cc7c1eb72fc47198f00b&sub=399974DBD9FA4EC2A99548D8837CB61F * 静态属性 静态方法 抽象类多态
http://note.youdao.com/noteshare?id=efad91320514e4f21e07ec77a9bcfd7c&sub=DC3868B8459940CA884DC5B80EE25443
* typeScript中的接口
http://note.youdao.com/noteshare?id=ae4c7f13bec8e35b3fda4e326d7e7055&sub=6001FADE75904080A15395886608D366 * 可索引接口(数组,对象)+类类型接口
http://note.youdao.com/noteshare?id=aebf26ab922044a69cae082866ce8d86&sub=F73FB04DD10C4BA796173FBE40280B21
* 接口的继承、接口的扩展
http://note.youdao.com/noteshare?id=93e1dff481b8e299ee9c925e8e3a8b4a&sub=3C96456BFAA34C28BA6BB4E0B0C1E77B * 泛类
http://note.youdao.com/noteshare?id=6d9e0ec4cdb17249bf1bb11fae2e44ec&sub=B0C47B2089AC42E48C2E1BAAAD3FE9EF * 泛型接口
http://note.youdao.com/noteshare?id=49af2ba1bd6173467e7c7b844def959b&sub=F16F0C2857E347C0B8FB69522D5DEFA2