Typescript学习

// 基础类型：number null undefined symbol boolean void any string
let a= 123;
a = 456; //静态类型

let a : number | string= 123;
a = 456; //

type o = { a: number, b: number }
let a: o;;
a = { a: 1, b: 5 }; //
console.log(a);

interface o {
a: number;
b: number;
 }

let a: o;
a = { a: 1, b: 5 }; //静态类型
console.log(a);

class Person {}
let people: Person = new Person();

对象类型
//类类型
class Person {}
let people: Person = new Person();
//数组类型
let a: number[] = [1, 2, 3];
let a: (number | string)[] = [1, 2, 3];
//对象类型
let o: { a: number; b: number } = { a: 5, b: 6 };
//函数类型
let getToatal: () => number = () => 123
//书写完整函数类型
let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };

let myAdd: (baseValue: number, increment: number) => number =
    function(x: number, y: number): number { return x + y; };//参数名字可以不同
//类型注解 类型推断

函数解构参数数据类型
function add({ first, second }: { first: number; second: number }): number {
  return first + second;
}
//type alias 类型别名
type User = { name: string; age: number };
const objectArr: User[] = [
  {
    name: "vaechy",
    age: 15,
  },
];

interface Person {
  readonly id: number; //readonly 只读
  name: string;
  age?: number;
  [propName: string]: any; //可以增加其他属性
}
function setPerson(person: Person): void {}
setPerson({ id: 6, name: "vaechy" });
setPerson({ id: 8, name: "vaechy", age: 15, sex: "male" });

//对象类接口
interface Person {
  readonly id: number; //readonly 只读
  name: string;
  age?: number;
  [propName: string]: any; //可以接受额外属性
  sayHi(): string;
}
class User implements Person {
  id = 5;
  name = "vaechy";
  sayHi(): string {
    return "Hi";
  }
}
const my = new User();
console.log(my);

// 函数类接口
interface sayHi { 
  (word:string):string
}
const say: sayHi = (word) => { return word}
//简化写法定义成员变量
class Person {
  // public name: string;
  constructor(public name: string) { //简化写法
    this.name = name;
  }
}

//继承的一个问题
class Person {
  constructor(public name: string) {
    this.name = name;
  }
}
//子类
class Teacher extends Person { 
  constructor(public age: number) { 
    super('age') //父类有构造器，必须实现父类的构造方法
  }
}
const teacher = new Teacher(18)

类的setter和getter
class Person {
  constructor(private _name: string) {
    this._name = _name;
  }
  get name() {
    return this._name;
  }
  set name(name: string) {
    this._name = name + this._name;
  }
}
const teacher = new Person("vaechy");
teacher.name = "cen ";
console.log(teacher.name);

//单例模式
class Person {
  private static obj: Person;
  private constructor(public name: string) {
    this.name = name;
  }
  static getInstance(name: string) {
    if (!this.obj) {
      this.obj = new Person(name);
    }
    return this.obj;
  }
}
const demo1 = Person.getInstance("vaechy");
const demo2 = Person.getInstance("cenhuayi");
console.log(demo1.name); //vaechy
console.log(demo2.name); //vaechy1
console.log(demo1 === demo2);

//抽象类
abstract class Geom { 
  width: number
  getType() { 
    return 'Gemo'
  }
  abstract getArea():number
}

//泛型
//类定义泛型
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([{ name: "vaechy" }]);
console.log(data.getItem(0));
//实例
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
//函数泛型
function F<T>(params: T): T {
  return params;
}
const func: <T>(parame: T) => T = F
F<string>('string')
//泛形约束
interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}
loggingIdentity({length: 10, value: 3});
//命名空间
namespace Name {
  class A {
    constructor() {
      const h1 = document.createElement("h1");
      h1.innerText = "IM A";
      document.body.appendChild(h1);
    }
  }
  class B {
    constructor() {
      const h1 = document.createElement("h1");
      h1.innerText = "IM B";
      document.body.appendChild(h1);
    }
  }
  class C {
    constructor() {
      const h1 = document.createElement("h1");
      h1.innerText = "IM C";
      document.body.appendChild(h1);
    }
  }
  //暴露模块
  export class initialize {
    constructor() {
      new A();
      new B();
      new C();
    }
  }
}
new Name.initialize(); //调用方法

//定义类型描述
interface Jqueryobj {
  append: (param: string) => Jqueryobj;
}
// declare function $(param: () => void): void;
declare function $(param: string): Jqueryobj;
declare namespace $ {
  namespace fn {
    class init {}
  }
}
//调用
$(function () {
  $("body").append("追加文本");
  new $.fn.init();
});

//模块化描述文件
declare module "jquery" {
  interface Jqueryobj {
    append: (param: string) => Jqueryobj;
  }
  // function $(param: () => void): void;
  function $(param: string): Jqueryobj;
  namespace $ {
    namespace fn {
      class init {}
    }
  }
  export default $;
}
//调用
import $ from "jquery";
$(function () {
  $("body").append("追加文本");
  new $.fn.init();
});


//keyof的用法
interface Person {
  name: string;
  age: number;
  gender: string;
}

//类似
//type T = 'name'
// key = 'name';
// Person['name'];
class Teacher {
  constructor(private info: Person) {}
  getInfo<T extends keyof Person>(key: T): Person[T] {
    return this.info[key];
  }
}
const v = new Teacher({
  name: "vaechy",
  age: 15,
  gender: "male",
});
console.log(v.getInfo("age"))