TypeScript-类方法修饰符和TypeScript-类可选属性和参数属性

简介: TypeScript-类方法修饰符和TypeScript-类可选属性和参数属性

前言


TypeScript 类方法修饰符用于控制类成员方法的访问权限和行为

类的方法修饰符和属性的修饰符一样,只不过方法的修饰符是没有 readonly

博主假设有这么一个需求: 有一个基类, 所有的子类都需要继承于这个基类, 但是我们不希望别人能够通过基类来创建对象:

错误示例:

class Person {
    name: string;
    age: number;
    gender: string;
    protected constructor(name: string, age: number, gender: string) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    say(): void {
        console.log(`name=${this.name},age=${this.age},gender=${this.gender}`);
    }
}
class Student extends Person {
    constructor(name: string, age: number, gender: string) {
        super(name, age, gender);
    }
}
let p = new Person('BNTang', 18, 'male');
let stu = new Student('zs', 18, 'female');

正确示例:

class Person {
    name: string;
    age: number;
    gender: string;
    protected constructor(name: string, age: number, gender: string) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    say(): void {
        console.log(`name=${this.name},age=${this.age},gender=${this.gender}`);
    }
}
class Student extends Person {
    constructor(name: string, age: number, gender: string) {
        super(name, age, gender);
    }
}
let stu = new Student('zs', 18, 'female');
console.log(stu);




可选属性


和接口中的可选属性一样, 可传可不传的属性




注意点


TS 中如果定义了实例属性, 那么就必须在构造函数中使用, 否则就会报错

错误示例:

class Person {
    name: string;
    age: number;
}


正确示例:

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}
let p = new Person('BNTang', 18);
console.log(p);


利用 可选参数 解决不想使用的属性:

class Person {
    name: string;
    // 可选属性
    age?: number;
    constructor(name: string, age?: number) {
        this.name = name;
        this.age = age;
    }
}
let p = new Person('BNTang');
console.log(p);


在来看看直接定义一个构造函数的情况下,通过对于的类创建出来的对象是什么样子的:

class Person {
    constructor(name: string, age: number) {
    }
}
let p = new Person('BNTang', 18);
console.log(p);





参数属性


一句话搞定实例属性的接收和定义

class Person {
    constructor(public name: string, public age: number) {
    }
}
let p = new Person('BNTang', 18);
console.log(p);

如上代码类同如下代码:

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

最后


本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
1月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
20天前
|
JavaScript 前端开发 程序员
TypeScript 类
TypeScript 类
|
1月前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
76 0
|
22天前
|
JavaScript 前端开发 开发者
10.【TypeScript 教程】类(Class)
10.【TypeScript 教程】类(Class)
11 2
|
20天前
|
JavaScript Java C#
typescript 类类型
typescript 类类型
|
20天前
|
JavaScript 前端开发 C++
typescript 只读属性
typescript 只读属性
|
1月前
|
JavaScript
类和继承在TypeScript中的使用详解
【4月更文挑战第23天】TypeScript中的类和继承详解:使用`class`定义类,包含属性和方法,如`Animal`示例。通过`extends`实现继承,如`Dog`继承`Animal`,可重写父类方法。使用访问修饰符`public`、`protected`、`private`控制成员可见性。抽象类和抽象方法用于定义基类和强制子类实现特定方法,提升代码组织和可维护性。
|
1月前
|
JavaScript 开发者 索引
【亮剑】探讨了在TypeScript中为对象动态添加属性的三种方式
【4月更文挑战第30天】本文探讨了在TypeScript中为对象动态添加属性的三种方式:1) 使用索引签名允许添加任意属性,如`[key: string]: any`;2) 通过接口和类型别名提供编译时类型检查,例如`interface Person { name: string; age: number; }`;3) 利用类创建具有属性的对象,如`class Person { name: string; age: number; }`。每种方法有其适用场景,开发者可根据需求选择。
|
1月前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
1月前
|
JavaScript
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
54 0