1、interface和type的区别
-
interface可定义多次，对象会被合并;type不允许重复定义
-
interface使用extends实现继承，type使用&;二者可互相继承;
-
type若是union type,则不能被implements;其他情况均可实现
-
type还可以用于其他类型，如基础类型、联合和元组;interface只能描述对象和函数，语法和type不同
interface Point { x: number; }
interface Point { y: number; }
const point: Point = { x: 1, y: 2 };
type Point2 = { x: number; }
//2
interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }
interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }
//3
type PartialPoint = { x: number; } | { y: number; };
class SomePartialPoint implements PartialPoint {
x = 1;
y = 2;
}
//4
// primitive
type Name = string; type PartialPointY = { y: number; };
// union
ty`pe PartialPoint2 = PartialPointX | PartialPointY;
// tuple
type Data = [number, string];
type Table = {}
interface Chair { }</pre>
2、ts高级技巧
keyof | Pick | Omit |
3、any和unknown类型（更推荐）
never 类型 :
interface Foo {
type: 'foo'
}
interface Bar {
type: 'bar'
}
type All = Foo | Bar
断言
<>和as
非空断言
!
//如果不用!修饰y,则打印这一行会报错
let y!:number;
test();
console.log(y);
类型守卫(in、typeof、instanceof)
联合类型
in
keyof</pre>
4、declare声明全局对象
type UcfViewEntity = {}
}
5、infer
一个占位符，临时存储对应的变量
7.基础
定义obj：以下，obj的key为string类型，value也为string类型。
type obj = { [k: string]: string };
8.装饰器
- 类装饰器
在类声明之前声明一个类装饰器。类装饰器应用于类的构造函数，可用于观察，修改或替换类定义。不能在声明文件或任何其他环境上下文（例如，在declare类中）中使用类装饰器。
类装饰器的表达式将在运行时作为函数调用，装饰类的构造函数为其唯一参数。
function Greeter1(target: Function): void {
console.log(target);
target.prototype.greet = function (): void {
console.log("Hello Semlinker!");
};
}
function Greeter2(greeting: string) {
return function (target: Function) {
target.prototype.greet = function (): void {
console.log(greeting);
};
};
}
@Greeter1
class Greeting {
constructor() {
// 内部实现
}
}
@Greeter2("hello world")
class Greeting {
constructor() {
// 内部实现
}
}
let myGreeting = new Greeting();
(myGreeting as any).greet();
- 方法装饰器
在方法声明之前声明方法装饰器。装饰器将应用于方法的属性描述符，并可用于观察，修改或替换方法定义。方法修饰符不能在声明文件，重载或任何其他环境上下文（例如在declare类中）中使用。
方法装饰器的表达式将在运行时作为函数调用，并带有以下三个参数：
- 静态成员的类的构造函数或实例成员的类的原型。
- 成员的名称。
- 成员的属性描述符。
function log(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
console.log(target, propertyKey, descriptor);
let originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log("wrapped function: before invoking " + propertyKey);
let result = originalMethod.apply(this, args);
console.log("wrapped function: after invoking " + propertyKey);
return result;
};
}
class Task {
@log
runTask(arg: any): any {
console.log("runTask invoked, args: " + arg);
return "finished";
}
}
let task = new Task();
let result = task.runTask("learn ts");
console.log("result: " + result);
- 属性装饰器
一个属性装饰器只是属性声明之前声明。不能在声明文件或任何其他环境上下文（例如，declare类）中使用属性装饰器。
属性装饰器的表达式将在运行时作为函数调用，并带有以下两个参数：
- 静态成员的类的构造函数或实例成员的类的原型。
- 成员的名称。
function logProperty(target: any, key: string) {
console.log(target, key);
delete target[key];
const backingField = "_" + key;
Object.defineProperty(target, backingField, {
writable: true,
enumerable: true,
configurable: true
});
// property getter
const getter = function (this: any) {
const currVal = this[backingField];
console.log(`Get: ${key} => ${currVal}`);
return currVal;
};
// property setter
const setter = function (this: any, newVal: any) {
console.log(`Set: ${key} => ${newVal}`);
this[backingField] = newVal;
};
// Create new property with getter and setter
Object.defineProperty(target, key, {
get: getter,
set: setter,
enumerable: true,
configurable: true
});
}
class Person1 {
@logProperty
public name: string;
constructor(name: string) {
this.name = name;
}
}
const p1 = new Person1("semlinker");
p1.name = "kakuqo";
p1.name;
- 参数装饰器
在参数声明之前就声明了一个参数装饰器。参数装饰器应用于类构造函数或方法声明的函数。参数修饰符不能在声明文件，重载或任何其他环境上下文（例如在declare类中）中使用。
参数装饰器的表达式将在运行时作为函数调用，并带有以下三个参数：
- 静态成员的类的构造函数或实例成员的类的原型。
- 成员的名称。
- 函数的参数列表中参数的序号索引。
如下 validate
import "reflect-metadata";
const requiredMetadataKey = Symbol("required");
function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
existingRequiredParameters.push(parameterIndex);
Reflect.defineMetadata( requiredMetadataKey, existingRequiredParameters, target, propertyKey);
}
function validate(target: any, propertyName: string, descriptor: PropertyDescriptor) {
// console.log(target,propertyName,descriptor,arguments);
let method = descriptor.value!;
descriptor.value = function () {
let requiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyName);
if (requiredParameters) {
for (let parameterIndex of requiredParameters) {
if (parameterIndex >= arguments.length || arguments[parameterIndex] === undefined) {
throw new Error("Missing required argument.");
}
}
}
return method.apply(this,arguments);
};
}
class BugReport {
type = "report";
title: string;
constructor(t: string) {
this.title = t;
}
@validate
print(@required verbose: boolean) {
console.log(verbose);
if (verbose) {
return `type: ${this.type}\ntitle: ${this.title}`;
} else {
return this.title;
}
}
}
let result = new BugReport('hello world').print(false);
console.log(result);
- 存取装饰器
访问器装饰器在访问器声明之前被声明。访问器修饰符应用于访问器的属性描述符，可用于观察，修改或替换访问器的定义。访问器修饰符不能在声明文件或任何其他环境上下文（例如，declare类）中使用。
注意TypeScript不允许装饰单个成员的get和set访问器。而是，该成员的所有装饰器必须应用于按文档顺序指定的第一个访问器。这是因为装饰器适用于Property Descriptor，它组合了get和set访问器，而不是分别合并每个声明。
访问器装饰器的表达式将在运行时作为函数调用，并带有以下三个参数：
- 静态成员的类的构造函数或实例成员的类的原型。
- 成员的名称。
- 成员的属性描述符。
//此处代码有疑问
function configurable(value: boolean) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
descriptor.configurable = value;
console.log(target,propertyKey,descriptor);
};
}
class Point {
private _x: number;
private _y: number;
constructor(x: number, y: number) {
this._x = x;
this._y = y;
}
@configurable(false)
get x() {
return this._x;
}
@configurable(false)
get y() {
return this._y;
}
}
let p = new Point(94,92);
p.x;
p.y;
Object.defineProperty(p,'_x',{writable:false});
console.log(Object.getOwnPropertyDescriptors(p));
网友评论