ts 学习笔记

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类中）中使用。
  方法装饰器的表达式将在运行时作为函数调用，并带有以下三个参数：

1. 静态成员的类的构造函数或实例成员的类的原型。
2. 成员的名称。
3. 成员的属性描述符。

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类）中使用属性装饰器。
  属性装饰器的表达式将在运行时作为函数调用，并带有以下两个参数：

1. 静态成员的类的构造函数或实例成员的类的原型。
2. 成员的名称。

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类中）中使用。
  参数装饰器的表达式将在运行时作为函数调用，并带有以下三个参数：

1. 静态成员的类的构造函数或实例成员的类的原型。
2. 成员的名称。
3. 函数的参数列表中参数的序号索引。
   如下 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访问器，而不是分别合并每个声明。
  访问器装饰器的表达式将在运行时作为函数调用，并带有以下三个参数：

1. 静态成员的类的构造函数或实例成员的类的原型。
2. 成员的名称。
3. 成员的属性描述符。

//此处代码有疑问
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));