ts

ts基础

# 1. TS 数据类型

boolean
number
string
object
number[] string[] 等 数据类型[]  或  Array<number> Array<string> 等 Array<数据类型>  //数组
any[] //不确定个数,不确定类型的数组,但是不好的地方是就没有实时的编译提示了
any //任何类型
unknown //任何类型的安全形式
undefined null
//默认情况下null和undefined是所有类型的子类型,但是如果想把其赋值给某个类型的变量,想要不报错首先要关闭严格模式
void //没有类型,如 function f:void () { ... } 无返回值
never //函数无法返回的类型。
//例如一个会抛出异常的函数 就可以写 function f(msg:string):never {throw new Error(msg)}

# 2. class 里面方法修饰符

public :公有 在当前类里面、 子类 、类外面都可以访问 protected:保护类型 在当前类里面、子类里面可以访问 ,在类外部没法访问 private :私有 在当前类里面可以访问,子类、类外部都没法访问 属性如果不加修饰符 默认就是 公有 (public) abstract class Animal{ } 抽象类,不能使用 new Animal() ,这种写法是错误的

/**
 * 学习资料https://jspang.com/detailed?id=63#toc3105
 * 21、22、23、24自己构建打包启示,未掌握
 */

/**
 * 布尔类型(boolean)
 */
// let flag:boolean = true
// console.log(flag)

// 加密的函数类型接口
interface encrypt {
  (key: string, value: string): string;
}
let md5: encrypt = function (key: string, value: string): string {
  return key + value;
};
console.log(md5('name:', 'zy'));

/**
 * 自定义类型(接口类型) +++
 */

interface XiaoJieJie {
  uname: string;
  age: number;
  isFlag: boolean;
  arrNumber: number[];
  arr2: Array<number>;
  x: [string, number]; //元组 Tuple
}
const xiaohong: XiaoJieJie = {
  uname: '小红',
  age: 18,
  isFlag: true,
  arrNumber: [11, 22, 33],
  arr2: [111, 222, 333],
  x: ['111', 222]
};
console.log(xiaohong);

interface Girl {
  name: string;
  age: number;
  bust: number;
  [propname: string]: any; //允许任意key、value
  waistline?: number; //可选值(意思可以传和不传)
  say(): string; //say方法,返回值为 string
}

// 接口继承
interface Teacher extends Girl {
  teach(): string;
}

const xiaohong2: Girl = {
  name: '小红',
  age: 18,
  bust: 5,
  sex1: 444,
  say() {
    return '这个是一个方法';
  },
  teach() {
    return 'teach方法';
  },
  waistline: 6
};
console.log(xiaohong2, 'xiaohong2');

/**
 * 第三个number是函数返回类型
 */
/* function getTotal(one: number, two: number): number {
  return one + two;
}
const total = getTotal(1, 2) */

/**
 * void,代表没有任何返回值, 不能在里面return
 */

function sayHello(): void {
  console.log('hello world');
}
sayHello();

/**
 * 数组类型定义
 */
//  type定义
type Lady = { name: string; age: Number };
const xiaoJieJies: Lady[] = [
  { name: '刘英', age: 18 },
  { name: '谢大脚', age: 28 }
];

// class定义
// class Madam {
//   name: string | undefined;
//   age: number | undefined;
// }

// const xiaoJieJies: Madam[] = [
//   { name: "刘英", age: 18 },
//   { name: "谢大脚", age: 28 },
// ]
// console.log(xiaoJieJies,'xiaoJieJies')

/**
 * 元组使用, 元组定义每一个数据类型
 */

// const xiaojiejies: [string, string, number][] = [
//   ["dajiao", "teacher", 28],
//   ["liuying", "teacher", 18],
//   ["cuihua", "teacher", 25],
// ]
// console.log(xiaojiejies,'xiaojiejies')

/**
 * class基础类型
 */
// class Lady {
//   content = "Hi,帅哥";
//   sayHello() {
//     return this.content;
//   }
// }
// class XiaoJieJie extends Lady {
//   sayLove() {
//     return "I love you!";
//   }
//   sayHello() {
//     return super.sayHello() + "。你好!";
//   }
// }

// let getClass = new XiaoJieJie()
// console.log(getClass.sayHello())

// class Person {
//   name:string | undefined
//   public readonly _name :string | undefined     //只读
//   protected protectedName:string | undefined   //protected 允许在类内及继承的子类中使用

//   public sayHello(){
//     console.log(this.name + 'say Hello')
//   }

//   constructor(private _age:number = 15){}
//   get age(){
//     return this._age-10
//   }
//   set age(age:number){
//     this._age=age
//   }

//   static sayLove() {
//     return "I Love you";
//   }
// }

// const person = new Person()
// console.log(person,'person')
// person.name = 'zy.com'
// // person.protectedName = 'zy.com'
// person.sayHello()

/**
 * 枚举 类似声明一个对象常量
 */
enum Status {
  MASSAGE = 'massage',
  SPA = 'spa',
  DABAOJIAN = 'dabaojian'
}
function getServe(Status: any, text: string) {
  return Status[text] || '未知';
}
const result = getServe(Status, 'DABAOJIAN');
console.log(`我要去${result}`);

/**
 * 泛型基础,一般ZY 使用 T来代替
 */
/* 单个泛型 */
function join<ZY>(first: ZY, second: ZY) {
  return `${first}${second}`;
}
let res = join<string>('zouyu', '.com');
console.log(res, 'dddddddd');

/* 多个泛型 */
function join<T, U>(first: T, second: U) {
  return `${first}${second}`;
}
let res = join<number, string>(1, '2');
console.log(res);
join(1, '2'); //推断类型。不建议这么写

/**
 * 泛型在class中继承
 */
// interface Girl {
//   name: string;
// }

// class SelectGirl<T extends Girl> {
//   constructor(private girls: T[]) {}
//   getGirl(index: number): string {
//     return this.girls[index].name;
//   }
// }

// const selectGirl = new SelectGirl([
//   { name: "大脚" },
//   { name: "刘英" },
//   { name: "晓红" },
// ])
// console.log(selectGirl.getGirl(0))

/**
 * <string> 代表泛型约束
 */
class SelectGirl<T> {
  constructor(private girls: T[]) {}
  getGirl(index: number): T {
    return this.girls[index];
  }
}
const selectGirl = new SelectGirl<string>(['大脚', '刘英', '晓红']);
console.log(selectGirl.getGirl(1));

/**
 * 默认值 number = 30
 */
class Animal {
  move(distanceInMeters: number = 30) {
    console.log(`Animal moved ${distanceInMeters} m.`);
  }
}
const dog = new Animal();
ale;
dog.move();

/**
 * namespace 命名空间使用
 */
namespace Validation {
  export interface StringValidator {
    isAcceptable(s: string): boolean;
  }
}

/**
 * 混合器,还没完全懂
 */
// Disposable Mixin
// class Disposable {
//   isDisposed!: boolean;
//   dispose() {
//       this.isDisposed = true;
//   }

// }

// // Activatable Mixin
// class Activatable {
//   isActive!: boolean;
//   activate() {
//     this.isActive = true;
//   }
//   deactivate() {
//     this.isActive = false;
//   }
// }
// class SmartObject implements Disposable, Activatable {
//   constructor() {
//     setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
//   }
//   interact() {
//     this.activate()
//   }
//   isDisposed: boolean = false
//   dispose!: () => void;
//   isActive: boolean = false
//   activate!: () => void
//   deactivate!: () => void
// }
// applyMixins(SmartObject, [Disposable, Activatable])
// let smartObj = new SmartObject()
// setTimeout(() => smartObj.interact(), 1000);
// function applyMixins(derivedCtor: any, baseCtors: any[]) {
//   baseCtors.forEach(baseCtor => {
//     console.log(baseCtor.prototype,'baseCtors')
//     Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
//         derivedCtor.prototype[name] = baseCtor.prototype[name]
//     })
//   })
// }

// let res = new SmartObject()
// setTimeout(() => {
//   console.log(res,'res')
// }, 1000)

# 3. TS 中使用 setTimeout,NodeJS.Timeout

  • 3.1 安装 npm i @types/node
  • 3.2 然后配置 .eslintrc.cjs
	let timeout: NodeJS.Timeout

	clearTimeout(timeout)
	timeout = setTimeout(() => {
	    cb(results)
	}, 3000)

  globals: {
    NodeJS: 'readonly'
  }

# 4. 泛型在类中使用

interface DB<T> {
  add(info:T):boolean;
  updated(info:T, id:number): boolean,
  delete(id:number):boolean,
  get(id:number):any[],
}

// implements代表抽象类
class MysqlDb<T> implements DB<T> {
  // 下面这些方法是使用MysqlDb快速修复生成的
  // add(info: T): boolean {
  //   throw new Error('Method not implemented.');
  // }
  // updated(info: T, id: number): boolean {
  //   throw new Error('Method not implemented.');
  // }
  // delete(id: number): boolean {
  //   throw new Error('Method not implemented.');
  // }
  // get(id: number): any[] {
  //   throw new Error('Method not implemented.');
  // }
}
上次更新: