21-3-18 TypeScript 学习笔记 .04

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了21-3-18 TypeScript 学习笔记 .04，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4858字，纯文字阅读大概需要7分钟。

内容图文

泛型

// 泛型:在定义函数、接口、类的时候不能预先确定要使用的数据的类型,而是在使用函数、接口、类的时候才能确定数据的类型
(() => {
  // 需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中
  // 定义一个函数
  // function getArr1(value: number, count: number): number[] {
  //   // 根据数据和数量产生一个数组
  //   const arr: number[] = []
  //   for (let i = 0; i < count; i++) {
  //     arr.push(value)
  //   }
  //   return arr
  // }
  // const arr1 = getArr1(100.123, 3)
  // console.log(arr1)
  // 定义一个函数,同上,只不过传入的是字符串类型
  // function getArr2(value: string, count: number): string[] {
  //   // 根据数据和数量产生一个数组
  //   const arr: string[] = []
  //   for (let i = 0; i < count; i++) {
  //     arr.push(value)
  //   }
  //   return arr
  // }
  // const arr2 = getArr2('abc', 3)
  // console.log(arr2)
  // 需求:可以传入任意类型的数据,返回来的是存储这个任意类型数据的数组
  // function getArr3(value: any, count: number): any[] {
  //   // 根据数据和数量产生一个数组
  //   const arr: any[] = []
  //   for (let i = 0; i < count; i++) {
  //     arr.push(value)
  //   }
  //   return arr
  // }
  // const arr1 = getArr3(100.123, 3)
  // const arr2 = getArr3('abc', 3)
  // console.log(arr1)
  // console.log(arr2)
  // // arr1中存储的是数字类型的数据
  // // arr2中存储的是字符串类型的数据
  // console.log(arr1[0].toFixed(2)) // 没有任何的智能提示的信息(要么有方法名字的提示信息,要么有错误的提示信息)
  // console.log(arr2[0].split('')) // 没有任何的智能提示的信息(要么有方法名字的提示信息,要么有错误的提示信息)


  function getArr4<T>(value: T, count: number): T[] {
    // 根据数据和数量产生一个数组
    // const arr: T[] = []
    const arr: Array<T> = []
    for (let i = 0; i < count; i++) {
      arr.push(value)
    }
    return arr
  }
  const arr1 = getArr4<number>(200.12345, 5)
  const arr2 = getArr4<string>('abcdefg', 5)
  console.log(arr1)
  console.log(arr2)
  console.log(arr1[0].toFixed(3))
  console.log(arr2[0].split(''))
  // // arr1中存储的是数字类型的数据
  // // arr2中存储的是字符串类型的数据
  // console.log(arr1[0].toFixed(2)) // 没有任何的智能提示的信息(要么有方法名字的提示信息,要么有错误的提示信息)
  // console.log(arr2[0].split('')) // 没有


})()

泛型_多个泛型参数的函数

// 多个泛型参数的函数:函数中有多个泛型的参数
(() => {

  function getMsg<K, V>(value1: K, value2: V): [K, V] {
    return [value1, value2]
  }

  const arr1 = getMsg<string,number>('jack',100.2345)
  console.log(arr1[0].split(''))
  console.log(arr1[1].toFixed(1))
})()

泛型_泛型接口

// 泛型接口:在定义接口时, 为接口中的属性或方法定义泛型类型,在使用接口时, 再指定具体的泛型类型

(() => {

  // 需求:定义一个类,用来存储用户的相关信息(id,名字,年龄)
  // 通过一个类的实例对象调用add方法可以添加多个用户信息对象,调用getUserId方法可以根据id获取某个指定的用户信息对象


  // 定义一个泛型接口
  interface IBaseCRUD<T> {
    data: Array<T>
    add: (t: T) => T
    getUserId: (id: number) => T
  }

  // 定义一个用户信息的类
  class User {
    id?: number // 用户的id  ? 代表该属性可有可无
    name: string // 用户的姓名
    age: number // 用户的年龄
    // 构造函数
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
  }
  // 定义一个类,可以针对用户的信息对象进行增加及查询的操作
  // CRUD---->create,Read,Update,Delete
  class UserCRUD implements IBaseCRUD<User> {
    // 用来保存多个User类型的用户信息对象
    data: Array<User> = []
    //方法用来存储用户信息对象的
    add(user: User): User {
      // 产生id
      user.id = Date.now() + Math.random()
      // 把用户信息对象添加到data数组中
      this.data.push(user)
      return user
    }
    // 方法根据id查询指定的用户信息对象
    getUserId(id: number): User {
      return this.data.find(user => user.id === id)
    }
  }

  // 实例化添加用户信息对象的类UserCRUD
  const userCRUD: UserCRUD = new UserCRUD()
  // 调用添加数据的方法
  userCRUD.add(new User('jack', 20))
  userCRUD.add(new User('tom', 25))
  const { id } = userCRUD.add(new User('lucy', 23))
  userCRUD.add(new User('rousi', 21))
  console.log(userCRUD.data)
  // 根据id查询用户信息对象数据
  const user = userCRUD.getUserId(id)
  console.log(user)

})()

泛型_泛型类

(() => {
  // 定义一个类,类中的属性值的类型是不确定,方法中的参数及返回值的类型也是不确定
  // 定义一个泛型类
  class GenericNumber<T>{
    // 默认的属性的值的类型是泛型类型
    defaultValue: T
    add: (x: T, y: T) => T
  }

  // 在实例化类的对象的时候,再确定泛型的类型
  const g1: GenericNumber<number> = new GenericNumber<number>()
  // 设置属性值
  g1.defaultValue = 100
  // 相加的方法
  g1.add = function (x, y) {
    return x + y
  }
  console.log(g1.add(g1.defaultValue,20))


  // 在实例化类的对象的时候,再确定泛型的类型
  const g2: GenericNumber<string> = new GenericNumber<string>()
  // 设置属性值
  g2.defaultValue = '哈哈'
  // 相加的方法
  g2.add = function (x, y) {
    return x + y
  }
  console.log(g2.add('帅杨',g2.defaultValue))
})()

泛型_泛型约束

// 如果我们直接对一个泛型参数取 length 属性, 会报错, 因为这个泛型根本就不知道它有这个属性
(() => {
  // 定义一个接口,用来约束将来的某个类型中必须要有length这个属性
  interface ILength{
    // 接口中有一个属性length
    length:number
  }
  function getLength<T extends ILength>(x: T): number {
    return x.length
  }

  console.log(getLength<string>('what are you no sha lei'))
  // console.log(getLength<number>(123))
})()

内容总结

以上是互联网集市为您收集整理的21-3-18 TypeScript 学习笔记 .04全部内容，希望文章能够帮你解决21-3-18 TypeScript 学习笔记 .04所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---