📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page
  • 1. 继承
  • 2. 公共,私有与受保护的修饰符
  • 3. 静态属性
  • 4. 抽象类
  • 5. 构造函数
  • 5. 把类当接口使用

Was this helpful?

  1. TypeScript 语法

类

1. 继承

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }      // super
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

如果子类包含了构造函数,那么它必须调用 super(), 它会执行基类的构造函数。并且在构造函数访问this属性之前,一定要调用 super();

2. 公共,私有与受保护的修饰符

在 typescript 里,成员都默认为 public

class Animal {
    public name: string;
    public constructor(theName: string) {
        this.name = theName;
    }
    public move(distabceInMeters: number) {
        ...
    }
}

private

class Animal {
    private name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}

new Animal('CAT').name;      // error, 不能再声明它的类之外访问

protected

protected 与 privated 类似,但是 protected 成员在子类中可以访问。

class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }
}

class Employee extends Person {
    private department: string;

    constructor(name: string, department: string) {
        super(name)
        this.department = department;
    }

    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());  // 成功,在子类中访问属性
console.log(howard.name); // 错误,不能在子类之外访问

3. 静态属性

class Grid {
    static origin = {
        x: 0,
        y: 0
    }
    calculate(point: { x: number, y: number } ) {
        let xDist = point.x - Grid.origin.x;      // 静态属性的使用,直接用类.属性名
    }
}

4. 抽象类

抽象类作为其它派生类的基类使用,不会直接被实例化。

使用 abstract 关键字定义抽象类和在抽象类内部定义抽象方法

abstract class Animal {
    abstract makeSound(): void;   // 抽象方法,必须在派生类中实现
    move(): void {

    }
}

5. 构造函数

在TypeScript中声明一个类的时候,实际上声明了很多东西,比如, 类的实例的类型

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
}

let greeter: Greeter;     // 表明 greeter 是 Greeter 类的实例的类型

除了类的实例的类型,我们可能还关注,类的类型

class Greeter {
    static standardGreeting = "Hello, there";
    greeting: string;
    greet() {
        if (this.greeting) {
            return "Hello, " + this.greeting;
        }
        else {
            return Greeter.standardGreeting;
        }
    }
}

let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet());

// 得到 Gretter 的类的类型,这时候声明的变量,和 Gretter一样,可以被 new 
let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey there!";

let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());

即通过 typeof 操作符,可以得到类的类型。

5. 把类当接口使用

类定义会创建两个东西: 类的实例类型和一个构造函数,那么实例类型就可以当做接口去使用

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {  // 当做接口去继承
    z: number;
}

let point3d: Point3d = {x:1, y:2, z:3}
Previous接口Next函数

Last updated 4 years ago

Was this helpful?