5萬字 TypeScript入門系列（第三期）（建議收藏）-有解無憂

極客江南：一個對開發技術特別執著的程式員，對移動開發有著獨到的見解和深入的研究，有著多年的iOS、Android、HTML5開發經驗，對NativeApp、HybridApp、WebApp開發有著獨到的見解和深入的研究, 除此之外還精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多種Web前端技術及Java、PHP等服務端技術，

初學者玩轉 TypeScript系列，總計 5 期，本文為第 3 期，點贊、收藏、評論、關注、三連支持！

一期知識點擊這里

二期知識點擊這里

三期目錄

- - - 1.類
    - 2. 類屬性修飾符
    - 3.類方法修飾符
    - 4. 類可選屬性與引數屬性
    - 5. 類存取器
    - 6. 抽象類
    - 7. 類與介面
    - 8. 類與泛型
    - 9. 介面合并現象

對于初學者來說，學習編程最害怕的就是，難，

那么，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語言視頻

最后，再多一句，粉絲順口溜，關注江哥不迷路，帶你編程上高速，

著作權所有，請勿轉載，轉載請聯系本人授權

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291505.html

標籤：其他

上一篇：KubeEdge官方示例運行成功_Counter Demo 計數器

下一篇：JavaScript入門第八章（流程控制與分支結構）