typescript笔记

//笔记地址　　https://www.bilibili.com/video/av38379328/?p=20

console.log('Nihao')

function getData() {
  
}

var str:string = "你好"

// var flag = true;
// flag = 456;


var flag:boolean = true;
flag = false;

console.log(flag)

var num:number = 123
num = 456
console.log(num)

var str:string = 'this is ts'
str = 'haha'
console.log(str)

var arr:number[] = [1,2,3]
console.log(arr)
var arr1:Array<number> = [11,22,33]
console.log(arr1)

var arr2:any[] = ['123',22,true]
console.log(arr2)

//元祖类型 (tuple) 属于数组的一种

let arr3:[number,string] = [123,'this is ts']
console.log(arr3)

//枚举类型(enum)

enum Flag {success=1,error=2}
let s:Flag = Flag.success
console.log(s)

enum Color {blue,red=3,'orange'}

var c:Color = Color.orange

console.log(c)  //如果没有赋值 他的值就是下标

enum Err {'undefined'=-1,'null'=-2,'success'=1}

var e:Err = Err.null
console.log(e)

//any类型
var num1:any = 123
num1 = 'str'
console.log(num1)

//任意类型用法
var oBox:any = document.getElementById('box')
oBox.style.color = 'red'; 

//null undefined 其他(never类型)数据类型的子类型

var num2:number | undefined;  //变量定义没有赋值 值为undefined 数据类型undefined

console.log(num2)

var num3:null;
num3 = null
console.log(num3)

var num4:number | null | undefined

num4 = 123
console.log(num4)

// void 定义方法 方法没有返回任何类型

function run():void {
  console.log('run')
}
run()

function run1():number {
  return 123
}
run1()

// never类型 是其他类型（包括null undefined）的子类型  标识从不会出现的值
//这意味着声明never的变量 只能被never 类型所赋值
var a:undefined;
a = undefined

var b:null;
b = null

var a1:never;





// 函数声明法

function run2():string {
  return 'run'
}
var fun2 = function():number {
  return 123
}
fun2()

function getInfo(name:string,age:number):string {

  return `${name} -- ${age}`
}

// alert(getInfo('zhangsan',20))

var getInfo1 = function(name:string,age:number):string {

  return `${name} -- ${age}`
}

// alert(getInfo1('zhangsan1',22))

//可选参数 可选参数 必须配置到最后一个参数
function getInfo2(name:string,age?:number):string { //?可选参数
  if(age) {
    return `${name} -- ${age}`
  }else {
    return `${name} -- 年龄保密`
  }
}
getInfo2('zs')

//默认参数
function getInfo3(name:string,age:number=20):string { //?可选参数
  if(age) {
    return `${name} -- ${age}`
  }else {
    return `${name} -- 年龄保密`
  }
}
getInfo3('zs')


//剩余参数
function sum(...result:number[]):number {
  var sum = 0
  for(var i=0; i<result.length; i++) {
    sum+=result[i]
  }
  return sum;
}
// alert(sum(1,2,3,4,5))
function sum1(a:number,b:number,...result:number[]):number {
  var sum = a+b
  for(var i=0; i<result.length; i++) {
    sum+=result[i]
  }
  return sum;
}
// alert(sum1(1,2,3,4,5,6,7))


//函数重载 
//java中方法重载 两个或者两个以上同名函数 但给他们的参数不一样 就出现函数重载

function getInfo6(name:string):string;
function getInfo6(age:number):number;
function getInfo6(str:any):any {
  if(typeof str === 'string') {
    return '我叫'+str
  }else {
    return '年龄'+str
  }
}
// alert(getInfo6('张三'))

//定义类
// class Person {
//   name:string;
//   constructor(name:string) {
//     this.name = name
//   }
//   getName():string{
//     return this.name
//   }
//   setName(name:string):void {
//     this.name = name
//   }
// }
// var p = new Person('张三')
// alert(p.getName())

// p.setName('李四')
// alert(p.getName())

//ts中实现继承
// class Person1{
//   name:string
//   constructor(name:string) {
//     this.name = name
//   }
//   run():string{
//     return `${this.name} 在运动`
//   }
// }

// class Web extends Person1{
//   constructor(name:string) {
//     super(name)
//   }
//   run():string{
//     return `${this.name} 在运动-子类`
//   }
//   work():void{
//     alert(`${this.name} 在工作`)
//   }
// }

// var w = new Web('王五')
// alert(w.run())
// w.work()

/**
 * public 公有    在类里面、子类、类外面都可以访问 （类的实例访问）
 * protected 保护类型   在类里面、子类里面可以访问，在类外面不可以访问
 * private  私有    在类里面可以访问、子类、类外部都没法访问
 * 属性如果不加修饰符 就是public
 */

class Person2{
  public name:string
  constructor(name:string) {
    this.name = name
  }
  run():string{
    return `${this.name} 在运动`
  }
}

var p = new Person2('lili')
// alert(p.name+'类的外部public访问权限')

class Person3{
  protected name:string
  constructor(name:string) {
    this.name = name
  }
  run():string{
    return `${this.name} 在运动`
  }
}
class Web1 extends Person3 {
  constructor(name:string) {
    super(name)
  }
  work():void{
    alert(`${this.name} 在工作`)
  }
}
// var w1 = new Web1('LILI')
// w1.work()


class Person4{
  public name:string
  public age:number = 20

  static sex:string="男"
  constructor(name:string) {
    this.name = name
  }
  run() {
    alert(`${this.name}在运动ing`)
  }
  work() {
    alert(`${this.name}在工作ing`)
  }
  static print() {  /*静态方法 里面没法直接调用类里面的属性 不能通过this来调用*/
    alert('print方法'+Person4.sex)
  }
}
// var p4 = new Person4('张三')
// p4.run()
// Person4.print()
// alert(Person4.sex)

// 多态

// class Animal{
//   name:string
//   constructor(name:string) {
//     this.name = name
//   }
//   eat() { //继承他的子类去实现 每一个子类的表现不一样
//     console.log('吃的方法')
//   }
// }
// class Dog extends Animal{
//   constructor(name:string) {
//     super(name)
//   }
//   eat() {
//     return this.name + '吃粮食'
//   }
// }
// class Cat extends Animal{
//   constructor(name:string) {
//     super(name)
//   }
//   eat() {
//     return this.name + '吃老鼠'
//   }
// }

//提供其他类继承的基类 不能直接被实例化 （与上一节 多态一起理解 如果多个类 都继承eat方法就是多态了）
//抽象方法抽象类 用来定义标准  定义标准：Animal这个类 要求它的子类必须包含eat方法  无法直接实例化
//抽象类中的抽象方法 不包含具体实现 并且必须在派生类中实现 abstract抽象方法只能在抽象类里面
abstract class Animal{
  name:string
  constructor(name:string) {
    this.name = name
  }
  abstract eat():any;
}

class Dog extends Animal{
  constructor(name:string) {
    super(name)
  }
  eat() {
    console.log(this.name + '吃粮食')
  }
}
class Cat extends Animal{
  constructor(name:string) {
    super(name)
  }
  eat() {
    console.log(this.name + '吃老鼠')
  }
}
var d = new Dog('小狗')
d.eat()
var c1 = new Cat('小猫')
c1.eat()

//接口 定义标准 （抽象类也是定义标准） 约束 属性函数类的行为动作
//1属性类接口 2函数类型接口 3可索引接口 4类类型接口 5接口扩展

//1 属性接口
//传入的label进行约束 必须是string类型 如果传入123数字则报错
function printLabel(label:string):void {
  console.log('printLabel')
}
printLabel('hahah')

//对labelInfo对象进行约束 传入的对象必须要有label并且是string类型
function printLabel1(labelInfo:{label:string}):void {
  console.log('printLabel')
}
// printLabel1('hahah')
// printLabel1({name:'zs'})
printLabel1({label:'zs'})

//对批量方法传入参数进行约束 -》接口
//接口：行为和动作的规范，对批量方法进行约束

//就是传入对象的约束 属性接口
//传入对象必须包含 fristName secondName
interface FullNm {
  firstName:string;
  secondName:string;
}

function printName(name:FullNm) {
  //必须传入对象 fristName secondName
  console.log(name.firstName + '--' + name.secondName)
}
function printInfo(info:FullNm) {
  //必须传入对象 fristName secondName
  console.log(info.firstName + '--' + info.secondName)
}


// printName({age:20,firstName:'z',secondName:'s'}) 这样写 的话 对象里面只有 firstName secondName 写在外部 可以包含其他的age。。等
var obj = {age:20,firstName:'z',secondName:'s'}
printName(obj)

var info = {age:20,firstName:'l',secondName:'s'}
printName(info)


//接口， 可选属性 跟函数可选参数一样 加一个?

interface FullName {
  firstName:string;
  secondName?:string;
}
function getName1(name:FullName) {
  console.log(name)
}
getName1({
  firstName:'z'
})

//属性接口例子
// $.ajax({
//   type:'GET',
//   url:'',
//   data: JSON.stringify({}),
//   dataType: 'json'
// })
interface Config {
  type:string
  url:string,
  data?:string,
  dataType:string
}

function ajax(config:Config) {

}

//函数加密类型接口

interface encrypt{
  (key:string,value:string):string;
}

var md5:encrypt = function(key:string,value:string):string {

  return key+value;
}

console.log(md5('name','zhangsan'))

//可索引接口：数组、对象的约束（不常用）

//ts定义数组方式
var arrArr:number[] = [123,455]

interface UserArr { //索引值为number
  [index:number]:string
}
var arrArr1:UserArr = ['123','233']

console.log(arrArr1[0])

interface UserObj {
  [index:string]:string
}

var arrObj:UserObj = {name:'zs',age:'12'}

//类类型接口 对类进行约束 和抽象类有点相似  多态
// 属性接口 方法接口 整合  必须有name eats
interface Animalcls {
  name:string;
  eat(str:string):void;
}

class Dogcls implements Animalcls {
  name:string;
  constructor(name:string) {
    this.name = name
  }
  eat() {
    console.log(this.name + '吃粮食')
  }
}

var d = new Dogcls('小黑')
d.eat()

//接口继承
interface Animalext{
  eat():void
}
interface Personext extends Animalext{
  work():void
}

class Programmer{
  public name:string;
  constructor(name:string) {
    this.name = name
  }
  coding(code:string) {
    console.log(this.name+code)
  }
}

class Web extends Programmer implements Personext {

  constructor(name:string) {
    super(name)
  }
  eat() {
    console.log(this.name+'喜欢吃馒头')
  }
  work() {
    console.log(this.name+'写代码')
  }
}

var w = new Web('小李')

w.coding('写ts代码')

//泛型就是解决 类 接口 方法的复用性 以及对不特定数据类型的支持

function getData1(value:string):string {

  return value
}
//同时返回 string类型 number类型  any放弃了类型检查 希望传入什么 返回什么

function getData2(value:any):any {

  return value
}
//泛型 要求传入参数 跟返回参数一致 T表示泛型 具体什么类型 是调用这个方法的时候决定的 (AAA 任意大写字母)
function getData3<T>(value:T):T {

  return value
}
getData3<string>('123')

//泛型类 要求 传入数字 返回数字类型 传入字符串 返回字符串类型

class MinClass {
  public list:number[] = [];
  add(num:number) {
    this.list.push(num)
  }
  min():number{
    var minNum = this.list[0];

    for(var i=0; i<this.list.length; i++) {
      if(minNum > this.list[i]) {
        minNum = this.list[i]
      }
    }
    return minNum;
  }
}

var m = new MinClass();
m.add(23)
m.add(22)
m.add(21)
m.add(3)
alert(m.min())

//类的泛型
class MinClass1<T> {
  public list:T[] = [];
  add(value:T):void {
    this.list.push(value)
  }
  min():T{
    var minNum = this.list[0];

    for(var i=0; i<this.list.length; i++) {   //字母是用的asc码做的对比
      if(minNum > this.list[i]) {
        minNum = this.list[i]
      }
    }
    return minNum;
  }
}

var m1 = new MinClass1<number>()  //实例化类 并且制定了类的T代表的类型是number
m1.add(23)
m1.add(22)
m1.add(21)
m1.add(4)
alert(m1.min())

var m2 = new MinClass1<string>()
m2.add('a')
m2.add('b')
m2.add('c')
m2.add('v')
alert(m2.min())

//泛型接口
// //以前讲的函数类型接口
// interface ConfigFn{
//   (value1:string,value2:string):string
// }

// var setData:ConfigFn = function(value1:string,value2:string):string{

//   return value1+value2
// }

// setData('name','张三')

interface ConfigFn{
  <T>(value1:T):T
}

var getData6:ConfigFn = function<T>(value1:T):T{

  return value1
}

getData6<string>('name')

getData6<number>(123)


//泛型类 把类作为参数类型的泛型类
//定义一个user类 映射数据库表字段
//把类作为参数来约束数据传入的类型
class User {
  username:string | undefined;
  pasword:string | undefined;
}
class MysqlDb{

  add(user:User):boolean{

    console.log(user)
    return true;
  }
}

var u = new User();
u.username = 'zs'
u.pasword = '123456'

var Db = new MysqlDb();

Db.add(u)


class ArticleCate {
  title:string | undefined;
  desc:string | undefined;
  status:number | undefined
}
class MysqlDba{

  add(info:ArticleCate):boolean{

    console.log(info)
    return true;
  }
}

var info12 = new ArticleCate();
info12.title = 'zs'
info12.desc = '123456'
info12.status = 1

var Dba = new MysqlDba();

Dba.add(info12)

//操作数据库的泛型类
class MysqlDbt<T>{
  add(info:T):boolean{
    console.log(info)
    return true;
  }
}

class Usert {
  username:string | undefined;
  pasword:string | undefined;
}

var ut = new Usert()

ut.username = 'ls'
ut.pasword = '123456'

var Dbt = new MysqlDbt<User>();
Dbt.add(ut)

class ArticleCatet {
  title:string | undefined;
  desc:string | undefined;
  status:number | undefined;
  constructor(params:{
    title:string | undefined,
    desc:string | undefined,
    status?:number | undefined
  }) {
    this.title = params.title;
    this.desc = params.desc;
    this.status = params.status;
  }
}

var at = new ArticleCatet({
  title:'分类',
  desc:'1222'
})
var Dbt1 = new MysqlDbt<ArticleCatet>();
Dbt1.add(at)


//类型 接口 类 泛型 综合使用    泛型接口 泛型类 类作为参数
interface DBI<T> {
  add(info:T):boolean;
  update(info:T,id:number):boolean;
  delete(id:number):boolean;
  get(id:number):any[];
}
//定义一个操作mysql数据库的类   //注意 要实现泛型接口 这个类也应该是一个泛型类
class MysqlDb1<T> implements DBI<T>{
  constructor() {
    console.log('数据库建立连接')
  }
  add(info: T): boolean {
    console.log(info)
    return true
  }
  update(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[] {
    var list = [
      {
        title:'xxx',
        desc:'xxxdddd'
      },
      {
        title:'xxx',
        desc:'xxxdddd'
      }
    ]
    return list
  }
}

class MsSqlDb1<T> implements DBI<T>{
  constructor() {
    console.log('数据库建立连接')
  }
  add(info: T): boolean {
    console.log(info)
    return true
  }
  update(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[] {
    var list = [
      {
        title:'xxx',
        desc:'xxxdddd'
      },
      {
        title:'xxx',
        desc:'xxxdddd'
      }
    ]
    return list
  }
}

//操作用户表 定义一个User类和数据表做映射

class User1{
  username:string | undefined;
  password:string | undefined;
}

var u1 = new User1();
u1.username = 'zs1';
u1.password = '1232';

var oMysql = new MysqlDb1<User1>() //把类作为参数约束数据传入的类型

oMysql.add(u1)
console.log(oMysql.get(4))

var oMssql = new MsSqlDb1<User1>() //把类作为参数约束数据传入的类型

oMssql.add(u1)






// import {getData10} from './modules/db' 需要webpack node支持浏览器不支持 export

// getData10()

//普通装饰器
function logClass(params:any){
  console.log(params)
  //params 就是当前类
  params.prototype.apiUrl = 'xxx';
  params.prototype.run = function() {
    console.log('run.....')
  }
}

@logClass
class HttpClient{
  constructor() {

  }
  getData() {

  }
}

var http:any = new HttpClient();
console.log(http.apiUrl)

http.run()

//类装饰器 装饰器工厂 可传参
function logClass1(params:string){
  return function(target:any) {
    console.log(target)
    console.log(params)

    target.prototype.apiUrl = params
  }
}

@logClass1('http://www.baidu.com') //把这块 赋给了 params 
class HttpClient1{  //把当前类 赋值给了 target
  constructor() {

  }
  getData() {

  }
}

var http:any = new HttpClient1();
console.log(http.apiUrl)

//装饰器重载构造函数的例子

function logClass2(target:any) {
  console.log(target)
  return class extends target {
    apiUrl:any = '我是修改后的';
    getData() {
      this.apiUrl = this.apiUrl + '---'
      console.log(this.apiUrl)
    }
  }
}

@logClass2
class HttpClient2 {
  public apiUrl:string | undefined
  constructor() {
    this.apiUrl = '我是构造函数里的apiUrl'
  }
  getData() {
    console.log(this.apiUrl)
  }
}

var http2 = new HttpClient2()

http2.getData()


//属性装饰器 

//1类装饰器
function logClass3(params:string){
  return function(target:any) {
    // console.log(target)
    // console.log(params)

  }
}
//2属性装饰器
function logProperty(params:any) {
  return function(target:any,attr:any) {
    console.log(target) //类的原型对象 (对静态成员来说target是类的构造函数)
    console.log(attr) //成员的名称
    target[attr] = params
  }
}

@logClass3('xxx') //把这块 赋给了 类装饰器的 params 
class HttpClient3 {
  @logProperty('http://www.jd.com')   //把这块 赋给了 属性装饰器的 params 
  public url:any | undefined;
  constructor() {

  }
  getData() {
    console.log(this.url)
  }
}

var h = new HttpClient3()
h.getData()

//方法装饰器  
function get(params:any) {
  return function(target:any,methodName:any,desc:any) {
    console.log(target) //类的原型对象 (对静态成员来说target是类的构造函数)
    console.log(methodName) //
    console.log(desc) //desc.value
    // target.apiUrl = 'aaabbbccc'
    // target.run = function() {
    //   console.log('方法run')
    // }
    var oMethod = desc.value
    desc.value = function(...args:any[]) {
      args = args.map((value)=>{
        return String(value)
      })
      console.log(args)
      oMethod.apply(this,args)  //<!--对象冒充-->
    }
  }
}
class HttpClient4 {
  public url:any | undefined;
  constructor() {

  }
  @get('http://www.itying.com') //方法装饰器可以修改我们的方法
  getData(...args:any[]) {
    console.log(args) // 可以把我们传入的参数转成string类型
    console.log('我是getdata里面的方法')
  }
}

// var http4:any = new HttpClient4();
// console.log(http4.apiUrl)
// http4.run()

var http4 = new HttpClient4();
http4.getData(123,'abc')



//方法参数装饰器 用的不多  用类装饰器就可以
function logParams(params:any) {
  return function(target:any,methodName:any,paramsIndex:any) {
    console.log(params)
    console.log(target) //对于静态成员来说是类的构造函数 对于实例成员是累的原型对象
    console.log(methodName)
    console.log(paramsIndex)

    target.apiUrl = params
  }
}


class HttpClient5 {
  public url:any | undefined;
  constructor() {

  }

  getData(@logParams('xxxx') uuid:any) {
    console.log('我是getdata里面的方法')
  }
}

var http5:any = new HttpClient5();
http5.getData(123)