TS中class类的基本使用

想要创建对象,必须要先定义类,所谓的类可以理解为对象的模型,程序中可以根据类创建所指定类型的对象。

一、使用class关键字定义类

class 类名 {  }

// 使用class关键字来定义一个类
class Person{

}

// 使用new关键字创建一个对象
const per = new Person();
console.log(per);

二、定义属性

(一)定义实例属性

直接定义的属性是实例属性,需要通过对象的实例去访问

属性名 : 数据类型 = 属性值;     // 数据类型可以省略

class Person{
    // 直接定义的属性是实例属性,需要通过对象的实例去访问
    name: string = "寻霖";
}

const per = new Person();
console.log(per.name);  // 寻霖

(二)定义静态属性

    使用static关键字开头的属性是静态属性
    静态属性可以直接通过类去访问,不可以通过实例对象去访问

static 属性名 : 数据类型 = 属性值;    // 数据类型可以省略

class Person{
    // 使用static关键字开头的属性是静态属性
    // 可以直接通过类去访问,不可以通过实例对象去访问
    static age: number = 18;
}

console.log(Person.age);  // 18
const per = new Person();
console.log(per.age);  // 报错:属性“age”在类型“Person”上不存在

(三)设置属性只读

在属性名前加一个readonly关键字表示一个只读的属性不可修改

readonly 属性名 : 数据类型 = 属性值;

static readonly 属性名 : 数据类型 = 属性值;

在不设置readonly的情况下我们可以修改实例对象中的属性值

class Person{
    name: string = "寻霖";
}

const per = new Person();
console.log(per.name);  // 寻霖
per.name = "XunLin";
console.log(per.name);  // XunLin

 设置了过后就不能够修改属性值,不论是实例属性还是静态属性

三、定义方法

(一)定义实例方法

直接定义的方法是实例方法,需要通过对象的实例去访问

方法名 () {  //方法体...  }

class Person{
    // 直接定义的方法是实例方法,需要通过对象的实例去访问
    sayHello() {
        console.log("hello");
    }
}

const per = new Person();
per.sayHello();  // hello

(二)定义静态方法

    使用static关键字开头的方法是静态方法
    静态方法可以直接通过类去访问,不可以通过实例对象去访问

static 方法名 () {  //方法体...  }

class Person{
    // 使用static关键字开头的方法是静态方法
    // 静态方法可以直接通过类去访问,不可以通过实例对象去访问
    static sayHello() {
        console.log("hello");
    }
}

Person.sayHello();  // hello
const per = new Person();
per.sayHello();  // 报错:属性“sayHello”在类型“Person”上不存在。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue 3 + TypeScript项目使用OpenLayers,您可以按照以下步骤进行操作: 1. 安装OpenLayers:使用npm或yarn安装OpenLayers库。在命令行运行以下命令: ```bash npm install ol ``` 或 ```bash yarn add ol ``` 2. 创建一个Vue组件:在您的Vue 3项目,创建一个新的Vue组件,用于显示地图。打开一个新的`.vue`文件,例如`Map.vue`。 ```vue <template> <div ref="mapContainer" class="map-container"></div> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue'; import 'ol/ol.css'; import { Map, View } from 'ol'; export default defineComponent({ name: 'Map', setup() { const mapContainer = ref(null); onMounted(() => { const map = new Map({ target: mapContainer.value, view: new View({ center: [0, 0], zoom: 2, }), }); }); return { mapContainer, }; }, }); </script> <style scoped> .map-container { width: 100%; height: 400px; } </style> ``` 3. 在需要显示地图的组件使用Map组件:在需要显示地图的父组件,导入并使用Map组件。 ```vue <template> <div> <h1>My Map</h1> <Map /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import Map from './components/Map.vue'; export default defineComponent({ name: 'App', components: { Map, }, }); </script> ``` 现在,您可以在Vue 3 + TypeScript项目使用OpenLayers来显示地图。请注意,这只是一个基本示例,您可以进一步探索OpenLayers文档来了解更多功能和用法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值