{ // class User { // private site: string = "baidu.com"; // readonly address: string = "xian"; // constructor(protected name: string, protected age: number) { // this.name = name; // this.age = age; // }

// get ages() { // return this.age; // } // }

// let gz = new User("hah", 12); // // gz.address = "baoji" // console.log("gz", gz.address);

// // 属性是对象独有的，方法在原型上

// // 单例模式 // class Axios {} // console.clear(); // // 抽象类 // abstract class Animation { // abstract name: string; // abstract move(): void; // protected getPos(): number[] { // return [100, 300]; // } // } // class Tank extends Animation { // name: string = "坦克"; // public move(): void { // console.log("坦克移动"); // } // } // class Player extends Animation { // name: string = "玩家"; // public move(): void { // console.log("玩家移动"); // } // }

// let tank = new Tank(); // let player = new Player(); // tank.move(); // player.move();

// // 抽象类和interface // interface Gz1 { // // name: string; // // age: number; // // move(): void; // // } // // // 接口继承 // // interface Gz2 extends Gz1 { // // sex: string; // // } // // class Build implements Gz1, Gz2 { // // sex: string; // // age: number; // // name: string; // // move(): void { // // throw new Error("Method not implemented."); // // } // }

// // 基础类型 // let hd1: string = "123123"; // let hd2: string[] = ["houdunren.com", "后盾人"]; // let hd3: [string, string, boolean] = ["houdunren.com", "后盾人", true]; // // 函数 // let hd4: Function; // hd4 = () => {};

// function hd5(a: number, b?: number): number { // return a; // } // hd5(2, 4); // // console.log("hd1", typeof hd1); // // console.log("hd2", typeof hd2); // // console.log("hd3", typeof hd3); // // console.log("hd4", typeof hd4);

// type userType = { // name: string; // age: number; // }; // let addUser = (user: userType): userType => { // return user; // };

// addUser({ // name: "gz", // age: 18, // });

// // 交叉类型 // interface A { // name: string; // } // type B = { age: number };

// let c: A & B = { name: "gz", age: 100 };

// // 泛型 // function dump(arg: T): T { // return arg; // } // let hd = dump("后盾人");

// interface ICanvas { // name: string; // width: number; // height: number; // top: number; // left: number; // opcacity: number; // backgroundImg?: string; // version: string; // desc?: string; // canvas: ICanvas[]; // }

// class Canvas implements ICanvas { // public static instance = null; // public name: string = "新画布"; // public width: number = 1920; // public height: number = 1080; // public top: number = 0; // public left: number = 0; // public opcacity: number = 1; // public backgroundImg?: string | undefined = ""; // public version: string = "1.0"; // public desc?: string | undefined = ""; // public canvas: ICanvas[] = [];

// constructor() {}

// public static create() { // const canvasData = new Canvas(); // console.log("canvasData", canvasData); // // canvasData.addCanvas(canvas); // // if (Canvas.instance == null) { // // return new Canvas(); // // } // // return instance; // }

// public getAspectRatio(): string { // return (this.width / this.height).toFixed(2); // } // public getPosition(): number[] { // return [this.top, this.left]; // } // public addCanvas(canvas: ICanvas) { // this.canvas.push(canvas); // } // show() {} // }

// let canvas = Canvas.create(); // console.log("canvas宽高比", canvas);

// // 装饰器 // { // const moveDecorator = (constructor: Function) => { // constructor.prototype.name = "gz"; // constructor.prototype.getName = function () { // return this.name; // }; // }; // // const ageDecorator = (target, propertyKey) => { // // console.log("ageDecorator", target, propertyKey); // // }; // // @moveDecorator // // class Tank { // // @ageDecorator // // public age: number = 12; // // public address: string = ""; // // constructor() { // // console.log("tank 构造函数"); // // } // // } // // const tank = new Tank(); // // console.log("tank", (tank).getName()); // }

// { // console.clear(); // type HD = { name: string; age: number; city: string }; // const movePos = (ctx: HD) => { // return ctx.city; // }; // let cc = movePos({ // name: "12", // age: 0, // city: "asdad", // }); // console.log("cc", cc); // }

// { // console.clear();

// type userInfoType = { // author: string; // name: string; // position: number[]; // }; // class World { // static position: number[] = [0, 0];

// public getPos(): number[] { // return World.position; // } // }

// class Tank extends World { // public static author: string = "gz"; // protected _name: string = "坦克"; // constructor(_name: string) { // super(); // this._name = _name; // }

// public get name() { // return this._name; // } // public set name(str) { // this._name = str; // }

// public static getBaseInfo(name: string): userInfoType { // return { // author: Tank.author, // name: new Tank(name)._name, // position: super.position, // }; // } // }

// let tk = new Tank("坦克一号"); // tk.name = "史诗级坦克"; // console.log("tk", tk); // console.log("Tank.getBaseInfo()", Tank.getBaseInfo("坦克二号")); // }

// { // // 断言 // // DOM类型推断 // let hd = document.querySelector(".HD"); // hd.innerHTML = "123";

// // 非空断言 // let ctx = document.querySelector(".HD")!; // ctx.innerHTML = "123";

// let gz = 123;

// // class构造函数需要的强制断言 // let aLink = document.querySelector("#hd"); // }

// { // interface IWorkOrder { // no: string; // partName: string; // planQuantity: number; // appendQuantity?: number; // orderType: number; // } // class Gz5 implements IWorkOrder { // public no: string = ""; // public partName: string = ""; // public planQuantity: number = 0; // public appendQuantity: number = 0; // public orderType: number = OrderType["生产工单"]; // public workOrderList: IWorkOrder[] = []; // constructor() { // this.init(); // } // create(obj: IWorkOrder) { // this.workOrderList.push(obj); // } // init() { // this.workOrderList = [ // { // no: "", // partName: "", // planQuantity: 0, // appendQuantity: 0, // orderType: OrderType["生产工单"], // }, // ]; // } // } // let gz5 = new Gz5(); // gz5.create({ // no: "1-1", // partName: "1-1", // planQuantity: 10, // appendQuantity: 20, // orderType: 1, // }); // // console.log("gz5", gz5); // }

// 函数 function fn1(a: number, b: number, c?: number): number { return a + b; } let gz1: (number | string)[] = [1, "src", 4];

let fn2 = (a: number, b: number): number => a + b; console.log(" fn1", fn1(2, 3));

// 函数剩余参数 const fn3 = (a: number, b: number): number => a + b;

// 数组与元祖 let arr: (string | number | boolean)[] = [1, true];

// 枚举 enum OrderType { "生产工单", "委外工单", "生产补单", "模具工单", "样品工单", "改制返工工单", "虚拟工单组", "不良返工工单", } console.log("OrderType", OrderType);

// 断言 // as const 值类型 let gz4 = "gengzhi" as const; // 数组 // 数组转为元组 let a: string = "gz5"; let b = 9; const c = [a, b] as const; const d = [a, b, a]; // 解构中使用 as const function gz5() { let a = "hahah"; let b = (x: number, y: number): number => x + y; // return [a, b]; // return [a, b] as [typeof a, typeof b]; return [a, b] as const; } let [m, n] = gz5(); // let [m, n] = gz5() as [string, Function]; n(2, 3);

// 非空断言 // let gz6 = 99; // const el: HTMLDivElement = document.querySelector("gz"); // console.log("el", el); // const el2: HTMLDivElement = document.querySelector("gz")!; // el.style.color = "red";

// const btn = document.querySelector("button"); // btn.addEventListener("click", (e: Event) => { // e.preventDefault(); // const body = document.querySelector("body"); // body.insertAdjacentHTML("beforeend", "

ceshi

"); // });

// 接口 interface Gz7Interface { name: string; run(): void; } // 接口约束对象 interface UserInterface { name: string; age?: number; info(): string; [key: string]: any; } let hd: UserInterface = { name: "", age: 0, info: function (): string { throw new Error("Function not implemented."); }, sex: "male", }; interface Gz8Interface { a: number; b: number; } const userGz8: Gz8Interface = { a: 3, b: 4, }; function gz8(userGz8: Gz8Interface): number { return userGz8.a * userGz8.b; } gz8(userGz8);

// ts约束class class User { public name: string = ""; public age: number = 0; constructor(name: string, age: number) { this.name = name; this.age = age; } info() { return ${this.name}的年龄是${this.age}; } } let gz9 = new User("gz", 18); let gz10: User[] = []; gz10.push(gz9); console.log("gz10", gz10);

// ts 静态属性，静态方法 }