基础
interface obj{
id:number,
name:string|null,
checked?:boolean,
fun?:()=>string
}
var userObj:obj={
id:1,
name:null
}
for(var i in userObj){
console.log(`userObj[${i}]=${(userObj as any)[i]}`)
// console.log(`userObj[${i}]=${(<any>userObj)[i]}`)// 类型断言,两种都可以
}
联合类型
interface obj{
fun?:(()=>string)|string|string[];
}
var userObj:obj={
fun:["ss"],
}
console.log(userObj.fun)
userObj={
fun:()=>{return "111"}
}
console.log((userObj as any).fun())
继承
单继承
interface CYC{
x:number;
y:string
}
interface Child extends CYC{
z?:boolean
}
var arr:Child[]=[{x:1,y:"2"},{x:2,y:"3",z:true}]
for(var i in arr){
console.log(`arr[${i}]=${arr[i].z}`)
}
interface CYC{
x:number;
y:string
}
interface Child extends CYC{
z?:boolean
}
var obj=<Child>{};
obj.x=1;
obj.y="2";
obj.z=true;
多继承
interface CYC{
x:number
}
interface BOX{
y:number
}
interface Child extends CYC,BOX{
z?:boolean
}
var obj=<Child>{};
obj.x=1;
obj.y=3;
obj.z=true;
console.log(obj);
只读readonly
interface cyc{
readonly a:string
b:number
}
var obj:cyc={a:"4",b:5}
console.log(obj.a);
// obj.a=5;//会报错
obj.b=6
console.log(obj.b)
数组属性
interface log{
date:string,
log:string
}
interface params{
id:number,
name:string,
arr:Array<log>
}
var obj:params={
id:1,
name:"你好",
arr:[{date:"2025/06/04",log:"迟到"}]
}
console.log(obj)
console.log(<string>obj.arr[0].date)
任意类型属性
格式 [propName:string]:any,
[key:string]:any;//代表可以添加添加任意数量,任意类型参数 那个key你可以改成paramsName啊,随便命名,不重要
interface cyc{
id:number;
[key:string]:any;//代表可以添加添加任意数量,任意类型参数 那个key你可以改成paramsName啊,随便命名,不重要
}
var obj:cyc={
id:1,
name:"小白",
name1:"小白1"
}
console.log(obj)
console.log(obj.name1)
类型断言绕过接口必填项和未声明项
interface cyc{
id:number;
}
var obj:cyc={width:10} as any;
console.log(obj)
接口描述函数类型
这里注意,我因为只有一个变量,才id=>,如果你有2个变量你就得(id,name)=>
interface cyc{
(id:number):number;
}
var search:cyc=id=>{
return id*2;
}
console.log(search(3))
接口声明数组
interface cyc{
[key:number]:string,
length:number//这里要定义,不然数组的默认属性length读不到
}
var a:cyc=["2","bbb","3"]
console.log(a);
console.log(a.length);
类类型
interface cyc{
ids:string;
log():void;
}
class BOX implements cyc{
ids:string;
log(){
console.log(this.ids);
};
constructor(idArr:Array<number>){
this.ids=idArr.join(",")
}
}
var arr:Array<number>=[1,2,34,5];
var box=new BOX(arr);
box.log()
利用接口返回类的实例。
var a=new A(), 这个new A()是获取A的实例,以下案例实现的是怎么把new抽出来公共。全靠你的悟性了,孩子。
interface a{
new (x:number):b;
}
interface b{
tick():void;
hover():void;
}
function create(A:a,x:number):b{
return new A(x);
}
class c implements b{
constructor(x:number){
}
tick(): void {
console.log("C")
}
hover():void{
console.log("D")
}
}
var ss=create(c,1);
ss.tick();
ss.hover();
混合类型
interface cyc{
(start:number):string;
interval:number;
reset():void;
}
function box():cyc{
let a=<cyc>function(start:number){ console.log(start);}
a.interval=123;
a.reset=function(){
console.log(this)
debugger
};
return a;
}
let c=box();
c(10);
c.interval=5;
c.reset()
debugger
接口继承类
class cyc{
public state:number=1;
}
interface box extends cyc{
getSome():void;
}
class A extends cyc implements box{
getSome() {
console.log(this.state);
}
}
var a=new A();
a.getSome();