一、什么是TypeScript
TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。
TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。
TypeScript的特点:
1、所有js代码、对象和库都可以应用于ts。
2、ts提供了强大的类型系统,静态类型的检查能力
3、丰富了class的扩展功能(接口、抽象类)
4、添加了系统级设计能力
TypeScript与JavaScript的区别:
JavaScript | TypeScript |
运行时类型 | 静态类型 |
程序运行时类型检查 | 编译期类型检查 |
开发环境无法提供帮助 | 开发环境提供丰富的信息 |
需要大量测试,保证覆盖率 | 大部分由语言自身检查 |
最基本的class支持 | 完整的class支持 |
无系统级设计能力 | 完备的系统级设计能力 |
文档、注释 | interface接口规范 |
人力控制 | abstrace抽象类 |
二、TypeScript的使用
1、TypeScript的使用
1)、下载:
npm i -g typescript
2)、编译:
tsc ts 文件名
3)、执行命令后会生成对应的一个js文件
2、typescript语法
1)、数据类型
String类型
let name:string = "guoxinan"
Boolean类型
let isLogin:boolean = true
Number类型
let num:number = 10
Array类型
let arr:Array<number> = [1,2,3]
let arr:number[] = [1,2,3]
let arr:Array<string> = ["你好","15"]
let arr:string[] = ["dig","你好","15"]
Enums(枚举)类型
enum Sex { male, female}
let zhangsanSex:Sex = Sex.female;
console.log(zhangsanSex);
Any类型
允许任何类型的变量
void类型(无类型)
function hello():void
{
console.log("hello world");
// return 666;
}
三、函数
1、函数定义
function add(x:number, y:number):number {
return x+y;
}
let add2:(x:number,y:number)=>number =function (x,y) {
return x+y;
}
可选参数和默认参数:
参数后?表示:这个参数是可选的
参数后=表示:它的默认值
传undefined,相当于使用默认值
function buildName(firstName="doubleyong", lastName?:string) :void{
console.log(lastName ? firstName+lastName : firstName );
}
let res = buildName(undefined,"哈哈");
四、类
1、es5、es6类
function student(name,age){
this.name = name;
this.age = age;
this.homework = funciton(){
console.log("do...")
}
}
var zsan = new student('张三', 18)
class student{
constrctor(name,age){
this.name = name;
this.age = age;
}
homework(){
}
}
class student{
// 修饰符 public , private , static ,protected
name:string; //这个是对this.name进行类型定义
age:number; //this.age的类型定义
sex:string;
constructor(name:string,age:number) {
this.name = name;
this.age = age;
}
homework():void{
console.log("do homework...")
}
}
static静态的属性和方法,不是实例对象去访问的,而是直接通过类名去调用。
2、类的继承(extends)
示例:
class Person{
name:string;
age:number;
constructor(name:string,age:number) {
this.name = name;
this.age = age;
}
eat(){
console.log("吃饭");
}
}
class Student extends Person{
stuNo: string;
constructor(name:string,age:number,stuNo:string) {
super(name,age);
this.stuNo = stuNo;
}
// eat(){
// console.log("吃食堂");
// }
}
let zhangsan = new Student("zhangsan",19,"007");
console.log(zhangsan);
五、存取器(getters / setters)
版本问题,建议先使用前执行命令:tsc greeter.ts -t es5
a=?
if(a===1 && a===2 && a===3) 结果为true
return {
xxx:function
xxx: 4
xxx: "xxx"
}
return {}
六、接口
接口的定义就只是定义不实现
interface 接口名称{
属性:类型
}
接口可以作为参数:
interface LabelValue{
label: string,
age:number,
add: (x:number,y:number)=>number
}
function print(labelObj : LabelValue) {
}