TypeScript中的类 Class

news2025/1/12 3:58:42

公共属性的修饰符：

  • public：公共，默认修饰符，外部和内部都能使用
  • private：私有的，只能内部类用，外部不能读写
  • protected：当前类和派生类(子类)可访问
  • readonly:外部只能读不能写
  • static：静态属性或静态方法

类的定义

class User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

const u1 = new User("u1", 19);
const u2 = new User("u2", 20);
console.log(u1.getInfo()); // u1的年龄是19
console.log(u2.getInfo()); // u2的年龄是20

const users: User[] = [u1, u2];
console.log(users);

注意：

如果类中没有constructor ，则其中的属性需要初始化值，否则爆红

 如果类中有constructor ，但参数中没有给定义的属性赋值，也会爆红

class Person {
  name: string;
  age: number; //属性“age”没有初始化表达式，且未在构造函数中明确赋值

  constructor(name: string) {
    this.name = name;
  }
}

 public

  • 公共，默认修饰符，外部和内部都能使用

 

class User {
  public name: string;
  public age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  public getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

const u1 = new User("u1", 19);
console.log("u1:", u1);

u1.name = "张三";
console.log("u1_1:", u1);
  • 父类的 public， 子类只能设置为 public

class Person {
  public name: string = "";
  age: number = 0;
  public getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

// 类“User”错误扩展基类“Person”。
// 属性“getInfo”在类型“Person”中是私有属性，但在类型“User”中不是
class User extends Person {
  constructor(name: string) {
    super();
    this.name = name;
  }
  private getInfo = (): string => {
    return `姓名：${this.name}`;
  };
}

protected

protected 修饰符指受保护的，只允许在当前类与子类使用，不允许在类的外部使用

class User {
  protected name: string;
  public age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  public getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`; // 内部是可以访问 protected 的
  };
}

const u1 = new User("u1", 19);

u1.name = "张三"; // 属性“name”受保护，只能在类“User”及其子类中访问
console.log(u1.getInfo()); // 张三的年龄是19。虽然爆红，但依然能改
  • 父类的 protected ，子类可以修改为 protected 或 public，但不允许修改为private

class Person {
  name: string = "";
  age: number = 0;
  protected getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

// 类“User”错误扩展基类“Person”。
// 属性“getInfo”在类型“Person”中是私有属性，但在类型“User”中不是
class User extends Person {
  private getInfo = (): string => {
    return `姓名：${this.name}`;
  };
}

private

private 修饰符指私有的，不允许在子类与类的外部使用

  • 子类不能访问父类的 private 属性或方法

class Person {
  protected name: string = "";
  private age: number = 22;
  protected info = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

class User extends Person {
  constructor(name: string, age: number) {
    super();
    this.name = name;
    this.age = age; // 子类不能访问父类的 private 属性或方法
  }
  public getInfo = (): string => {
    return this.info();
  };
}

const u1 = new User("u1", 19);
console.log(u1.getInfo()); // u1的年龄是19
  • 父类声明的 private 属性或方法，子类不允许覆盖

class Person {
  protected name: string = "";
  private age: number = 0;
  private getInfo = (): string => {
    return `${this.name}的年龄是${this.age}`;
  };
}

// 类“User”错误扩展基类“Person”。
// 属性“getInfo”在类型“Person”中是私有属性，但在类型“User”中不是
class User extends Person {
  constructor(name: string, age: number) {
    super();
    this.name = name;
  }
  public getInfo = (): string => {
    return `姓名：${this.name}`;
  };
}

readonly

readonly 将属性定义为只读，不允许在类的内部与外部进行修改

class User {
  name: string;
  readonly sex: string;

  constructor(name: string, sex: string) {
    this.name = name;
    this.sex = sex;
  }
  test() {
    this.sex = "男"; //无法为“sex”赋值，因为它是只读属性
  }
}

const u1 = new User("u1", "男");
u1.sex = "保密"; // 无法为“sex”赋值，因为它是只读属性

constructor

构造函数是初始化实例参数使用的

我们可以在构造函数 constructor 中定义属性，这样就不用在类中声明属性了，可以简化代码量

必须要在属性前加上 public、private、readonly 等修饰符才有效

 

class User {
  constructor(public name: string) {}
  getInfo = () => {
    return this.name;
  };
}
const u1 = new User("u1");
console.log(u1.getInfo()); // u1

 static

static 用于定义静态属性或方法

 

class User {
  static sex: string = "保密";

  static getUserInfo() {
    return "性别是" + User.sex;
  }
}
console.log(User.sex); // 保密
console.log(User.getUserInfo()); // 性别是保密

 get/set

使用 get 与 set 访问器可以动态设置和获取属性

class User {
  constructor(public _name: string) {}

  public get name() {
    return this._name;
  }

  public set name(value: string) {
    this._name = value;
  }
}

const u1 = new User("u1");

console.log(u1.name); // u1
u1.name = "张三";
console.log(u1.name); // 张三

类实现接口  implements

类实现单个接口

interface IPerson {
  eat: () => void;
}

// 类实现接口
class p implements IPerson {
  eat() {
    console.log("吃饭");
  }
}

 类实现多个接口

interface IPerson {
  eat: () => void;
}

interface IPerson2 {
  run: () => void;
}

// 正常
class p implements IPerson, IPerson2 {
  eat() {
    console.log("吃饭");
  }
  run() {
    console.log("跑步");
  }
}

// 异常
class p2 implements IPerson, IPerson2 {
  eat() {
    console.log("吃饭");
  }
}

 类同时继承父类, 又实现单个或多个接口

interface IPerson {
  eat: () => void;
}

interface IPerson2 {
  run: () => void;
}

class User {}

// 正常
class p extends User implements IPerson, IPerson2 {
  eat() {
    console.log("吃饭");
  }
  run() {
    console.log("跑步");
  }
}

// 异常
class p2 extends User implements IPerson, IPerson2 {
  eat() {
    console.log("吃饭");
  }
}

类实现type

类既可以实现接口，也可以实现type

interface A {
  name: string;
  add: () => void
}
type B = {
  age: number,
  add: () => void
}

class C implements A {
  name = 'xx'
  add() {
    console.log('类实现接口')
  }
}

class D implements B {
  age = 20
  add() {
    console.log('类实现type')
  }
}

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/127273.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

快速上手 Docker 最新 WebAssembly 技术预览版

快速上手 Docker 最新 WebAssembly 技术预览版

本文为译文，原文见：https://nigelpoulton.com/getting-started-with-docker-and-wasm/ 轻松体验 Docker 和 Wasm ——编写一个应用，将其编译为 Wasm，将其打包为 OCI 镜像，将之存储在 Docker Hub 中，使用 Do…
阅读更多...
4 JMeter 参数化常用方式

4 JMeter 参数化常用方式

文章目录2.4 JMeter 参数化常用方式2.4.1 用户定义的变量2.4.2 用户参数2.4.3 CSV数据文件设置 CSV Data Set Config2.4.4 函数(_counter)2.4 JMeter 参数化常用方式 2.4.1 用户定义的变量 应用场景：全局参数 添加方式： 测试计划->线程组->配置…
阅读更多...
【AcWing每日一题】4366. 上课睡觉

【AcWing每日一题】4366. 上课睡觉

有 N 堆石子，每堆的石子数量分别为 a1,a2,…,aN。 你可以对石子堆进行合并操作，将两个相邻的石子堆合并为一个石子堆，例如，如果 a[1,2,3,4,5]，合并第 2,3 堆石子，则石子堆集合变为 a[1,5,4,5]。 我们希望…
阅读更多...
LeetCodeday02

LeetCodeday02

977.有序数组的平方 给你一个按 非递减顺序 排序的整数数组 nums，返回 每个数字的平方 组成的新数组，要求也按 非递减顺序 排序。 示例 1： 输入：nums [-4,-1,0,3,10] 输出：[0,1,9,16,100] 解释：平方后&am…
阅读更多...
Java开发学习(三十五)----SpringBoot快速入门及起步依赖解析

Java开发学习(三十五)----SpringBoot快速入门及起步依赖解析

一、SpringBoot简介 SpringBoot 是由 Pivotal 团队提供的全新框架，其设计目的是用来简化 Spring 应用的初始搭建以及开发过程。 使用了 Spring 框架后已经简化了我们的开发。而 SpringBoot 又是对 Spring 开发进行简化的，可想而知 SpringBoot 使用的简…
阅读更多...
做报表要用什么插件？

做报表要用什么插件？

Excel 作为大家最熟悉的报表工具，很多表哥表姐每天都在使用，为了加强 Excel 的报表功能，市面上有非常多的 Excel 增强插件，为 Excel 增加了千奇百怪的能力。今天给大家介绍一款专门用来做中国式复杂报表的Excel 插件：思…
阅读更多...
【不一样的递归大法】

【不一样的递归大法】

🎁递归🎅递归🦌定义🎅何时用递归：递归三板斧🦌递归递归🦌递归大法：三板斧🎅如何快速写出递归函数：宏观的角度🎅解题突破🦌整数序列相关…
阅读更多...
一文了解什么是NFT

一文了解什么是NFT

一、什么是NFT NFT 是我们可以用来代表独特物品所有权的代币。他们让我们对艺术品、收藏品甚至房地产等事物进行代币化。资产的所有权由以太坊区块链保护——没有人可以修改所有权记录或复制/粘贴新的 NFT。 NFT 代表不可替代的代币。Non-fungible 是一个经济学术语&#xff…
阅读更多...
伪操作和混合汇编

伪操作和混合汇编

目录 一、伪操作: 二、C和汇编的混合编程 三、ATPCS协议(ARM-THUMB Procedure Call Standard) 一、伪操作: 不会生成代码，只是在编译之前告诉编译器怎么编译 GNU的伪操作一般都以‘.’开头 .global symbol 将symbo…
阅读更多...
WEB 安全，浅谈 XSS 攻击（附简单实例）

WEB 安全，浅谈 XSS 攻击（附简单实例）

什么是 XSS XSS(Cross-Site-Scripting)，跨站脚本攻击，因为缩写和 CSS 重叠，被别人抢先了，所以只能叫做 XSS。 攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。若受害者运行这些恶意代码，攻击者就可以突破网站…
阅读更多...
电感和磁珠有哪些区别？

电感和磁珠有哪些区别？

由于电感和磁珠，很多人会容易认错，本期内容就讲讲，有哪些相似之处！ 磁珠与电感不仅在外形上相似，他们在功能上也存在很多相似之处，甚至有时候磁珠和电感可以相互代替。但是磁珠与电感也不完全等同&#xff…
阅读更多...
开关电源环路稳定性分析（09）——环路补偿六步法

开关电源环路稳定性分析（09）——环路补偿六步法

大家好，这里是大话硬件。 我们来回顾一下前面8讲的内容，主要对下面的知识点进行了分析： 系统框图 反馈环节传递函数 功率级传递函数 PWM级传递函数 传递函数计算 如果我们把开关电源看成是不同的电路模块拼接而成，现在已经知…
阅读更多...
c++模板认识以及使用

c++模板认识以及使用

我们都知道c有函数重载的概念，比如我们写一个相加的函数，以整数为例，我们大概率是这样写： int Add(int x,int y) {return xy; } 并且我们知道c函数重载的概念，于是我们若是想写double类型，float类型&…
阅读更多...
centos7安装php7.1 验证码GD库扩展

centos7安装php7.1 验证码GD库扩展

php安装不推荐使用源码包安装，版本太多。线上从php5.x一直升级到php7.1 程序可兼容 配置yum源 rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm 添加epel…
阅读更多...
使用Stabel Diffusion

使用Stabel Diffusion

Stabel Diffusion是由CompVis、stabel AI和LAION的研究人员和工程师创建的文本到图像的潜在扩散模型。它由来自LAION-5B数据库子集的512x512图像进行训练。LAION-5B是目前最大的、可自由访问的多模态数据集。 在这篇文章中，将介绍如何使用diffusion库实现Stabel Di…
阅读更多...
MAC安装jmeter以及JDK配置

MAC安装jmeter以及JDK配置

JDK配置 一、检查是否安装了jdk 打开终端，输入java -version校验jdk是否安装 我这已经安装了版本1.8.0版本的 若没有安装，则去官网下载jdk并安装 1、jdk下载官网：Java Downloads | Oracle tar包或者dmg，二者区别在于：…
阅读更多...
7、GPIO输入按键检测（外部中断）

7、GPIO输入按键检测（外部中断）

目录 0x01、简介 0x001、EXTI 简介 0x002、EXTI 功能框图 0x003、中断/事件线 0x02、硬件设计 0x03、相关库函数 0x0001、外部中断初始化 0x0002、外部中断GPIO引脚选择 0x04、编写函数 0x001、按键外部中断初始化 0x002、中断函数 0x05、源程序下载地址 0x01、简介…
阅读更多...
Android插件化换肤原理—— 布局加载过程、View创建流程、Resources 浅析

Android插件化换肤原理—— 布局加载过程、View创建流程、Resources 浅析

前言 继上次 WebView 干货分享后，本次将分享下自己在探索学习 App 换肤功能过程中的相关知识，着重分享换肤的原理以及实现思路。 由于篇幅原因分为两篇博客，本文主要分析了 Android 布局加载流程，下一篇将具体讲解插件化换肤实现…
阅读更多...
Linux——标准IO

Linux——标准IO

文件的基础 概念：一组相关数据的有序集合 文件的类型： 常规文件-r 目录文件-d 字符设备文件-c：键盘 块设备文件-b:U盘 磁盘 管道文件-p 套接字文件-s 符号链接文件-I：快捷方式 标准I/O 流 file 标准IO用一个结构体类型来保存打…
阅读更多...
数据质量管理—理论大纲与实践(B站)

数据质量管理—理论大纲与实践(B站)

0、背景 故事的开头，是一位业务部门的同事找到我们，咨询了一个经典问题： 「需求方经常说我们做的报表看起来数据不准，有什么办法吗？」 为了解释这个问题，我以我们团队在数据质量管理中积累下来的方法&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023