当前位置：首页 > news >正文

一幅长文细学TypeScript（二）——TS的数据类型

news 来源：原创 2024/5/5 2:50:31

2 TS的数据类型

摘要：为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

声明：如果文章有错误请及时在评论区指出

作者：来自ArimaMisaki创作

2.1 类型注解

说明：我们说过，ts是对js弱类型的改进，改进方式是明确指出类型。

格式：变量名:数据类型

let age:number = 18;
age = 'hello';
console.log(age);

2.2 常用类型

JS已有类型（原始类型）：number/string/boolean/null/undefined/symbol/object

TS新增类型：联合类型、自定义类型、接口、元组、字面量类型、枚举、void、any等

2.3 原始类型

说明：这里只介绍布尔、数字、字符串

// 1.布尔值
let a:boolean = false;
console.log(a , typeof a);

// 2.数字
let b1:number = 6;
let b2:number = 0xf00d; //16进制
let b3:number = 0b1010; //2进制
let b4:number = 0o744; //8进制
console.log(b1);
console.log(b2);
console.log(b3);
console.log(b4);

// 3.字符串
let c1:string = 'bob';
let c2:string = "oh";
let c3:string = `Gene`; // 模板字符串写法
console.log(c1);
console.log(c2);
console.log(c3);

2.4 数组类型

// 常见语法
let numbers:number[] = [1,3,5]
// 数组泛型语法
let strings:Array<string> = ['a','b','c']

console.log(numbers);

2.5 元组类型

说明：元组和数组类似，但不同的是元组中元素的类型和数量已知。

// 1 定义元素类型
let x: [string, number];
// 2 初始化
x = ['hello',10]
// x = [10,'hello'] 报错，10不是string类型,'hello'不是number类型
console.log(x);

// x[2] = 'world' 报错，不能越界访问
console.log(x);

2.6 类型别名

说明：利用type我们可以为自定义的数据类型起一个别名。

// 使用type关键字来创建别名
type CustomArray = (number | string)[]
let arr1:CustomArray = [1,'a',3,'b']
let arr2:CustomArray = ['x','y',6,7]
console.log(arr1)
console.log(arr2)

2.7 函数类型

// 指定形参类型和返回值类型
function add1(num1: number, num2: number): number {
    return num1 + num2
}

// 箭头函数语法 单独指定参数和返回值类型
const add2 = (num1: number, num2: number): number => {
    return num1 + num2
}

// 箭头函数语法 同时指定参数和返回值类型
const add3: (num1: number, num2: number) => number = (num1, num2) => {
    return num1 + num2
}

// 没有返回值类型
const add4 = (num1: number, num2: number): void => {
    console.log(num1 + num2);
}

//可选参数 通过问号的形式说明可选
// 可选参数必须位于参数列表最后面，即可选参数后面不可出现必选参数
const mySlice = (start?:number,end?:number):void =>{
    console.log('起始索引:',start,'结束索引',end);
}

console.log(add1(1, 2));
console.log(add2(2, 3));
console.log(add3(3, 4));
add4(4, 5)
mySlice(1)

2.8 对象类型

说明：对象类型可以很好地表示Object.create这样的API。

// 对象字面量
let person:{name:string;age:number;sayHi():void} = {
    name:'ArimaMisaki',
    age:13,
    sayHi(){}
}

// 对象可选属性
let myAxios = (config:{url:string;method?:string}) => {

}

console.log(person);

// 对象类型可以很好地表示Object.create这样的API
declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

2.9 枚举类型

说明：

enum类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
默认情况下，从0开始为元素编号。你也可以手动的指定成员的数值。
枚举类型提供的一个便利是你可以由枚举的值得到它的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;
console.log(c); // 为1号位起名为Green
// 查看1号位对应的名字
let colorName:string = Color[1];
console.log(colorName);// Green

2.10 any

说明：

typescript要求每个变量都有数据类型，但在实际应用中有时变量接收的是动态的数据，这时候我们可以指定变量类型为any，绕开编译阶段的检查。
any类型可以用于替代联合类型

let a: any = 1
console.log(a,typeof a); //1 number
a = '12'
console.log(a,typeof a); //12 string

// 替代联合类型
let list:any[] = [1,'a',true];
list[1] = 100;
console.log(list , typeof list); //[1, 100, true] object

2.11 void

说明：当一个函数没有返回值时，它可以归为void类型。

let fn = ():void=>{
    console.log("hello");
}
fn()

2.12 Never

说明：

never类型表示永不存在的值的类型。
never类型是任何类型的子类型，但任何类型都不是never的子类型。

// 返回never的函数必须存在无法到达的终点，如死循环
function infiniteLoop(): never {
    while (true) {
    }
}

2.13 联合类型

说明：联合类型是一种比较高级的类型，内容繁多，我们在这里稍加提一下及可，后面进行更深入的学习。

// 小括号必加 表明该数组中含有number类型和string类型
let arr:(number | string)[] = [1,'a',3,'b']
console.log(arr);

2.14 类型断言

说明：类型断言实际上可以理解为类型转换。有时候对于一些奇怪的数据类型TS可能无法做出判断，此时你可以使用类型断言的语法告诉它：你不知道让我来，我告诉你它是什么类型。

语法：

<数据类型>变量名
变量名 as 数据类型

// ts不知道是什么类型，我们明确指出它是string类型
// 1.尖括号写法
let someValue1: any = "this is a string";

let strLength: number = (<string>someValue1).length;

// 2.as写法
let someValue2: any = "this is a string";

let strLength: number = (someValue2 as string).length;