ts学习系列-1

·  阅读 55
ts学习系列-1

ts 类与接口

  1. 基础
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())
复制代码
  1. 泛型(函数的复用)
function User2<T>(args: T): T {
  return args;
}
let gz2 = User2(123)
log(gz2);
复制代码
  1. 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, "全部属性和方法");
}
复制代码
  1. 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)
复制代码
  1. private修饰符
class User5 {
  private age: string;
  constructor(age: string) {
    this.age = age
  }
}
let gz5 = new User5("gz5")
// log(gz5.age)
复制代码
  1. 接口
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 }]
}
复制代码
  1. readonly
class Axios {
  readonly site: string = "http://www.baidu.com"
}
const gz7 = new Axios()
// gz7.site = "www";
复制代码
  1. 静态属性
class User8 {
  static site: string = "http://www.baidu.com"
}
const gz8 = new User8();
// log(gz8.site)
log(User8.site, "静态属性")
复制代码
  1. 单例模式(只生成一个实例)
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)
复制代码
  1. 访问器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)
复制代码
  1. 接口约束TS对象
interface UserInterface {
  name: string
  age: number
  info(): string
  [key: string]: any
}

let gz11: UserInterface = {
  name: "gz11",
  age: 22,
  info() {
    return "haha"
  },
  sex: "man"
}
复制代码
  1. 接口约束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)
复制代码
  1. 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)
复制代码
  1. 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.");
  }
}
复制代码
  1. 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 }
复制代码

完!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改