21-03-15 typescript 学习笔记 .01

一、基础类型、

import { groupEnd } from "console"

// 基础类型
(() => {
  // 布尔类型  ----->boolean
  // 基本语法
  // let 变量名: 数据类型 = 值
  let flag: boolean = true
  flag = false
  // flag = 10 报错
  console.log(flag)

  // 数字类型  ----->number
  let a1: number = 10 // 十进制
  let a2: number = 0b1010  // 二进制
  let a3: number = 0o12 // 八进制
  let a4: number = 0xa // 十六进制
  console.log(a1)
  console.log(a2)
  console.log(a3)
  console.log(a4)
  // a1 = '哈哈' 报错
  // 字符串类型  ---->string
  let str1: string = '床前明月光'
  let str2: string = '小明去开窗'
  let str3: string = '遇到一耳光'
  let str4: string = '牙齿掉光光'
  console.log(`${str1},${str2},${str3},${str4}`)


  // 字符串和数字之间能够一起拼接
  let str5: string = '我有这么多的钱'
  let num: number = 1000
  console.log(str5 + num)

  // 总结:ts中变量一开始是什么类型,那么后期赋值的时候,只能用这个类型的数据,是不允许用其他类型的数据赋值给当前的这个变量中
  // 如: let str: string = '真香' str=100 ,没有武德(不允许)

  console.log('==================')

  let und: undefined = undefined
  let nll: null = null

  // console.log(und)
  // console.log(nll)
  // undefined 和 null 都可以作为其他类型的子类型,把undefined 和null 赋值给其他类型的变量的,如:number类型的变量
  // let num2: number = undefined
  // let num2: number = null
  // console.log(num2)
  console.log('==================')

  // 数组类型
  // 数组定义方式1
  // 语法: let 变量名: 数据类型[] = [值1,值2,值3]
  let arr1: number[] = [10, 20, 30, 40, 50]
  console.log(arr1)
  // 数组定义方式2:泛型的写法
  // 语法: let 变量名: Array<数据类型> = [值1,值2,值3]
  let arr2: Array<number> = [100, 200, 300]
  console.log(arr2)

  // 注意问题:数组定义后,里面的数据的类型必须和定义数组的时候的类型是一致的,否则有错误提示信息,也不会编译通过的

  // 元组类型:在定义数组的时候,类型和数据的个数一开始就已经限定了
  let arr3: [string, number, boolean] = ['小甜甜', 100.12345, true]
  console.log(arr3)
  // 注意问题:元组类型在使用的时候,数据的类型的位置和数据的个数 应该和在定义元组的时候的数据类型及位置应该是一致的
  console.log(arr3[0].split(''))
  console.log(arr3[1].toFixed(2))

  console.log('============')
  // 枚举类型,枚举里面的每个数据值都可以叫元素,每个元素都有自己的编号,编号是从0开始的,依次的递增加1
  enum Color {
    red = 1,
    green,
    blue
  }
  // 定义一个Color的枚举类型的变量来接收枚举的值
  let color: Color = Color.red
  console.log(color)
  console.log(Color.red, Color.green, Color.blue)
  console.log(Color[3])
  // 小例子,枚举中的元素可以是中文的数据值,但是不推荐
  // enum Gender{
  //   女,
  //   男
  // }
  // console.log(Gender.男)
  console.log('===========')

  // any 类型
  // let str: any =100
  // str='年少不知富婆好,错把少女当成宝'
  // console.log(str)
  // 当一个数组中要存储多个数据,个数不确定,类型不确定,此时也可以使用any类型来定义数组
  let arr: any[] = [100, '年少不知软饭香,错把青春倒插秧', true]
  console.log(arr)
  // 这种情况下也没有错误的提示信息,any类型有优点,也有缺点
  // console.log(arr[0].split(''))

  // void 类型,在函数声明的时候,小括号的后面使用:void,代表的是该函数没有任何的返回值
  function showMsg(): void {
    console.log('只要富婆把握住,连夜搬进大别墅')
    // return
    // return undefined
    return null
  }
  console.log(showMsg())
  // 定义void类型的变量,可以接收一个undefined的值,但是意义不是很大
  let vd: void = undefined
  console.log(vd)

  console.log('==================')

  // object 类型
  // 定义一个函数,参数是object类型,返回值也是object类型
  function getObj(obj: object): object {
    console.log(obj)
    return {
      name: '卡卡西',
      age: 27
    }
  }
  // console.log(getObj({name:'佐助',age:'男'}))
  // console.log(getObj('123')) // 错误的
  // console.log(getObj(new String('123')))
  console.log(getObj(String))

  console.log('===========')
  // 联合类型（Union Types）表示取值可以为多种类型中的一种
  // 需求1: 定义一个函数得到一个数字或字符串值的字符串形式值
  // function getString(str:number|string):string{
  //   return str.toString()
  // }

  // console.log(getString('123'))

  // 需求2: 定义一个函数得到一个数字或字符串值的长度

  // 类型断言:告诉编译器,我知道我自己是什么类型,也知道自己在干什么
  // 类型断言的语法方式1: <类型>变量名
  // 类型断言的语法方式2: 值 as 类型 

  function getString(str:number|string):number{
      // return str.toString().length
      // 如果str本身就是string类型,那么是没有必要调用toString()方法的

      if((<string>str).length){
        // str.length存在吗?如果存在也就说明str是string类型的
        // return (<string>str).length
        return (str as string).length
      }else{
        // 此时说明str是number类型
        return str.toString().length
      }

  }

  console.log(getString(12345))
  console.log(getString('0123456'))


  // 类型推断:没有明确的指定类型的时候推测出一个类型

  // let txt =100 // number 类型
  // txt = '小甜甜好帅'
  // console.log(txt)

  let txt2;  // any 类型
  txt2 = 100
  txt2 = '帅杨好帅哦'
  console.log(txt2)

})()

二、接口

// 接口是对象的状态(属性)和行为(方法)的抽象(描述)
// 接口:是一种类型,是一种规范,是一种规则,是一个能力,是一种约束
(() => {
  // 需求: 创建人的对象, 需要对人的属性进行一定的约束

  // id是number类型, 必须有, 只读的
  // name是string类型, 必须有
  // age是number类型, 必须有
  // sex是string类型, 可以没有

  // 定义一个接口,该接口作为person对象的类型使用,限定或者是约束该对象中的属性数据
  interface IPerson {
    // readonly id是只读的,是number类型,const修饰属性,想要设置该属性是只读的,是不能使用的
    readonly id:  number 
    name: string
    age: number
    // ? 可有可无的
    sex?: string
  }


  // 定义一个对象,该对象的类型就是我定义的接口IPerson
  const person: IPerson = {
    id: 1,
    name: '小甜甜',
    age: 18,
    // sex这个属性没有也是可以的
    // sex: '女'
  }

  console.log(person)
  // id属性此时是可读可写
  // person.id = 100
  person.sex='女'
  // person.money = '123131'
  console.log(person)
})()

1、函数类型、

// 为了使用接口表示函数类型，我们需要给接口定义一个调用签名。
// 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
(() => {
  // 函数类型:通过接口的方式作为函数的类型来使用

  // 定义一个接口,用来作为某个函数的类型使用
  interface ISearchFunc {
    // 定义一个调用签名
    (source: string, subString: string): boolean
  }
  // 定义一个函数,该类型就是上面定义的接口
  const searchString: ISearchFunc = function (source: string, subString: string): boolean {
    // 在source字符串中查找subString这个字符串
    return source.search(subString) > -1
  }

  // 调用函数
  console.log(searchString('哈哈,我又变帅了', '帅'))

})()

2、类_类型

// 类 类型: 类的类型,类的类型可以通过接口来实现
(() => {
  // 定义一个接口
  interface IFly {
    // 该方法没有任何的实现(方法中什么都没有)
    fly()
  }

  // 定义一个类,这个类的类型就是上面定义的接口(实际上也可以理解为,IFly接口约束了当前的这个Person类)
  class Person implements IFly {
    // 实现接口中的方法
    fly() {
      console.log('我会飞了,我是超人')
    }
  }
  // 实例化对象
  const person = new Person()
  person.fly()

  // 定义一个接口
  interface ISwim {
    swim()
  }

  // 定义一个类,这个类的类型就是IFly和ISwim(当前这个类可以实现多个接口,一个类同时也可以被多个接口进行约束)
  class Person2 implements IFly, ISwim {
    fly() {
      console.log('我飞了2')
    }
    swim() {
      console.log('我会游泳啦2')
    }
  }
  // 实例化对象
  const person2 = new Person2()
  person2.fly()
  person2.swim()

  // 总结: 类可以通过接口的方式,来定义当前这个类的类型
  // 类可以实现一个接口,类也可以实现多个接口,要注意,接口中的内容都要真正的实现

  // 定义了一个接口,继承其他的多个接口
  interface IMyFlyAndSwim extends IFly, ISwim { }

  // 定义一个类,直接实现IMyFlyAndSwim这个接口
  class Person3 implements IMyFlyAndSwim {
    fly() {
      console.log('我飞了3')
    }
    swim() {
      console.log('我会游泳啦3')
    }
  }
  const person3 = new Person3()
  person3.fly()
  person3.swim()


  // 总结:接口和接口之间叫继承(使用的是extends关键字),类和接口之间叫实现(使用的是implements)


})()

三、类

// 类:可以理解为模版,通过模版可以实例化对象
// 面向对象的编程思想
(() => {
  // ts中类的定义及使用
  class Person {
    // 定义属性
    name: string
    age: number
    gender: string
    // 定义构造函数:为了将来实例化对象的时候,可以直接对属性的值进行初始化
    constructor(name: string='小甜甜', age: number=16, gender: string='女') {
      // 更新对象中的属性数据
      this.name = name
      this.age = age
      this.gender = gender
    }
    // 定义实例方法
    sayHi(str: string) {
      console.log(`大家好,我是${this.name},今年已经${this.age}岁了,是个${this.gender}孩子,`, str)
    }
  }

  // ts中使用类,实例化对象,可以直接进行初始化操作
  const person = new Person('佐助',18,'男')
  person.sayHi('你叫什么名字啊')
})()

1、继承

// 继承:类与类之间的关系
// 继承后类与类之间的叫法:
// A类继承了B这个类,那么此时A类叫子类,B类叫基类
// 子类---->派生类
// 基类---->超类(父类)
// 一旦发生了继承的关系,就出现了父子类的关系(叫法)
(() => {
  // 定义一个类,作为基类(超类/父类)
  class Person {
    // 定义属性
    name: string // 名字
    age: number // 年龄
    gender: string // 性别
    // 定义构造函数
    constructor(name: string='小明', age: number=18, gender: string='男') {
      // 更新属性数据
      this.name = name
      this.age = age
      this.gender = gender
    }
    // 定义实例方法
    sayHi(str: string) {
      console.log(`我是:${this.name},${str}`)
    }
  }
  // 定义一个类,继承自Person
  class Student extends Person {
    constructor(name: string, age: number, gender: string) {
      // 调用的是父类中的构造函数,使用的是super
      super(name, age, gender)
    }

    // 可以调用父类中的方法
    sayHi() {
      console.log('我是学生类中的sayHi方法')
      // 调用父类中的sayHi方法
      super.sayHi('哈哈')
    }
  }

  // 实例化Person
  const person = new Person('大明明',89,'男')
  person.sayHi('嘎嘎')
  // 实例化Student
  const stu = new Student('小甜甜',16,'女')
  stu.sayHi()

  // 总结:类和类之间如果要有继承关系,需要使用extends关键字
  // 子类中可以调用父类中的构造函数,使用的是super关键字(包括调用父类中的实例方法,也可以使用super)
  // 子类中可以重写父类的方法
})()