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;
    }
}

最后


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

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

相关文章
|
3月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
206 2
|
29天前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
42 6
|
29天前
|
JavaScript 安全 编译器
TypeScript 与 Jest 测试框架的结合使用,从 TypeScript 的测试需求出发,介绍了 Jest 的特点及其与 TypeScript 结合的优势,详细讲解了基本测试步骤、常见测试场景及异步操作测试方法
本文深入探讨了 TypeScript 与 Jest 测试框架的结合使用,从 TypeScript 的测试需求出发,介绍了 Jest 的特点及其与 TypeScript 结合的优势,详细讲解了基本测试步骤、常见测试场景及异步操作测试方法,并通过实际案例展示了其在项目中的应用效果,旨在提升代码质量和开发效率。
37 6
|
6月前
|
JavaScript 前端开发 程序员
TypeScript 类
TypeScript 类
|
2月前
|
JavaScript 前端开发
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
187 3
|
3月前
|
JavaScript
typeScript进阶(13)_类与注意事项(八项特性)
TypeScript的类支持特性包括:构造函数、继承(使用`extends`)、公有/私有/受保护修饰符、只读修饰符、参数属性、存取器(getters/setters)、抽象类(用`abstract`声明)。类可用作类型。
29 0
typeScript进阶(13)_类与注意事项(八项特性)
|
4月前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
5月前
|
JavaScript 前端开发
TypeScript(七)类
TypeScript(七)类
42 0
|
6月前
|
JavaScript
TypeScript类
TypeScript类
|
6月前
|
JavaScript Java C#
typescript 类类型
typescript 类类型