class

private 和 # 的区别

前缀 private 只是TS语法,在运行时不起作用,外部能够访问,但是类型检查器会报错
class Bag { private item: any }
修饰符 # 是JS语法,是运行时私有的,并且在JavaScript引擎内部强制执行,它只能在类内部访问
class Bag { #item: any }

类型和值(Type and Value)

class 能够作为一个类型和一个值,但是最好不要这么做
class Bag { }
const a: Bag = new Bag()
class C implements Bag { }

常用语法(common Syntax)

class User {
name: string // 必须声明才能在 constructor 赋值
constructor(name: string) {
this.name = name
}
}

以下是上面简写,public 可换成 private ,public readonly,protected, 等等......,但不能是 js 语法 static 和 # 修饰符

class User {
constructor(public name:string){}
}

其它常用语法

interface Updatable { }
type Serializzable = {}
class Account { }
// 继承 Account 类,实现 Updatable 接口 和 Serializzable 类型
class User extends Account implements Updatable, Serializzable {
id: string;
displayName?: boolean; // 可选
name!: string; // 告诉类型检查器 name 有值
#attributes: Map<any, any>; // 私有属性,js语法
roles = ["user"]; // 默认值
readonly createdAt = new Date(); //只读属性
constructor(id: string) {
super()
this.id = id
this.#attributes = new Map()
} setName(name: string) { this.name = name } // 原型方法
verifyName = (name: string) => { this.name = name } // 实例方法 // 函数重载
sync(): Promise<{}>
sync(cb: (result: string)=>void): void
// 方法类型声明完成,后要接着方法实现
sync(cb?: (result: string)=>void): void | Promise<{}>{}
// Getters and Setters
get accountID(){return 123}
set accountID(value: number){ /** ... */ }
// protected 只能在类和继承类的后代类中使用,不可以在实例中使用
protected handleReques(){}
// 静态类型,js语法
static #userCount = 0 // 只能在静态方法里使用
static registerUser(user: number){this.#userCount = user}
}

泛型(Generics)

class Box<Type>{
constructor(public content:Type){}
}
const stringBox = new Box("a package")
// stringBox: Box<string>

抽象类(Abstract Classes)

在 TypeScript 中,类,方法和字段都可以是抽象的。抽象方法和字段都只能出现在抽象类中。
抽象类自身不能实例化,只能作为派生类的基类,派生类必须实现抽象类的所有抽象方法和字段。
abstract class Base {
abstract getName(): string; printName() {
console.log("Hello, " + this.getName());
}
}
const b = new Base(); // 错误,无法创建抽象类的实例。 class Derived extends Base {
// 必须实现该抽象函数
getName() {
return "world";
}
}
const d = new Derived();
d.printName();

抽象构造签名(Abstract Construct Signatures)

有时你想接受一个构造函数,产生一个实例,这个构造函数是某个抽象类派生的类
Bad!这种写法,在传递抽象类的时候 TypeScript 没有报错,只有new 实例化才报错
function greet(ctor: typeof Base) {
const instance = new ctor(); // 无法创建抽象类的实例。
instance.printName();
}
greet(Base);
Great!接受一个带有构造签名的参数,这种写法,在传递抽象类的时候 TypeScript 就报错了
function greet2(ctor: new () => Base) {
const instance = new ctor();
instance.printName();
}
greet2(Derived);
greet2(Base);

抽象类继承抽象类

抽象类继承抽象类,两抽象类会进行合并,出现相同名称的抽象方法和字段,如果不同类型会报错,但是相同类型,子类型,any,这些都不会报错。
abstract class Base {
abstract getName(): string;
abstract asd: string
printName() {
console.log("Hello, " + this.getName());
}
}
abstract class Bag extends Base {
abstract getName(): any; // 相同抽象方法,返回值改为any,不报错
abstract asd: '456' // 相同抽象字段,返回值改为 string 子类型,不报错
}
class Derived extends Bag {
constructor(public asd: '456') {
super()
}
getName() {
return 123;
}
}
const d = new Derived('456');
d.printName();
这里的 extends 是js 语法,类只能继承一个。并不是 ts 的 extends, 用于 Interface  扩展,和类型缩窄
class Derived extends Bag, Base {} // 错误

修饰器和属性(Decorators and Attributes)

在 "tsconfig" 中打开 "experimentalDecorators"
可以在类,方法,方法参数,属性和访问器上用修饰器
import { Syncable, triggerSync, preferCache, required } from "mylib"
@Syncable
class User {
@triggerSync() // 方法
save() { }
@preferCache(false) // 访问器
get displayName() { }
update(@required info: Partial<User>) { } // 方法参数
}
一个声明应用多个装饰器,会从下到上调用
function first(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("first(): called");
};
function second(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("second(): called");
}; class ExampleClass {
// 单行,多行,两种写法
@first @second method() { }
// @first
// @second
// method() { }
}
const exampleClass = new ExampleClass();
exampleClass.method()
// second(): called
// first(): called
一个声明应用多个装饰器工厂(decorator factories),会从上到下调用后,从下到上调用返回的函数
function first() {
console.log("first(): factory evaluated");
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("first(): called");
};
} function second() {
console.log("second(): factory evaluated");
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log("second(): called");
};
} class ExampleClass {
@first()
@second()
method() { }
}
const exampleClass = new ExampleClass();
exampleClass.method() // first(): factory evaluated
// second(): factory evaluated
// second(): called
// first(): called

Decorator Evaluation

应用于类内部各种声明的装饰器,有一个明确定义的顺序:
  1. 实例成员,(参数装饰器,其次是方法),(访问器),(属性装饰器), 这三者按照声明顺序调用
  2. 静态成员,(参数装饰器,其次是方法),(访问器),(属性装饰器), 这三者按照声明顺序调用
  3. 构造函数参数修饰器
  4. 类修饰器
 还有一个注意点,参数修饰器中,越往后的参数修饰器,越早调用
function classDecorator(constructor: Function) {
console.log("classDecorator");
};
function propertyDecorator(name: string) {
return function (target: any, propertyKey: string) {
console.log(name);
}
}
function parameterDecorator(name: string) {
return function (target: any, functionName: string, index: number) {
console.log(name);
}
}
function methodDecorator(name: string) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(name);
};
}
function accessorDecorator(name: string) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(name);
}
} @classDecorator
class ExampleClass { constructor(@parameterDecorator("constructorParameter") greeting: string, @parameterDecorator("constructorParameter2") public appService: string) {
this.greeting = greeting
} @accessorDecorator("staticAccessor") static get x() {return 123}
@propertyDecorator("staticProperty") static id: number
@methodDecorator("staticMethod")
static smethod(@parameterDecorator('staticParmeter') value: string) { } @propertyDecorator("instanceProperty") greeting: string
@methodDecorator("instanceMethod")
method(value: string, @parameterDecorator('instanceParmeter') value2: string) { }
@accessorDecorator("instanceAccessor") get x() {return 123} }
const exampleClass = new ExampleClass('asd', 'wew');
exampleClass.method('a', 'b') // [LOG]: "instanceProperty"
// [LOG]: "instanceParmeter"
// [LOG]: "instanceMethod"
// [LOG]: "instanceAccessor"
// [LOG]: "staticAccessor"
// [LOG]: "staticProperty"
// [LOG]: "staticParmeter"
// [LOG]: "staticMethod"
// [LOG]: "constructorParameter2"
// [LOG]: "constructorParameter"
// [LOG]: "classDecorator"

感谢观看,欢迎互相讨论与指导,以下是参考资料链接

https://www.typescriptlang.org/static/TypeScript%20Classes-83cc6f8e42ba2002d5e2c04221fa78f9.png

TypeScript 之 Class的更多相关文章

  1. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  2. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  3. TypeScript Vs2013 下提示Can not compile modules unless '--module' flag is provided

    VS在开发TypeScript程序时候,如果import了模块有的时候会有如下提示: 这种情况下,只需要对当前TypeScript项目生成设置为AMD规范即可!

  4. TypeScript

    TypeScript: Angular 2 的秘密武器(译)   本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch? ...

  5. 打造TypeScript的Visual Studio Code开发环境

    打造TypeScript的Visual Studio Code开发环境 本文转自:https://zhuanlan.zhihu.com/p/21611724 作者: 2gua TypeScript是由 ...

  6. 转职成为TypeScript程序员的参考手册

    写在前面 作者并没有任何可以作为背书的履历来证明自己写作这份手册的分量. 其内容大都来自于TypeScript官方资料或者搜索引擎获得,期间掺杂少量作者的私见,并会标明. 大部分内容来自于http:/ ...

  7. Webstorm编译TypeScript

    下载webstorm 下载node.js编译器npm   Webstorm的安装很简单.但如果没有Java For Mac 环境打开Webstorm时会有提示,点击提示会跳转下载链接,下载安装就好. ...

  8. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  9. 使用TypeScript拓展你自己的VS Code!

    0x00 前言 在前几天的美国纽约,微软举行了Connect(); //2015大会.通过这次大会,我们可以很高兴的看到微软的确变得更加开放也更加务实了.当然,会上放出了不少新产品和新功能,其中就包括 ...

  10. 产品前端重构(TypeScript、MVC框架设计)

    最近两周完成了对公司某一产品的前端重构,本文记录重构的主要思路及相关的设计内容. 公司期望把某一管理类信息系统从项目代码中抽取.重构为一个可复用的产品.该系统的前端是基于 ExtJs 5 进行构造的, ...

随机推荐

  1. flask-bootstrap 模版中所需的CSS/JS文件实现本地引入

    Flask-Bootstrap默认是加载CDN的css与js文件,每次刷新页面都要访问到外网的cdn来获取css与js文件; 模版扩展来自于bootstrap/base.html,就以bootstra ...

  2. 使用k8s部署springcloud解决三大问题

    1.正式环境使用的话启动时需要指定使用正式的配置文件,这个要咋处理? 解决办法 文章地址:https://www.cnblogs.com/sanduzxcvbnm/p/13262411.html 分析 ...

  3. Spring boot定义多个配置文件并自由切换

    在resource目录下定义三个配置文件 (properties文件已被我注销,配置文件建议用yml,如果properties文件与yml文件同时存在,SpringBoot会优选加载propertie ...

  4. PAT (Basic Level) Practice 1033 旧键盘打字 分数 20

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在 2 行中分别给出坏掉的那些键.以及应该输入 ...

  5. PHP全栈开发(四): HTML 学习(3. form 表单)

    form 表单标签 它表的是一个区域,而非是一个具体的某个元素,它也是作为一个容器的存在. 表单域主要是允许用户在表单域中输入内容,比如文本框,下拉列表,单选框,复选框,等等. <!DOCTYP ...

  6. POJ3417 Network暗的连锁 (树上差分)

    树上的边差分,x++,y++,lca(x,y)-=2. m条边可以看做将树上的一部分边覆盖,就用差分,x=1,表示x与fa(x)之间的边被覆盖一次,m次处理后跑一遍dfs统计子树和,每个节点子树和va ...

  7. Spring_Boot项目集成Swagger填坑

    事情是这样的: 最近疫情在家里闲的无聊 看了看Swagger-2 在练习的过程出现了错误 写个帖子 希望跟我有同样问题的朋友可以避雷. 下面进入正题: 编辑 我使用的swagger-2版本是2.9.4 ...

  8. 图解 | 聊聊 MyBatis 缓存

    首发公众号-悟空聊架构:图解 | 聊聊 MyBatis 缓存 你好,我是悟空. 本文主要内容如下: 一.MyBatis 缓存中的常用概念 MyBatis 缓存:它用来优化 SQL 数据库查询的,但是可 ...

  9. Linux基础_1_简介

    Linux是什么 一款优秀的操作系统软件,特性是一切皆文件:一切设备皆文件!一切设备的设置皆修改配置文件!一切服务的搭建皆修改配置文件!(庞大的树形结构文件系统) 根据FHS标准,Linux目录有以下 ...

  10. SpringBoot自定义注解+异步+观察者模式实现业务日志保存

    一.前言 我们在企业级的开发中,必不可少的是对日志的记录,实现有很多种方式,常见的就是基于AOP+注解进行保存,但是考虑到程序的流畅和效率,我们可以使用异步进行保存,小编最近在spring和sprin ...