ts 类与接口

基础

class User {
  name: string;
  constructor(name: string) {
    this.name = name
  }
  info(): string {
    return `${this.name}是谁？`
  }
}
let { clear, log, dir } = console;
let gz1 = new User("gengzhi");
log(gz1.info())

泛型(函数的复用)

function User2<T>(args: T): T {
  return args;
}
let gz2 = User2(123)
log(gz2);

public修饰符

// 一般不写，表示公开的
// 属性是对象独有的，方法是在原型上的
class User3 {
  public name: string;
  constructor(name: string) {
    this.name = name
  }
  public info(): string {
    return `${this.name}是谁？`
  }
}
const gz3 = new User3("gz3");
for (const key in gz3) {
  if (gz3.hasOwnProperty(key)) {
    console.log(key, "自身属性和方法");
  }
  console.log(key, "全部属性和方法");
}

protected修饰符

class User4 {
  protected name: string;
  constructor(name: string) {
    this.name = name
  }
  info(): string {
    return `${this.name}是谁？`
  }
}
let gz4 = new User4("gz4")
// log(gz4.name)

private修饰符

class User5 {
  private age: string;
  constructor(age: string) {
    this.age = age
  }
}
let gz5 = new User5("gz5")
// log(gz5.age)

接口

interface Article<B, C> {
  title: string
  isLock: B,
  comments: C[]
}

type CommentType = {
  content: string
  number: number
}

const gz6: Article<boolean, CommentType> = {
  title: "标题",
  isLock: true,
  comments: [{ content: "议论", number: 3 }]
}

readonly

class Axios {
  readonly site: string = "http://www.baidu.com"
}
const gz7 = new Axios()
// gz7.site = "www";

静态属性

class User8 {
  static site: string = "http://www.baidu.com"
}
const gz8 = new User8();
// log(gz8.site)
log(User8.site, "静态属性")

单例模式(只生成一个实例)

class User9 {
  private static instance: User9 | null = null
  private constructor() {
    console.log("构造函数");
  }
  static make(): User9 {
    if (User9.instance == null) {
      User9.instance = new User9()
    }
    return User9.instance;
  }
}

let instance = User9.make();
let instance2 = User9.make();
let instance3 = User9.make();
log(instance, instance2, instance3)

访问器get，set

class User10 {
  private _name: string;
  private _list: any[] = [];
  constructor(name: string, list: any[] = []) {
    this._name = name;
    this._list = list;
  }
  get name(): string {
    return this._name
  }
  set name(value) {
    this._name = value
  }
  get list(): any[] {
    this._list = this._list.map(l => l.substr(0, 3) + "str".repeat(3))
    return this._list;
  }
}
let gz10 = new User10("gz10", ["艰苦撒旦发射点", "我啊大家卡号的空间想就是i"]);
gz10.name = "100gz10"
log(gz10.list)

接口约束TS对象

interface UserInterface {
  name: string
  age: number
  info(): string
  [key: string]: any
}

let gz11: UserInterface = {
  name: "gz11",
  age: 22,
  info() {
    return "haha"
  },
  sex: "man"
}

接口约束TS函数

interface UserInterface12 {
  name: string;
  age: number;
}

let params: UserInterface12 = {
  name: "gz12",
  age: 22,
}

function User12(user: UserInterface12, isLock: boolean): UserInterface12 {
  return user;
}
User12(params, false)

class使用interface

interface userInterface13 {
  name: string;
  age: number;
  password: string;
}
class User13 {
  _user: userInterface13;
  constructor(user: userInterface13) {
    this._user = user
  }
  get user(): userInterface13 {
    return this._user;
  }
}

let gz13 = new User13({
  name: "gz13",
  age: 22,
  password: "123456"
});
log(gz13)

enum与array

enum sexType {
  BOY, GIRL
}
log(sexType.BOY);

15.接口声明合并

interface userInterface15 {
  start(): void
}
interface userInterface15 {
  end(): void
}

class Gz15 implements userInterface15 {
  start(): void {
    throw new Error("Method not implemented.");
  }
  end(): void {
    throw new Error("Method not implemented.");
  }
}

type和interface

// type 
type isAdmin = boolean;
type Sex = "boy" | 'girl'
type UserInterface16 = {
    name: string;
    age: number;
    isAdmin: isAdmin;
    sex: Sex;
    show(): void
}
interface UserInterface16 {
  name: string;
  age: number
  show(): void
  [key: string]: any
}

const gz16: UserInterface16 = {
  name: "gz16",
  age: 22,
  show: () => {
  },
}

17.type与interface区别

interface UserInterface17 {
  name: string
}
interface UserInterface18 extends UserInterface17 {
  age: number
}

class User17 implements UserInterface18 {
  age: number;
  name: string;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

let gz17 = new User17("gz17", 66)
log(gz17)

18.type 通过&完成类型合并

type user18 = {
  name: string
}

type user19 = {
  age: number
}

type user20 = user18 & user19

const gz18: user20 = { name: "gz18", age: 20 }

ts学习系列-1

ts 类与接口

完！