TypeScript——类

ES6之后JS将能够使用基于类的面向对象的方式,TS中的类覆盖了JS中的类

  • 基本实现

“类的成员属性”都是实例属性,而不是原型属性,“类的成员方法”都是“原型”方法

class Dog {
    constructor(name: string) {
        this.name = name;
    }
    name: string // 需要增加成员类型注释
    run() {}
}
console.log(Dog.prototype) // { run: f, constructor: f }

继承与ES不同的是:实例的属性必须有初始值,或者在构造函数中被初始化

派生类从基类中继承属性和方法,用作于类的拓展

class Husky extends Dog {
    constructor(name: string, color: string) {
        super(name) // 派生类的构造函数必须包含 "super" 调用
        this.color = color; // 访问派生类的构造函数中的 "this" 前,必须调用 "super"
    }
    color: string
}
  • 修饰符

修饰符 含义 作用
public 公共成员(默认) 对所有类可见
private 私有成员
只能在类本身调用 而不能在实例/子类中调用;

构造函数使用则该类不可实例化和继承;

protected 被保护成员
可在类本身及子类调用,而不能在实例中调用;

构造函数使用则该类不可实例化,只能被继承;

readonly 只读成员 一定需要初始化,不可修改
static 静态成员 只能通过类名调用(实例化对象no),可被继承
  • 抽象类:只能被继承,而不能被实例化(对ES的拓展)

// 抽象类:抽离出一些类的共性,有利于代码的复用和拓展 可实现多态
abstract class Animal {
    eat() {
        console.log(‘eat‘)
    }
    abstract sleep(): void // 在抽象类中可以定义抽象函数
}
// let animal = new Animal() 无法创建抽象类的实例

//
class Bird extends Animal {
    sleep() {        // 在子类中做不同的操作,从而实现多态
        console.log(‘Bird sleep‘)
    }
}

原文地址:https://www.cnblogs.com/JessieXie/p/12384925.html

时间: 2024-08-04 22:27:36

TypeScript——类的相关文章

.NET手撸绘制TypeScript类图——上篇

.NET手撸绘制TypeScript类图--上篇 近年来随着交互界面的精细化,TypeScript越来越流行,前端的设计也越来复杂,而类图正是用简单的箭头和方块,反映对象与对象之间关系/依赖的好方式.许多工具都能生成C#类图,有些工具也能生成TypeScript类图,如tsuml,但存在一些局限性. 我们都是.NET开发,为啥不干脆就用.NET撸一个TypeScript类图呢? 说干就干!为了搞到类图,一共分两步走: 解析.ts文件,生成抽象语法树(AST),并转换为简单的类.属性.方法等对象

TypeScript 类

从ECMAScript 6开始,JS就支持类了.但是如果使用TypeScript也能使用类,并且生成的JS任然可以使用. 来一个例子: /**  * Created by CV-PC153 on 2017/8/9.  */ //创建一个类 class Greeter{     private greeting : string;     constructor(message : string){         this.greeting = message;     }     public

4、TypeScript 类

介绍 TypeScript 是面向对象的 JavaScript. 类描述了所创建的对象共同的属性和方法. TypeScript 支持面向对象的所有特性,比如 类.接口等. 定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员): 字段 ? 字段是类里面声明的变量.字段表示对象的有关数据. 构造函数 ? 类实例化时调用,可以为类的对象分配内存. 方法 ? 方法为对象要执行的操作. 实例代码 class Car { // 字段 engine:string; // 构造函数

Angular2 和TypeScript

Angular2 和TypeScript 原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者:  Yakov Fain Posted on  Apr 26, 2016 -----------------------------------------------------------------------------------------------------------------

[译]Angular2 和TypeScript -- 一次简要的预览

原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者:  Yakov Fain Posted on  Apr 26, 2016 ------------------------------------------------------------------------------------------------------------------------------ Angular

转载 《我用 TypeScript 语言的七个月》

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 百度网盘同步:http://pan.baidu.com/s/1jG1Q58M 分享  [中文纪录片]互联网时代   http://pan.baidu.com/s/1qWkJfcS 官方QQ群:(申请加入,说是我推荐的) App实践出真知 4

TypeScript入门五:TypeScript的接口

TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的基本使用 1.1定义TypeScript接口的指令(interface) 接口让我们想到的第一个短语就是(API).比如日常我们所说的调用某某程序的API一般都是跨应用的接口,如别的网站的或者APP的接口:还有我们每天都是用的编程语言的指令和内置的方法及属性,这些可以叫做编程语言的接口:还有令我们既

TypeScript最大的目的是让程序员更具创造性

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上. 以上为网上对 Typescript 的一些解释,那我们为什么要学 Typescript? 提到前端我们首先会想到 HTML,CSS,JavaScript 三大家族,我们掌握这三个就可以在前端界获得一

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之