typescript
ts暂时不被支持,所以需要编译使用;ts补充了js没有的语法特性,例如类型,接口,抽象等;由于ts设计严谨,所以更适合大型项目的开发
//ts是编译检测,俗称硬绑定,编译期,编译期,编译期!三遍
//安装ts
npm i -g typescript
//创建ts文件 1.ts
//编译 编译结束后会生成对应的js文件
tsc 1.ts
//常用语法
//变量类型:number :string :boolean :any 还有两个奇怪的:null :undefined 没啥软用的属性
//指明变量类型的方法
let a:number = 1;//限制a为number类型
let b='str';//限制b为string类型
//不指明变量初始类型
let c;//不指明初始化,就可以任意赋值
c=12;//赋值成number
c='str';//赋值成string
let d:any='d';//指明类型是any,任意类型
//函数参数指定类型 除了常规的四个类型之外,还有:void声明无返回值 :never声明这个函数永远不会结束,表现为该函数报错,或者手动throw出一个Error
//指定参数a是number，b是number,默认值是6，返回值是number;如果不一致,tsc编译时会出错
function fun(a:number,b:number=6):number{
return a+b;
}
//操作数组类型 :number[] :string[] :boolean[] :any[]
let arr:number[] = [1,2,3,4];
let arr:Array=[1,2,3,4];//第二种写法
//联合声明,即可以声明多种类型
//变量
let a:(number|string)=2;//这里a可以被赋值为number或者string
//数组
let arr:(number|string)[]=[1,2,'str'];
//元组类型
let arr:[number|string]=[1,'str'];//强制数组前两位是number,string,后面向数组内push内容的类型不限制
//枚举
enum gender{a='男',b='女'};
let g:gender = gender.b;
let s ='男';
switch(s){
case g:
console.log('女');
break;
case gender.a:
console.log('男');
break;
}
//类操作,ts中 重新定义了类的写法;
class Person{
//访问修饰符 protected 自己跟子类可以访问
//访问修饰符 private 自己可以访问
//访问修饰符 public 外界也可以访问
protected name:string;//声明可以被自己跟子类访问的属性
private age:number;//声明了私有属性name是string类型
constructor(name:string, age:number){
this.name=name;
this.age=age;
}
public show():void{
console.log(`名字：${this.name}，年龄：${this.age}`);
}
}
//继staff类承Person
class Staff extends Person{
private job:string;
constructor(name:string, age:number, job:string){
super(name, age);
this.job=job;
}
//方法的权限
public show():void{
super.show();
console.log(`岗位：${this.job}`);
}
}
let s:Staff=new Staff('blue', 18, '打杂的');
s.show();
//第二种写法
class Person{
//将属性声明,参数,参数赋值给自身属性,合成一起做,只需要在参数加上修饰符即可
constructor(protected name:string,private age:number){
}
public show():void{
console.log(`名字：${this.name}，年龄：${this.age}`);
}
}
let s:Person=new Person('blue', 18);
s.show();
//declare 外部声明,用来声明一个编译期没有,运行时可能有的属性,以便编译通过
//修饰符 static 静态成员,加上static后,无需实例化即可调用的属性
//修饰符 const 只读成员,加上之后变成了不可修改的只读,
//const 与 static 不能同时使用
class Person{
public static user:string='blue';
constructor(name:string, private age:number){
//this.name=name; //?
}
}
let p:Person=new Person('blue', 18);
console.log(Person.user);
//访问器,编译时需要使用ts -t es5 1.ts 来指定编译的es版本,get set,不支持低版本js
class Person{
private _name:string;
constructor(name:string){
this._name=name;
}
//get访问器,name() 可以随便写,调用的时候调用对应的名字就好
get name():string{
return this._name;
}
//set访问器
set name(newName: string){
if(newName.length<8){
throw new Error('名字最少8位');
}else{
this._name=newName;
}
}
}
let p:Person=new Person('blue');
p.name='zhangsanhaochang';
console.log(p.name);
//高级特征:抽象、接口(这二者相比更推荐使用接口,更灵活更方便更简单)
//跟JAVA一个鸟样,老子特么为啥转前端,不就是不想写这些破东西么,现在好了,又特么回去了,还能怎么办?当然是选择原谅他.
//抽象 --> 定义抽象类
//抽象类必须实现所有抽象方法
abstract class Shape{
abstract draw(gd):void{
}
abstract area():number{
return 123;
}
abstract pointin(x:number,y:number):boolean{
return true;
}
}
class Rect extends Shape{
constructor(private w:number,private h:number){
super();
}
draw(gd):void{
gd.fillRect(0,0,this.w,this.h);
}
area():number{
return this.w*this.h;
}
pointin():boolean{
return true;
}
}
//可以定义类型
let a:Shape;
//a即可被赋值为Shape的任意实现类,
a=new Rect(400,500);
a.area();
//接口 --> 定义接口
//接口可以不实现所有函数
interface Shape{
area():number
}
class Rect implements Shape{
//接口不需要写super()
constructor(private w:number,private h:number){}
//实现接口方法
area():number{
return this.w*this.h;
}
}
let r:Shape = new Rect(100,200)