Typescript中的类型和泛型

Posted 2022-10-19

类型推断

类型猜测：我们定义的数据，没有指明类型，此时ts会根据赋值的结果做猜测。

类型推断：我们定义的变量，有时候，我们比计算机更了解变量的类型，此时让计算机去猜测可能达不到预期，如果我们告诉计算该数据的类型，此时计算机分配内存空间的时候，可能更加的精确了

注意：类型的推断并没有对数据类型做转换。

有两种语法

第一种 <类型>数据

第二种 数据 as 类型

枚举类型

枚举类型是一种新的数据类型，介于对象和数组之间的一种数据类型

对象特点：可以通过​​属性名称​​，访问属性值

数组特点：可以通过​​索引值​​，访问成员值

枚举类型特点：

既可以通过属性名称，访问索引值

也可以通过索引值，访问属性名称

我们通过enum定义枚举类型

enum 枚举数据名称

定义属性数据名称

注意：

1 枚举数据名称首字母通常要大写。

2 我们可以为枚举数据属性名称设置索引值，此时

前面成员的索引值不变

后面成员的索引值递增

举例：

// 定义数组
let arr: number[] = [hello, color]
let arr: number[] = [100, 200]
// 新增的成员类型也要一直
arr[2] = true
arr[2] = 50;
// 省略类型
let colors = [red, green, blue]
// 数组成员可以是任意的类型
let arr:any[] = [100, color, true];
// 元组
let arr:[number, string] = [100, hello];
let arr:[number, string, boolean] = [100, hello, false];
// 添加成员
arr[2] = 200;
arr[3] = red;
// 如果类型不是元组中的类型
arr[3] = true;
// 定义一个未知类型的变量
var demo;
// 我们可以为demo赋值
demo = 100;
demo = hello;
// 获取demo字符串长度
// let len:number = demo.length;
// 更精确的分配内存空间
// 第一种语法
// let len:number = (<string>demo).length;
// 第二种语法
let len:number = (demo as string).length;
// 修改demo
demo = true;
console.log(111, len, typeof demo)
// 枚举类型
enum Color 
    red,
    // 指明索引值，前面属性索引值不变，后面属性索引值递增
    green = 10,
    blue

// 我们可以通过属性名称，访问索引值
console.log(Color.red)
console.log(Color.green)
console.log(Color.blue)
// 我们也可以通过索引值，访问属性名称
console.log(Color[0])
console.log(Color[1])
console.log(Color[2])
console.log(Color[10])
console.log(Color[11])

泛型

也叫泛类型，也是用来处理数据

通常函数还有输入和输出，输出要根据输入的数据的处理得出结果。

通常来说，输入的类型和输出的结果没有相关连关系的，有时候，我们希望输入的数据类型与输出的数据类型一致，我们就可以使用泛型

定义泛型的语法 <类型别名>

例如 ​​<T>​​ T 就代表一种类型

使用函数的时候，也可以使用泛型

语法

第一种 函数名称<类型>()

第二种 我们也可以省略泛型，让ts去猜测（常用）

函数名称();

类型级联

有时候一个变量可能会出现多种类型，此时我们可以定义换成any，但是我们想缩小范围，更精确的表示类型，我们可以使用类型级联

语法  类型1|类型2|类型3

此时变量就可以是其中的一个类型了

// 定义加法函数
// 参数可有可无，用?
function add(num1:number, num2?:number):number 
    // 如果一个参数，加上10
    if (num2 === undefined) 
        return num1 + 10;
    
    // 实现加法
    return num1 + num2;

// 使用函数
console.log(add(10, 20))
// 参数类型要一致
console.log(add(hello,  world))
// 参数个数要一致
console.log(add(5))
// 没有结果函数
function say():void 
    console.log(hello)

say()
// 程序执行的时候会出现错误
function errorFn():never 
    console.log(错误出现之前)
    // 抛出错误
    throw new Error(出现错误了)
    console.log(错误出现之后)

// 执行函数
errorFn()
// 泛型
function say(str:any):any 
    // 实现函数体
    return hello  + str;

// 输入了字符串，得到了字符串
console.log(say(菜鸟学习))
// 输入了数字呢 ?, 得到字符串，此时输入与输出就不一致了
console.log(say(200), typeof say(200))
// 为了让输入和输出一致，我们可以使用泛类型
function output<T>(str:T):T 
    return str;

// 输入与输出一致了
console.log(output(hello), typeof output(hello))
console.log(output(200), typeof output(200))
// 使用函数，约束类型
console.log(output<number>(300), typeof output<number>(300))
// 工作中，还可以省略泛型
console.log(output(300), typeof output(300))
// 类型级联
function add(num1:number, num2?:number):number|string 
    // 如果一个参数，加上hello
    if (num2 === undefined) 
        return hello  + num1;
    
    // 实现加法
    return num1 + num2;

// 执行函数
console.log(add(100), typeof add(100))
console.log(add(100, 200), typeof add(100, 200))