TS学习之类

本文介绍了TypeScript中的类定义、继承、访问修饰符等面向对象编程特性,包括public、private、protected和readonly的使用,以及参数属性、存取器、静态属性、抽象类的概念和示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

定义类

class Person {
    name: string;   //属性
    constructor(_name: string) {
        this.name = _name;
    }   //构造函数
    sayHello(): string {
        return "Hi,everyone"
    }   //方法
}

let firstOne = new Person("Fred")   //实例化类

继承:继承使用关键字extends,调用父类使用super,子类继承父类的属性和方法,并且子类可以改写父类的属性和方法

class Animal {
    name: string;
    constructor(_name: string) {
        this.name = _name;
    }
    skinColour(color: string = "black"): void {
        console.log(`${this.name} skin colour is ${color}`)
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name) }
    skinColour(color: string = "brown"): void {
        console.log(`I'am ${this.name}`);
        super.skinColour("brown");
    }
}

let horse = new Horse("horse");
horse.skinColour()
// I'am horse
// horse skin colour is brown

public、private、protected、readonly

  • public(不声明默认都为public,也可以显示的设置为public)
class Person {
    public name: string;   //属性
    public constructor(_name: string) {
        this.name = _name;
    }   //构造函数
    public sayHello(): string {
        return "Hi,everyone"
    }   //方法
}

let firstOne = new Person("Fred")   //实例化类
  • private(private的成员不能被外部访问;比较带有privateprotected成员的类型时,两个类型兼容的条件是private或protected的成员必须相同切来至同一个声明(同一个类))
class Person {
    private name: string;   
    public constructor(_name: string) {
        this.name = _name;
    }   
}

class Employee {
    private name: string;   
    public constructor(_name: string) {
        this.name = _name;
    }   
}

let firstOne = new Person("Fred")
console.log(firstOne.name)  //error: Property 'name' is private;
let lastOne = new Employee("Fred")
firstOne = lastOne  // error: Type 'Employee' is not assignable to type 'Person'.Types have separate declarations of a private property 'name'.
  • protected(protected和private相似,但protected成员可以在派生类中访问(能被继承,但不能在实例中访问,若构造函数是protected,则不能被实例化,只能被继承))
class Person {
    protected name: string;   
    protected constructor(_name: string) {
        this.name = _name;
    }   
}

class Employee extends Person {
    private department: string;   
    public constructor(name: string,department:string) {
        super(name);
        this.department = department;
    }   
}

let Bob = new Person;   //error: Constructor of class 'Person' is protected
let fred = new Employee("fred","test");
console.log(fred.name)  //error: Property 'name' is protected
  • readonly(设置属性为只读,必须在声明时或构造函数里初始化)
class Person {
    readonly name: string;   
    constructor(_name: string) {
        this.name = _name;
    }   
}

let fred = new Person("fred");
fred.name = "Bob"   //error: Cannot assign to 'name' because it is a constant or a read-only property.

参数属性(参数属性通过给构造函数参数添加一个访问限定符来声明(public,private,protected),把声明和赋值合并至一处)

class Person {
    constructor(private name: string) { }
    sayHello(): void {
        console.log(`my name is ${this.name}`)
    }
}

let fred = new Person("fred");
fred.sayHello() //my name is fred

存取器(get、set   只带有 get不带有set的存取器自动被推断为readonly

let passcode = "secret passcode";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    console.log(employee.fullName);
}

静态属性(static,不能被实例访问,在类里面访问时,需要加上类名)

class Person {
    static height:number = 180;
    constructor(private name: string) { }
    sayHello(): void {
        console.log(`my name is ${this.name}, I height is ${Person.height}`)
    }
}

let fred = new Person("fred");
fred.sayHello() //my name is fred, I height is 180

抽象类(abstract,抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。抽象类中的抽象方法不包含具体实现并且必须在派生类中实现)

abstract class Person {
    constructor(public name: string) { }
    abstract sayHello():void;
}

class Empoloy extends Person{
    constructor(){
        super("Fred")
    }
    sayHello(){
        console.log(`my name is ${this.name}`)
    }
}

let firstOne = new Empoloy();
firstOne.sayHello();    //my name is Fred

转载于:https://www.cnblogs.com/sghy/p/7742111.html

### 使用 Vue 和 TypeScript 开发的基础指南 Vue.js 是一种流行的前端框架,而 TypeScript 则是一种静态类型的 JavaScript 超集。两者的结合可以显著提升项目的类型安全性、可维护性和开发体验。 #### 安装与初始化 要开始使用 Vue3 和 TypeScript,可以通过 `vue-cli` 或 Vite 创建一个新的项目。以下是基于 Vite 的创建方式: ```bash npm create vite@latest my-vue-ts-app --template vue-ts cd my-vue-ts-app npm install npm run dev ``` 这一步会设置好一个支持 TypeScript 的 Vue3 项目环境[^1]。 #### 配置文件说明 在新生成的项目中,默认已经包含了必要的配置文件,例如 `tsconfig.json` 和 `.eslintrc.cjs`。开发者可以根据具体需求调整这些文件的内容来满足团队编码风格的要求。 - **tsconfig.json**: 此文件定义了 TypeScript 编译器选项,比如目标 ECMAScript 版本 (`target`)、模块解析策略 (`moduleResolution`) 等。 - **eslint 插件**: 推荐安装 ESLint 并配合 Prettier 来保持代码一致性。对于 Vue 和 TypeScript 支持,需额外引入插件: ```bash npm install eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev ``` #### 组件编写示例 下面是一个简单的 Vue3 单文件组件 (SFC),展示了如何利用 TypeScript 提供更强的安全保障: ```vue <template> <div>{{ message }}</div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'ExampleComponent', setup() { const message = ref<string>('Hello Vue with TypeScript'); return { message }; }, }); </script> ``` 上述例子中,通过显式声明变量类型(如 `ref<string>`),增强了程序逻辑上的清晰度以及错误检测能力。 #### 数据交互:Axios 实现前后端通信 当构建更复杂的应用场景时,通常需要从前端向后端发送请求获取数据或者提交表单信息。推荐使用 Axios 库完成 HTTP 请求操作。以下是如何集成 Axios 至您的 Vue3 + TS 工作流中的方法之一: 首先,在根目录下新建服务类用于封装 API 方法: ```typescript // src/services/api.ts import axios, { AxiosInstance } from 'axios'; class ApiService { private instance: AxiosInstance; constructor(baseURL: string) { this.instance = axios.create({ baseURL }); } public async get<T>(url: string): Promise<T> { try { const response = await this.instance.get(url); return response.data; } catch (error) { throw error; } } } const apiService = new ApiService('https://jsonplaceholder.typicode.com'); export default apiService; ``` 接着可以在任何地方调用此实例发起 GET 请求并处理返回的数据结构: ```typescript apiService.get<any[]>('/todos').then((data) => console.log(data)); ``` 这里 `<any[]>` 表达的是我们期望接收到数组形式的结果;当然也可以替换为自定义接口以获得更加严格的编译期验证[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值