TypeScript语法基础讲解

Posted stay_少年与梦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TypeScript语法基础讲解相关的知识，希望对你有一定的参考价值。

文章目录

前言

今天我们一起继续来学习TS中的语法。

理解面向对象
面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。

  • 让我们来举个例子：
    • 操作浏览器要使用window对象
    • 操作网页要使用document对象
    • 操作控制台要使用console对象

个人理解
一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。
面向对象特点
封装

  • 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装。
  • 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置。

讲解

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。

如何来定义类

使用class关键字定义
对象中主要包含了两个部分：属性 方法
定义类：
语法

  typescript
    class 类名 {
    	属性名: 类型;
    	
    	constructor(参数: 类型){
    		this.属性名 = 参数;
    	}
    	
    	方法名(){
    		....
    	}
    
    }

示例
typescript代码

  class Person{
        name: string;
        age: number;
    
        constructor(name: string, age: number){
            this.name = name;
            this.age = age;
        }
    
        sayHello(){
            console.log(`大家好，我是${this.name}`);
        }
    }

如何来使用类

使用类：

  • const p = new Person('小李', 18);
p.sayHello();

只读属性

readonly开头的属性表示一个只读的属性 无法修改
如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改。

TS中属性具有三种修饰符：
1. public（默认值），可以在类、子类和对象中修改
2. protected ，可以在类、子类中修改
3. private ，可以在类中修改。

示例：

public

   ```typescript文件
    class Person{
        public name: string; // 写或什么都不写都是public
        public age: number;
    
        constructor(name: string, age: number){
            this.name = name; // 可以在类中修改
            this.age = age;
        }
    
        sayHello(){
            console.log(`大家好，我是${this.name}`);
        }
    }
    
    class Employee extends Person{
        constructor(name: string, age: number){
            super(name, age);
            this.name = name; //子类中可以修改
        }
    }
    
    const p = new Person('小刘', 18);
    p.name = '小李';// 可以通过对象修改
    ```

protected

  - ```typescript文件
    class Person{
        protected name: string;
        protected age: number;
    
        constructor(name: string, age: number){
            this.name = name; // 可以修改
            this.age = age;
        }
    
        sayHello(){
            console.log(`大家好，我是${this.name}`);
        }
    }
    
    class Employee extends Person{
    
        constructor(name: string, age: number){
            super(name, age);
            this.name = name; //子类中可以修改
        }
    }
    
    const p = new Person('小刘', 18);
    p.name = '小李';// 不能修改
    ```

private

  - ```typescript文件
    class Person{
        private name: string;
        private age: number;
    
        constructor(name: string, age: number){
            this.name = name; // 可以修改
            this.age = age;
        }
    
        sayHello(){
            console.log(`大家好，我是${this.name}`);
        }
    }
    
    class Employee extends Person{
    
        constructor(name: string, age: number){
            super(name, age);
            this.name = name; //子类中不能修改
        }
    }
    
    const p = new Person('小刘', 18);
    p.name = '小李';// 不能修改
    ```

如何使用属性存取器

对于一些不希望被任意修改的属性，可以将其设置为private。

直接将其设置为private将导致无法再通过对象修改其中的属性。

我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器。

读取属性的方法叫做setter方法，设置属性的方法叫做getter方法。

示例：
typescript文件

class Person{
    private _name: string;

    constructor(name: string){
        this._name = name;
    }

    get name(){
        return this._name;
    }

    set name(name: string){
        this._name = name;
    }

}

const p1 = new Person('小李');
console.log(p1.name); // 通过getter读取name属性
p1.name = '猪'; // 通过setter修改name属性

静态属性

静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用。
如果方法以static 开头则方法是类方法，可以直接通过类去调用。
静态属性（方法）使用static开头

示例：

typescript文件

   class Tools{
        static PI = 3.1415926;
        
        static sum(num1: number, num2: number){
            return num1 + num2
        }
    }
    
    console.log(Tools.PI);
    console.log(Tools.sum(123, 456));

this的指向

在类中，使用this表示当前对象
在实例方法中，this就表示当前的实例
在构造函数中当前对象就是当前新建的那个对象
可以通过this 向新建的对象中添加属性

示例：

class Persons{
    name:string;
    age:number;
    // constructor 被称为构造函数
    // 构造函数会在对象创建时调用
    constructor(name:string, age:number){
      
        this.name =name;
        this.age=age;     
    }
    bark(){
      
        // 在方法中可以通过this 来表示当前调用方法的对象

        console.log( this.name);
        
     
    }
}

什么是继承？

继承是面向对象中的又一个特性。

继承的特点

通过继承可以将其他类中的属性和方法引入到当前类中。

示例：

typescript代码：

 class Animal{
        name: string;
        age: number;
    
        constructor(name: string, age: number){
            this.name = name;
            this.age = age;
        }
    }
    
    class Dog extends Animal{
    
        bark(){
            console.log(`${this.name}在叫！`);
        }
    }
    
    const dog = new Dog('旺财', 4);
    dog.bark();

通过继承可以在不修改类的情况下完成对类的扩展。

重写

发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写。

		//定义一个Animal类
        class Animal {
            name: string;
        age: number;

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

        }
        run(){
                console.log(`父类中的run方法！`);
            }
        }

        /* 
            Dog extends Animal
            此时，Animal 被称为父类，Dog被称为子类
            使用继承后，子类将会拥有父类所有的方法和属性
            通过继承可以将多个类中共有的代码写在一个父类中，
            这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
            如果希望在子类中添加一些父类中没有的属性和方法直接加就行


            如果在子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法

                这种子类覆盖掉父类方法的形式，我们称为方法重写
        */

    // 定义一个表示狗的类
    // 使Dog类继承Animal
    class Dog extends Animal {
        bark(){
            console.log(`${this.name}在跑`);
            
        }
        run(){
                console.log(`子类中的run方法，会重写父类中的run方法！`);
            }
        
    }

    const dog = new Dog('旺财',5);
    console.log(dog);
	dog.bark();

什么是抽象类（abstract class）

抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例。
以abstract开头的类是抽象类
抽象类和其他类区别不大，只是不能用来创建对象
抽象类就是专门用来被继承的类
抽象类中可以添加抽象方法
typeScript代码示例：

abstract class Animal{
        // 定义一个抽象方法
        // 抽象方法使用abstract开头，没有方法体
        // 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
        abstract sayHello():void;
    }
    class Dog extends Animal{
 		sayHello(){
              console.log('狗在跑~');
        }
    }

总结：使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现。

总结

我们今天一起学习了TypeScript语法中的类的所有特性，
我们还深刻的了解了什么是面向对象，面向对象是一种编程思维，需要我们去理解。我们还学习了类中的各种属性以及它的用法，以及实例。

如果觉得本文写得不错，记得留下你的赞哟,也可以在评论区留下你的意见呦

以上是关于TypeScript语法基础讲解的主要内容，如果未能解决你的问题，请参考以下文章

TypeScript语法基础讲解

ts基础讲解

TypeScript（03）：基础语法

TypeScript系列教程03基础语法

软件开发入门教程网之TypeScript 基础语法

typescript基础语法