黑马程序员技术交流社区

标题: 【广州前端首发】TypeScript核心课程笔记（三） [打印本页]

---

作者: AreYouGlad    时间: 2017-12-15 16:36
标题: 【广州前端首发】TypeScript核心课程笔记（三）

查看更多精彩前端资源

---

面向对象

---

字面量对象
在typeScript中,无法给对象动态添加属性,必须预先定义

[AppleScript] 纯文本查看 复制代码

let obj = { a: 1 };

obj.a = 10;   // 正常

obj.b = 20;   // 报错

class中的实例属性
ts不允许在构造器中动态给实例添加属性, 必须要先进行声明

[AppleScript] 纯文本查看 复制代码

class Person {



        name: string;         // 定义实例属性name及类型

        age: number = 0;  // 定义实例属性时可以赋一个默认值



        constructor(name: string, age: number, gender: string) {

                this.name = name;        // 正常

                this.age = age;              // 正常

                this.gender = gender;    // 报错,没有预先定义,无法动态添加属性

        }



}

class中的实例属性 - 简写版

• 在进行面向对象开发时, 会经常在new的时候传值, 上面那样预先定义再赋值的写法虽严禁但实在过于重复
• 所以ts提供了一种简写形式, 即在构造器形参上面添加权限修饰符, 加上后ts就知道这个形参是要被赋给实例的
  
  

[AppleScript] 纯文本查看 复制代码

class Person {

  // 形参加上权限修饰符之后, 不用提前声明, 也不用写this.xxx = xxx这样的代码了, ts会自动添加

        constructor(public name: string, public age: number, public gender: string) {}

}



let xiaohong = new Person('小红', 12, '女');

console.log(xiaohong.age);   // 12

静态成员

• 在es6中,只允许使用static关键字定义静态方法,不能定义静态属性
• 但是在ts中没有这个限制, 只要前面加上static关键字就是静态成员, 否则就是实例成员
  
  

[AppleScript] 纯文本查看 复制代码

class Person {

        static maxAge: number = 250;

        static getTotal() {

                return '70亿';

        }

}



// 静态成员通过类名调用

Person.maxAge;            // 250

Person.getTotal();          // '70亿'

访问权限修饰符

---

• 访问权限修饰符的作用是限定属性的可访问范围
• 访问修饰符与主流面向对象语言一样, 有三个: public private protected
  
  

public

• 只有public权限的属性或方法才可以在类外部使用
• 如果不明确指明权限的话, 那么默认就是public
  
  

[AppleScript] 纯文本查看 复制代码

class Person {

        public name: string;    // 手动赋予public权限

        age: number;              // 默认赋予public权限



        constructor(name: string, age: number) {

                this.name = name;

                this.age = age;

        }



        public say(): void {

                console.log(`我是${this.name}`);

        }

}



let p = new Person('小虎', 20);

p.say();        // 我是小虎

p.name       // 小虎

p.age          // 20

private只供类内部使用的属性或方法,可以通过private关键字来修饰

[AppleScript] 纯文本查看 复制代码

class Person {

        public name: string;

        private age: number;



        constructor(name: string, age: number) {

                this.name = name;

                this.age = age;

        }



        public say(): void {

                console.log(`我是${this.name},我${this.age}岁了`);

        }

}



let p = new Person('小虎', 20);

p.say();        // 我是小虎,我20岁了

p.name       // 小虎

p.age          // 报错,age是私有属性,只能在类的内部使用

protected
只供类或子类内部使用的属性或方法,可以通过protected关键字来修饰

[AppleScript] 纯文本查看 复制代码

class Animal {

        protected name: string;

        private age: number;



        constructor(name: string, age: number) {

                this.name = name;

                this.age = age;

        }

}



class Person extends Animal {

        public sayName(): void {

                console.log(`我是${this.name}`);  // 正常, 父中protected属性在父子类中均可使用

        }

        public sayAge(): void {

                console.log(`我${this.age}岁了`);  // 报错, 父中private属性只能在父中使用

        }

}



let p = new Person('小芳', 18);

p.name         // 报错, protected属性不能在外面使用

p.age            // 报错, private属性不能在外面使用

读写修饰符

---

readonly

• ts提供了只读属性修饰符readonly, 属性一旦赋值便不可修改
• 注意: 只读修饰符不能作用与方法
  
  

[AppleScript] 纯文本查看 复制代码

class Person {

        readonly name: string;

        readonly age: number;



        constructor(name: string, age: number) {

                this.name = name;

                this.age = age;

        }



  // 报错, 不能使用readonly修饰方法

        readonly say() {

                console.log('说一嘴');

        }

}



let p = new Person('小美', 20);

p.name;                    // 小美

p.name = '大美';       // 报错, name是只读属性

联合使用读写修饰符允许配合一个权限修饰符共同使用, 但权限修饰符必须写在前面

[AppleScript] 纯文本查看 复制代码

class Person {

        public readonly name: string;

        private readonly age: number;

        private protected grender: string;

}

---

作者: AreYouGlad    时间: 2017-12-15 16:36

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2