专栏首页方球typescript入门-类

typescript入门-类

类定义 class

class Car{}

实例化 new

const c = new Car()

实例属性、方法

class Car{
  // 实例属性
  color: string
  // 构造函数
  constructor(color: string) {
    // 设置实例属性
    this.color = color
  }
}


// 实例属性必须现在类中定义
class Car{
   constructor(color: string) {
    // Property 'msg' does not exist on type 'Car'.
    this.color = color
  }
}

继承 extends

class Car{
  // 实例属性
  color: string
  // 构造函数
  constructor(color: string) {
    // 设置实例属性
    this.color = color
  }
}


class MiniCar extends (Car) {


  // 子类属性
  size:number = 1.2
  
  constructor(color: string, size?:number) {
    // 父类属性
    super(color)
    this.size = size || 1.2
  }
}




const m = new MiniCar('red', 1.3)
console.log(m.size)
// 1.3

静态属性、方法

使用 static 前置标识静态属性或方法

class Car{
  
  static version:string = 'v1.0'
  static setVersion(v: string) {
    Car.version = v
  }
  
  color: string
  constructor(color: string) {
    this.color = color;
  }
}
// 静态属性、方法为了方便类无需实例化,直接调用相关属性和方法
// 静态属性、方法只存在于类定义中, 实例无法调用
console.log(Car.version)
Car.setVersion('v1.1')
console.log(Car.version)
// 1.0
// 1.1


const c = new Car('orange')
console.log(c.version)
//  Property 'version' does not exist on type 'Car'. Did you mean to access the static member 'Car.version' instead?

私用属性、方法

private

只存在于当前类内的私用属性、方法

class Car{
  // 私有属性
  private factoryInfo:string = '...info'
  // 私有方法
  private writeFactoryInfo(msg: string) {
    this.factoryInfo = msg
  }
  
  color: string
  constructor(color: string) {
    this.color = color;
  }


  readFactoryInfo() {
    // 使用属性、方法只能在类内部使用
    return this.factoryInfo
  }
}




const c = new Car('orange')
console.log(c.readFactoryInfo())


// private 私有属性不能被子类继承或直接调用
class MiniCar extends Car{
  constructor(color: string) {
    super(color)
    this.writeFactoryInfo('mini car')
    // Property 'writeFactoryInfo' is private and only accessible within class 'Car'.
  }
}

protected

于 private 类似, 但子类可继承、调用父类私有属性、函数

class Car{
  // 私有属性
  protected factoryInfo:string = '...info'
  // 私有方法
  protected writeFactoryInfo(msg: string) {
    this.factoryInfo = msg
  }
  
  color: string
  constructor(color: string) {
    this.color = color;
    this.writeFactoryInfo('prototype car')
  }




  readFactoryInfo() {
    // 使用属性、方法只能在类内部使用
    return this.factoryInfo
  }
}




class MiniCar extends Car{
  constructor(color: string) {
    super(color)
    this.writeFactoryInfo('mini car')
  }
}


const m = new MiniCar('red')


console.log(m.readFactoryInfo())
// mini car

getter、 setter

class Car{
  private _version:string = ''


  get version(): string{
    console.log('get version')
    return this._version
  }


  set version(v: string) {
    console.log('set version')
    this._version = v
  }
  
}


const c = new Car()
c.version = 'v2.0'
console.log(c.version)


// set version
// get version
// v2.0

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • typescript入门-基础类型

    copy_left
  • typescript入门-高级类型

    类型保护就是一些表达式,它们会在运行时检查以确保在某个作用域里的类型。 既是通过一次类型判断,值在当前作用域下类型为确定值

    copy_left
  • typescript 入门-工具类型

    copy_left
  • 一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

    TypeScript 是一种类型化的语言,允许你指定变量的类型,函数参数,返回的值和对象属性。

    桃翁
  • 一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

    TypeScript 是一种类型化的语言,允许你指定变量的类型,函数参数,返回的值和对象属性。

    ConardLi
  • 一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

    TypeScript 是一种类型化的语言,允许你指定变量的类型,函数参数,返回的值和对象属性。

    前端达人
  • TypeScript入门

    TypeScript 是最近比较新的一门语言,它主要用于代替 JavaScript。为什么要推出 TypeScript 来代替 JavaScript呢? 主要...

    音视频_李超
  • TypeScript 入门

    通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装

    王秀龙
  • TypeScript入门笔记(二):数据类型

    为了使编写的代码更规范,更有利于维护,增加了类型校验,写 ts 代码必须指定类型。typescript中除了es5中的常见数据类型之外还多了元组类型tuple、...

    王小婷
  • Typescript入门 原

    晓歌
  • TypeScript入门笔记

    lilugirl
  • TypeScript入门教程

    HueiFeng
  • TypeScript 快速入门

    由于这种强弱类型之分根本不是某一个权威机构的定义,一般描述强类型有更强的类型约束,而弱类型中几乎没有什么约束。

    用户3045442
  • TypeScript 入门教程

    本文转载自https://ts.xcatliu.com/,作者是:xcatliu,文档对应的Github托管地址为:typescript-tutorial

    ccf19881030
  • typescript 入门-接口

    copy_left
  • typescript入门-泛型

    copy_left
  • TypeScript入门教程(一)

    本文是TypeScript的入门文章,将分别从下面四点对TypeScript进行介绍:

    前端林子
  • 入门 TypeScript 编写 React

    Create React App 是一个官方支持的创建 React 单页应用程序的CLI,它提供了一个零配置的现代构建设置。当你使用 Create React ...

    icepy
  • 类型即正义:TypeScript 从入门到实践(一)

    JavaScript 已经占领了世界上的每一个角落,能访问网页的地方,基本上就有 JavaScript 在运作,然而 JavaScript 因为其动态、弱类型、...

    一只图雀

扫码关注云+社区

领取腾讯云代金券