1瞻润、interface和type的區(qū)別
interface可定義多次渣窜，對象會被合并;type不允許重復定義
interface使用extends實現(xiàn)繼承，type使用&;二者可互相繼承;
type若是union type,則不能被implements;其他情況均可實現(xiàn)
type還可以用于其他類型缀匕，如基礎類型强窖、聯(lián)合和元組;interface只能描述對象和函數(shù)，語法和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);
類型守衛(wèi)(in、typeof诀黍、instanceof)
聯(lián)合類型
in
keyof</pre>
4袋坑、declare聲明全局對象
type UcfViewEntity = {}
}
5、infer
一個占位符眯勾，臨時存儲對應的變量
7.基礎
定義obj：以下枣宫，obj的key為string類型婆誓，value也為string類型。
type obj = { [k: string]: string };
8.裝飾器
- 類裝飾器
在類聲明之前聲明一個類裝飾器也颤。類裝飾器應用于類的構造函數(shù)洋幻，可用于觀察，修改或替換類定義歇拆。不能在聲明文件或任何其他環(huán)境上下文（例如鞋屈，在declare類中）中使用類裝飾器。
類裝飾器的表達式將在運行時作為函數(shù)調用故觅，裝飾類的構造函數(shù)為其唯一參數(shù)厂庇。
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() {
// 內部實現(xiàn)
}
}
@Greeter2("hello world")
class Greeting {
constructor() {
// 內部實現(xiàn)
}
}
let myGreeting = new Greeting();
(myGreeting as any).greet();
- 方法裝飾器
在方法聲明之前聲明方法裝飾器。裝飾器將應用于方法的屬性描述符输吏，并可用于觀察权旷，修改或替換方法定義。方法修飾符不能在聲明文件贯溅，重載或任何其他環(huán)境上下文（例如在declare類中）中使用拄氯。
方法裝飾器的表達式將在運行時作為函數(shù)調用，并帶有以下三個參數(shù)：
- 靜態(tài)成員的類的構造函數(shù)或實例成員的類的原型它浅。
- 成員的名稱译柏。
- 成員的屬性描述符。
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);
- 屬性裝飾器
一個屬性裝飾器只是屬性聲明之前聲明姐霍。不能在聲明文件或任何其他環(huán)境上下文（例如鄙麦，declare類）中使用屬性裝飾器。
屬性裝飾器的表達式將在運行時作為函數(shù)調用镊折，并帶有以下兩個參數(shù)：
- 靜態(tài)成員的類的構造函數(shù)或實例成員的類的原型胯府。
- 成員的名稱。
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;
- 參數(shù)裝飾器
在參數(shù)聲明之前就聲明了一個參數(shù)裝飾器恨胚。參數(shù)裝飾器應用于類構造函數(shù)或方法聲明的函數(shù)骂因。參數(shù)修飾符不能在聲明文件，重載或任何其他環(huán)境上下文（例如在declare類中）中使用赃泡。
參數(shù)裝飾器的表達式將在運行時作為函數(shù)調用寒波，并帶有以下三個參數(shù)：
- 靜態(tài)成員的類的構造函數(shù)或實例成員的類的原型。
- 成員的名稱升熊。
- 函數(shù)的參數(shù)列表中參數(shù)的序號索引影所。
如下 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);
- 存取裝飾器
訪問器裝飾器在訪問器聲明之前被聲明。訪問器修飾符應用于訪問器的屬性描述符僚碎，可用于觀察，修改或替換訪問器的定義阴幌。訪問器修飾符不能在聲明文件或任何其他環(huán)境上下文（例如勺阐，declare類）中使用卷中。
注意TypeScript不允許裝飾單個成員的get和set訪問器。而是渊抽，該成員的所有裝飾器必須應用于按文檔順序指定的第一個訪問器蟆豫。這是因為裝飾器適用于Property Descriptor，它組合了get和set訪問器懒闷，而不是分別合并每個聲明十减。
訪問器裝飾器的表達式將在運行時作為函數(shù)調用，并帶有以下三個參數(shù)：
- 靜態(tài)成員的類的構造函數(shù)或實例成員的類的原型愤估。
- 成員的名稱帮辟。
- 成員的屬性描述符。
//此處代碼有疑問
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));
