5万字typescript入门系列（第三期）（建议收藏）(代码片段)

极客江南： 一个对开发技术特别执着的程序员，对移动开发有着独到的见解和深入的研究，有着多年的iOS、Android、HTML5开发经验，对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外还精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、PHP等服务端技术。

初学者玩转 TypeScript系列，总计 5 期，本文为第 3 期，点赞、收藏、评论、关注、三连支持！

一期知识点击这里

二期知识点击这里

对于初学者来说，学习编程最害怕的就是，难。

那么，Typescript 是不是很难？

首先，我可以肯定地告诉你，你的焦虑是多余的。新手对学习新技术有很强的排斥心理，主要是因为基础不够扎实，然后自信心不够强。

1.类

• TS中的类和ES6中的类’几乎’一样

class Person 
    name:string; // 和ES6区别, 需要先定义实例属性, 才能够使用实例属性
    age:number;
    constructor(name:string, age:number)
        this.name = name;
        this.age = age;
    
    say():void
        console.log(`我的名称叫$this.name, 我的年龄是$this.age`);
    
    static food:string; // 静态属性
    static eat():void // 静态方法
        console.log(`我正在吃$this.food`);
    

let p = new Person('lnj', 34);
p.say();
Person.food = '蛋挞';
Person.eat();

class Student extends Person
    book:string;
    constructor(name:string, age:number, book:string)
        super(name, age);
        this.book = book;
    
    say():void
        console.log(`我是重写之后的say-$this.name$this.age$this.book`);
    
    static eat():void
        console.log(`我是重写之后的eat-$this.food`);
    

let stu = new Student('zs', 18, '代码情缘');
stu.say();
Student.food = '冰淇淋';
Student.eat();

2. 类属性修饰符

• public(公开的) :

  • 如果使用public来修饰属性, 那么表示这个属性是公开的
  • 可以在类的内部使用, 也可以在子类中使用, 也可以在外部使用

• protected(受保护的) :

  • 如果使用protected来修饰属性, 那么表示这个属性是受保护的
  • 可以在类的内部使用, 也可以在子类中使用

• private(私有的) :

  • 如果使用private来修饰属性, 那么表示这个属性是私有的
  • 可以在类的内部使用

• readonly(只读的) :

/*
class Person 
    public name:string; // 默认情况下就是public的
    protected age:number;
    private gender:string;
    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);
    
    say():void
        // console.log(`name=$this.name`);
        // console.log(`age=$this.age`);
        // console.log(`gender=$this.gender`);
    

let p = new Person('lnj',34, 'male');
p.say();
// console.log(p.age);
// console.log(p.gender);

let stu = new Student('zs', 18, 'female');
stu.say();
// console.log(stu.age);
 */

/*
class Demo 
    readonly name:string;
    constructor(name:string)
        this.name = name;
    
    static food:string;

let demo = new Demo('123');
console.log(demo.name);
// demo.name = 'abc';
console.log(demo.name);
*/

3.类方法修饰符

• public :

  • 如果使用public来修饰方法, 那么表示这个方法是公开的
  • 可以在类的内部使用, 也可以在子类中使用, 也可以在外部使用

• protected :

  • 如果使用protected来修饰方法, 那么表示这个方法是受保护的
  • 可以在类的内部使用, 也可以在子类中使用

• private

  • 如果使用private来修饰方法, 那么表示这个方法是私有的
  • 可以在类的内部使用

/*
class Person 
    name:string;
    age:number;
    gender:string;
    constructor(name:string, age:number, gender:string)
        this.name = name;
        this.age = age;
        this.gender = gender;
    
    public sayName():void
        console.log(`name=$this.name`);
    
    protected sayAge():void
        console.log(`age=$this.age`);
    
    private sayGender():void
        console.log(`gender=$this.gender`);
    
    say():void
        this.sayName();
        this.sayAge();
        this.sayGender();
    

class Student extends Person 
    constructor(name: string, age: number, gender: string) 
        super(name, age, gender);
    
    say():void
        this.sayName();
        this.sayAge();
        this.sayGender();
    

let p = new Person('lnj', 34, 'male');
p.say();
p.sayName();
p.sayAge();
p.sayGender();
let stu = new Student('zs', 18, 'female');
stu.say();
*/

/*
需求: 有一个基类, 所有的子类都需要继承于这个基类, 但是我们不希望别人能够通过基类来创建对象
* */
/*
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('lnj', 34, 'male');
let stu = new Student('zs', 18, 'female');
 */

4. 类可选属性与参数属性

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

class Person 
    // 注意点: 在TS中如果定义了实例属性, 那么就必须在构造函数中使用, 否则就会报错
    name:string;
    age?:number; // 可选属性
    constructor(name:string, age?:number)
        this.name = name;
        this.age = age;
    
    // setNameAndAge(name:string, age:number)
    //     this.name = name;
    //     this.age = age;
    // 

let p = new Person('lnj');
console.log(p);

• 参数属性
  • 搞定实例属性的接收和定义

/*
class Person 
    name:string;
    age:number;
    constructor(name:string, age?:number)
        this.name = name;
        this.age = age;
    

* */
class Person 
    constructor(public name:string,public age:number)
    

let p = new Person('lnj', 34);
console.log(p);

5. 类存取器

• 什么是存取器?
• 通过getters/setters来截取对对象成员的访问

class Person 
    private _age:number = 0;
    set age(val:number)
        console.log('进入了set age方法');
        if(val<0)
            throw new Error('人的年龄不能小于零');
        
        this._age = val;
    
    get age():number
        console.log('进入了get age方法');
        return this._age;
    

let p = new Person();
p.age = 34;
// p.age = -6; // p.age(-6);
console.log(p.age);

6. 抽象类

• 什么是抽象类?

• 抽象类是专门用于定义哪些不希望被外界直接创建的类的
  抽象类一般用于定义基类
  抽象类和接口一样用于约束子类

• 抽象类和接口区别?

• 接口中只能定义约束, 不能定义具体实现
  而抽象类中既可以定义约束, 又可以定义具体实现

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

class Student extends Person
    constructor(name:string, age:number)
        super(name, age);
    

// let p = new Person('lnj', 34);
let stu = new Student('lnj', 34);
console.log(stu);
 */

abstract class Person 
    abstract name:string;
    abstract say():void;
    eat():void
        console.log(`$this.name正在吃东西`);
    

// let p = new Person();
class Student extends Person
    name:string = 'lnj';
    say():void
        console.log(`我的名字是$this.name`);
    

let stu = new Student();
stu.say();
stu.eat();

7. 类与接口

// 类"实现"接口
/*
interface PersonInterface 
    name:string;
    say():void;

// 只要实现的某一个接口, 那么就必须实现接口中所有的属性和方法
class Person implements PersonInterface
    name:string = 'lnj';
    say():void
        console.log(`我的名字叫:$this.name`);
    

let p = new Person();
p.say();
*/

// 接口"继承"类
class Person 
    // protected name:string = 'lnj';
    name:string = 'lnj';
    age:number = 34;
    protected say():void
        console.log(`name = $this.name, age = $this.age`);
    

// let p = new Person();
// p.say();
// 注意点: 只要一个接口继承了某个类, 那么就会继承这个类中所有的属性和方法
//         但是只会继承属性和方法的声明, 不会继承属性和方法实现
// 注意点: 如果接口继承的类中包含了protected的属性和方法, 那么就只有这个类的子类才能实现这个接口
interface PersonInterface extends Person
    gender:string;


class Student extends Person implements PersonInterface
    gender:string = 'male';
    name:string = 'zs';
    age:number = 18;
    say():void
        console.log(`name = $this.name, age = $this.age, gender = $this.gender`);
    

let stu = new Student();
stu.say();

8. 类与泛型

// 泛型类
class Chache<T> 
    arr:T[] = [];
    add(value:T):T
        this.arr.push(value);
        return value;
    
    all():T[]
        return this.arr;
    

let chache = new Chache<number>();
chache.add(1);
chache.add(3);
chache.add(5);
console.log(chache.all());

9. 接口合并现象

// 当我们定义了多个同名的接口时, 多个接口的内容会自动合并
interface TestInterface 
    name:string;

interface TestInterface 
    age:number;

/*
interface TestInterface 
    name:string;
    age:number;

* */

class Person implements TestInterface
    age:number = 19;
    name:string = 'lnj';

码字不易，在线求个三连支持。

大家记得收藏前，先点个赞哦！好的文章值得被更多人看到。

推荐阅读：

13万字C语言保姆级教程2021版

10万字Go语言保姆级教程

2 万字 Jquery 入门教程

3 万字 html +css 入门教程

169集保姆级C语言视频

最后，再多一句，粉丝顺口溜，关注江哥不迷路，带你编程上高速。

版权所有，请勿转载，转载请联系本人授权