ts中定义接口以及用类去实现接口（新手重点）

接口

1.定义接口

interface Person {
  name: string;
  age: number;
}
let p1: Person = {
  name: "剑非出我心",
  age: 18,
};
console.log(p1);

2.接口中的属性

1.可选属性

name后面+？变成可选属性

2.只读属性 在name （属性）前面添加readonly 不能修改

在以下例子中 可选属性可只读属性不做为例子讲解：字面理解即可。

3.使用接口定义函数数据类型

interface fn {
  (m: string): void;
}
let f1: fn = function (m): void {
  console.log("Hello World", m);
};
f1("Good Night");

interface fn1{
    (m:string,n:number):string
}
let f2:fn1 = (m,n)=>{
return `${m}永远${n}`
}
console.log(f2("剑非出我心",18))

4.接口中使用函数

interface newArr{
    [name:number]:string
}
interface Say{
    ():string
}
interface myself{
    name:string,
    age:number,
    say:Say,
    like:newArr
}
let mine:myself={
    name:"剑非出我心",
    age:18,
    say():string{
        return `${this.name}是一只程序猿`
    },
    like:["打篮球","写程序"]
}
console.log(mine)
console.log(mine.say())

5. 使用接口定义数组数据类型

统称为可索引接口 name是固定写法

数组类型

interface newArr{
    [name:number]:string
}
let arr1 = ["钢铁侠","绿巨人","雷神"]
console.log(arr1[1])
let arr2:newArr = ["钢铁侠","绿巨人","雷神"]
console.log(arr[1])

同样对象也是一样的。

interface newObj{
    [name:string]:string
}
let obj = {
    name:"剑非出我心",
    age:18
}
obj["name"]

接口的继承 要通过关键字 extends 实现

interface me{
    name:string,
    age:number,
    say():string
}

interface honey extends me{
    love:Array<string>
    play():any
}
let swordfly:honey={
    love:['写程序','打篮球'],
    play(){
        return `夜晚写代码`
    },
    name:"剑非出我心",
    age:18,
    say(){
        return `${this.name}喜欢${this.love[0]}`
    }
}
console.log(swordfly.say())

类

这里我们先说一下普通类

class swordfly{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    say():string{
        return `${this.name}今年${this.age}`
    }
}
let myself = new swordfly("剑非出我心",18)
console.log(myself)
console.log(myself.say())

类的属性

1. 共有属性 public（默认）

2. 受保护得属性protected特点 在当前以及子类中可以访问，当实例化不能访问

3. private 私有属性 特点 只能在自身类内部访问 实例化无法访问 包括子类父类

class Animal {
  king: string;
  sex: string;
  constructor(king: string, sex: string) {
    this.king = king;
    this.sex = sex;
  }
  say(): string {
    return `性别是${this.sex}`;
  }
}
class dog extends Animal {
  leg: number;
  protected name: string;
  constructor(king: string, sex: string, leg: number, name: string) {
    super(king, sex);
    this.leg = leg;
    this.name = name;
  }
  run(): string {
    return `${this.name}在跑`;
  }
}
let huang = new dog("哺乳动物", "雄性", 4, "小黄");
console.log(huang);
console.log(huang.name) //-->报错

4.静态属性 static 加在类名上的属性 实例化对象无法访问 类名.静态属性

静态方法中只能访问静态属性，不能访问实例属性

class swordfly {
    static name1: string = "剑非出我心";
    age: number;
    constructor(name: string, age: number) {
        swordfly.name1 = name;
      this.age = age;
    }
    static say(): string {
      return `${this.name1} forever befault`;
    }
  }
  let myself = new swordfly("剑非出我心", 18);
  console.log(swordfly.name1);

类继承接口

interface swordfly{
    faceValue:string
    height:number
    say:()=>string
}
class myself implements swordfly{
    name:string = "剑非出我心"
    faceValue:string
    height:number
    constructor(m:string,n:number){
        this.faceValue = m
        this.height = n
    }
    say():string{
        return `Hello World`
    }
}

let mine = new myself('今年18',180)
console.log(mine)
console.log(mine.say())

抽象类 一般不能被实例化

1.抽象类不能被实例化

2.抽象类一般作为基类使用，被子类继承

3.抽象类中得抽象方法 abstract 不能再抽象类中具体实现

而是在继承的派生类(子类)中去实现

abstract class swordfly{
    name:string
    like:string
    constructor(name:string,like:string){
        this.name = name
        this.like = like
    }
    abstract eat():string
}
class myself extends swordfly{
    relation:string;
    constructor(name:string,like:string,relation:string){
        super(name,like)
        this.relation = relation
    }
    say():string{
        return `你好世界，我是${this.name}，我喜欢${this.like}`
    }
    //抽象方法必须在子类中实现
    eat():string{
        return `喜欢吃甜食`
    }
}
let mine =new myself("剑非出我心","打篮球","兄弟")
console.log(mine)
console.log(mine.say())

需要注意的是，抽象类的方法必须在子类中去实现，否则不符合ts标准语言

课外的一个小知识

interface my{
    x:number;
    y:number;
}
interface your{
    x:number;
    y:number;
    z:number
}
let my:my={
    x:0,
    y:10
}
let your:your={
    x:0,
    y:10,
    z:20
}
function somefun(we:my){
    console.log(we)
}
somefun(my) //完全可以匹配
somefun(your) //可以有额外的信息
somefun({x:0}) //缺少属性y