typescript 创建项目

npm init -y
tsc --init
//安装依赖
npm install -D ts-node
npm install typescript -D
npm install superagent --save
//安装翻译文件
npm i --save-dev @types/superagent

npm install cheerio --save
npm install @types/cheerio --save

工具

npm i concurrently -D
 "dev": "concurrently npm:dev:*"

tsconfig配置说明
https://www.tslang.cn/docs/handbook/tsconfig-json.html

类型保护

interface Bird {
  fly: boolean;
  sing: () => {};
}
interface Dog {
  fly: boolean;
  bark: () => {};
}

//类型断言的方式
function trainAnimal(animal: Bird | Dog) {
  if (animal.fly) {
    (animal as Bird).sing();
  } else {
    (animal as Dog).bark();
  }
}

// in 语法来做类型保护
function trainAnimal2(animal: Bird | Dog) {
  if ("sing" in animal) {
    animal.sing();
  } else {
    animal.bark();
  }
}

// typeof 方法来做类型保护
function add(first: string | number, second: string | number) {
  if (typeof first === "string" || typeof second === "string") {
    return `${first}${second}`;
  }
  return first + second;
}

class NumberObj {
  count: number = 0;
}
// instanceof 方法来做类型保护
function add2(first: object | NumberObj, second: object | NumberObj): number {
  if (first instanceof NumberObj && second instanceof NumberObj) {
    return first.count + second.count;
  }
  return 0;
}

枚举

enum Status {
  OFFLINE = 1,
  ONLINE,
  DELETED,
}

console.log(Status.OFFLINE);
console.log(Status.ONLINE);
console.log(Status.DELETED);
console.log(Status[0]);

泛型 generic 泛指的类型

function join<T, P>(first: T, second: P) {
  return `${first} ${second}`;
}

join<number, string>(1, "1");

// function map<ABC>(params: ABC[]) {
//   return params;
// }

function map<T>(params: Array<T>) {
  return params;
}
map<string>(["123"]);

在类中使用泛型

interface Item {
  name: string;
}
class DataManager<T extends Item> {
  constructor(private data: T[]) {}
  getItem(index: number): string {
    return this.data[index].name;
  }
}

// const data = new DataManager([1]);
// data.getItem(0);

// const data = new DataManager<number>([1]);
// data.getItem(0);

const data = new DataManager([{ name: "dell" }]);
data.getItem(0);

//是数字或字符串
class DataManager<T extends number|string> {
  constructor(private data: T[]) {}
  getItem(index: number): string {
    return this.data[index].name;
  }
}

//使用泛型做具体的类型注解
function hello<T>(params: T) {
  return params;
}
const func: <T>(params: T) => T = hello;

console.log(func(1));

parcel打包

npm i parcel -D

描述文件

interface JqueryInstance {
  html: (html: string) => JqueryInstance;
}

// //定义全局变量
// declare var $: (param: () => void) => void;

//定义全局函数
declare function $(readyFunc: () => void): void;
declare function $(selector: string): JqueryInstance;
declare namespace $ {
  namespace fn {
    function init(): void;
    // class init {}
  }
}

// interface JQuery {
//   (readyFunc: () => void): void;
//   (selector: string): JqueryInstance;
// }

// declare var $: JQuery;

泛型中keyof语法的使用

interface Person {
  name: string;
  age: number;
  gender: string;
}

class Teacher {
  constructor(private info: Person) {}
  getInfo<T extends keyof Person>(key: T): Person[T] {
    return this.info[key];
  }
}

const person = {
  name: "dell",
  age: 18,
  gender: "women",
};

let test = new Teacher(person);
console.log(test.getInfo("age"));

装饰器

// function testDecorator(flag: boolean) {
//   if (flag) {
//     return function (constructor: any) {
//       constructor.prototype.getName = () => {
//         console.log("dell");
//       };
//     };
//   } else {
//     return function (constructor: any) {};
//   }
// }

// @testDecorator(true)
// class Test {}

// const test = new Test();
// (test as any).getName();
function testDecorator() {
  return function <T extends new (...args: any[]) => any>(constructor: T) {
    return class extends constructor {
      name = "yan";
      getName() {
        return this.name;
      }
    };
  };
}

// function testDecorator<T extends new (...args: any[]) => any>(constructor: T) {
//   return class extends constructor {
//     name = "yan";
//   };
// }

const Test = testDecorator()(
  class {
    constructor(public name: string) {
      console.log(name);
    }
  }
);

const test = new Test("Melissa");
console.log(test.getName());

// function getNameDecorator(target: any, key: string) {
//   console.log(target);
// }

// class Test1 {
//   name: string;
//   constructor(name: string) {
//     this.name = name;
//   }
//   @getNameDecorator
//   getName() {
//     return this.name;
//   }
// }

function visitDecorate(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
) {
  descriptor.writable = false;
}

class Test1 {
  constructor(private _name: string) {}
  get name() {
    return this._name;
  }
  @visitDecorate
  set name(name: string) {
    this._name = name;
  }
}