typescript泛型的基本使用

文章目录

  • 泛型规范
  • 一、泛型的作用
  • 二、any 和 泛型 的区别
    • 1: any类型
    • 2: 泛型
    • 3: 总结
  • 三、泛型的简单使用
    • 1.返回任何类型的泛型函数
    • 2.代码示例
    • 3.返回指定类型的泛型函数
  • 四、泛型接口
    • (1)错误代码示范
    • (2)报错说明
    • (3)正确代码示范


泛型规范

命名:泛型命名建议遵循大驼峰即可。如Person PersonList…


一、泛型的作用

在TypeScript中,泛型(Generics)是一种创建可重用组件的工具,这些组件可以在多种类型上工作,而不仅仅是单一类型。泛型提供了一种方式,使得组件可以适应任何数据类型,如类型(types)、接口(interfaces)、函数类型等。

(1)类型保护:泛型可以帮助我们在编译时检查类型,确保我们的函数或类在处理各种类型的数据时,能够正确地使用这些数据。
(2)代码复用:通过使用泛型,我们可以创建可重用的组件。例如,我们可以创建一个可以接受任何类型的数组的函数,而不是为每种可能的数组类型创建一个单独的函数。
(3)抽象类型:泛型允许我们编写更抽象、更通用的代码。例如,我们可以编写一个处理“可比较”对象的函数,而不是为每种可能的比较操作(如数字比较、字符串比较等)编写单独的函数。

二、any 和 泛型 的区别

function getAge<T>(arg: T, str: T): T{
    console.log('res', str);
    return arg
}
console.log(getAge('111','1')); //都是string类型
console.log(getAge(122,1)); // 都是number类型
console.log(getAge(true, false)); // 都是boolean类型

如上述代码,你可能会疑惑,使用泛型定义数据类型后,为什么任意类型都可以执行。any和泛型都是TypeScript中处理类型的方式,但它们的用途和行为是不同的。

1: any类型

any是TypeScript的一种类型,可以让我们更像使用JavaScript那样编写代码。当你不确定一个变量会是什么类型的时候,你可以使用any类型。这意味着你可以给any类型的变量赋任何类型的值,也可以调用任何方法,TypeScript编译器都不会进行类型检查。但是,这样做会失去类型检查的所有优点。

2: 泛型

泛型是TypeScript提供的一种工具,用于创建可重用的组件,这些组件可以适用于多种类型,而不是单一的类型。泛型允许你创建这样的函数、类和接口,这些函数、类和接口可以适用于多种类型,而不仅仅是一种类型。使用泛型,你可以保留类型信息(即,类型之间的关系),这样在编译时期和运行时期都可以得到类型的保障。

3: 总结

总的来说,any类型提供了最大的灵活性,但是也放弃了类型检查的所有优点。而泛型提供了一种灵活的方式来处理多种类型,同时还保留了类型检查的优点。

三、泛型的简单使用

1.返回任何类型的泛型函数

function getId<T>(id: T): T {
    // ...
}

在这个例子中,T 是一个类型变量——一种特殊的变量,用于表示类型而非值。这个函数允许我们传入任何类型的 arg,并返回与之相同类型的值。这样,我们就可以用同一个函数处理不同类型的数据,而不需要为每种数据类型编写单独的函数。 和any的区别在于,如果你传入的说number类型,返回为string类型就会报错。

2.代码示例

和any类型一样,参数可以为任意属性,但和any不同的是,当那指定了某种类型,你就不能返回与之不相同类型的数据类型了。简单概括:泛型保证函数内类型复用,且保证类型安全

function getAge<T>(arg: T, str: T): T{
    console.log('res', str);
    return arg
}
console.log(getAge('111','1')); //都是string类型
console.log(getAge(122,1)); // 都是number类型
console.log(getAge(true, false)); // 都是boolean类型
// 指定boolean类型,参数为boolean类型
// 报错 Argument of type 'boolean' is not assignable to parameter of type 'string'
// 翻译错误:类型为“boolean”的参数不可分配给类型为“string”的参数
// console.log(getAge(true, false));  // 指定strign类型,参数为boolean类型,所以报错了
console.log(getAge<boolean>(true, false));

3.返回指定类型的泛型函数

getAge<boolean>(true, false)

其实就是在调用函数的时候,将函数的泛型设置为指定数据类型即可。它可以很好的创建可重用并可以接受任何类型的函数。

四、泛型接口

(1)错误代码示范

interface Person{
    name: string,
    age: number,
    sex: string
}

function getUser<Person>():Person{
    return {
      name: '',
      age: 18,
      sex: ''
    }
}
getUser();

(2)报错说明

Type ‘{ name: string; age: number; sex: string; }’ is not assignable to type ‘Person’.
‘Person’ could be instantiated with an arbitrary type which could be unrelated to ‘{ name: string; age: number; sex: string; }’.Vetur(232

翻译:类型“{name:string;age:number;sex:string;}”不可分配给类型“Person”。
“Person”可以用任意类型实例化,该类型可能与“{name:string;age:number;sex:string;}”无关。

说明:在 TypeScript 中,当你在函数声明中使用泛型(如 )时,你实际上是在声明一个新的泛型类型,而不是使用已经存在的 Person 接口。这就是为什么你的代码会报错的原因。人话:getId< Person > 传入的Person 本身就可以用任意类型传入,你传入Person有点多余。

(3)正确代码示范

其实就是把getId< Person > 旁边的< Person >删除就可以了。

interface Person{
    name: string,
    age: number,
    sex: string
}

function getUser():Person{
    return {
      name: '',
      age: 18,
      sex: ''
    }
}
getUser();

你可能感兴趣的:(typescript,typescript,ubuntu,javascript)