软件教程 2025年08月6日
0 收藏 0 点赞 797 浏览 3619 个字
摘要 :

文章目录 引言 基本类型 其他常用类型 类型运算 类型别名 类型约束 总结 本文重点讲解TypeScript基础:基本类型与类型运算,让我们来一起学习TypeScript吧! 引言 Type……




本文重点讲解TypeScript基础:基本类型与类型运算,让我们来一起学习TypeScript吧!

引言

TypeScript是一种开源的编程语言,它是JavaScript的超集,意味着所有的JavaScript代码都可以在TypeScript中运行。TypeScript添加了静态类型检查和其他一些新特性,以提高代码的可读性、可维护性和可扩展性。

基本类型

  • number:数字
  • string:字符串
  • boolean:布尔
  • 数组
  • object: 对象
  • null 和 undefined

null和undefined是所有其他类型的子类型,它们可以赋值给其他类型

通过添加strictNullChecks:true,可以获得更严格的空类型检查,null和undefined只能赋值给自身。

1. 数字类型(number)

let age: number = 25;

2. 字符串类型(string)

let name: string = \"John\";

3. 布尔类型(boolean)

let isDone: boolean = false;

4. 数组类型(array)

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Arraystring> = [\"apple\", \"banana\", \"orange\"];

5. 对象(object)

function printValues(obj: object) {
  const values = Object.values(obj)
  values.forEach((v) => console.log(v))
}

printValues({
  name: \'afd\',
  age: 33
})

6. null和undefined

let nullValue: null = null;
let undefinedValue: undefined = undefined;

其他常用类型

void类型:通常用于约束函数的返回值,表示该函数没有任何返回

function sayHello(): void {
 console.log(\"Hello!\");
}

never类型:通常用于约束函数的返回值,表示该函数永远不可能结束

function throwError(message: string): never {
 throw new Error(message);
}
function infiniteLoop(): never {
  while (true) {
    // do something...
  }
}

字面量类型:使用一个值进行约束。它可以用于限制变量的取值范围,只允许特定的字面量值赋给变量

let arr: [] // arr永远只能取值为一个空数组

let gender = \'男\' | \'女\'

元祖类型(Tuple): 一个固定长度的数组,并且数组中每一项的类型确定

let person: [string, number] = [\"John\", 25];

any类型: any类型可以绕过类型检查,因此,any类型的数据可以赋值给任意类型

let data: any = \"Hello\";
data = 123;

类型运算

类型运算符在TypeScript中用于对类型进行操作和组合。以下是对常见的类型运算符进行介绍:

1. 联合类型(Union Types)

使用 | 运算符将多个类型组合成一个联合类型。表示变量可以是多个类型中的任意一个。例如:

let age: number | string;
age = 25; // 合法
age = \"25\"; // 合法

2. 交叉类型(Intersection Types)

使用 & 运算符将多个类型组合成一个交叉类型。表示变量具有多个类型的属性和方法。例如:

interface A {
 name: string;
}
interface B {
 age: number;
}
type C = A & B;
let person: C = {
 name: \"John\",
 age: 30
};

3. 可选属性(Optional Properties)

使用 ? 运算符将属性标记为可选的。表示该属性可以存在,也可以不存在。例如:

interface Person {
 name: string;
 age?: number;
}
let person1: Person = {
 name: \"John\"
};
let person2: Person = {
 name: \"Jane\",
 age: 25
};

4. 泛型约束(Generic Constraints)

使用 extends 关键字对泛型进行约束,限制泛型参数必须满足某些条件。例如:

interface Lengthwise {
 length: number;
}
function logLengthextends Lengthwise>(arg: T): void {
 console.log(arg.length);
}
logLength(\"Hello\"); // 输出 5
logLength([1, 2, 3]); // 输出 3

在这个示例中,我们使用 extends 关键字约束泛型参数 T 必须满足 Lengthwise 接口的要求,即具有 length 属性。通过泛型约束,我们可以在函数内部使用泛型参数的特定属性或方法。 这些类型运算符可以帮助开发者更灵活地操作和组合类型,提供了更强大的类型系统支持。通过合理地使用这些运算符,可以提高代码的可读性和可维护性,并增强类型安全性。

类型别名

类型别名(Type Aliases)是TypeScript中的一种特性,它允许为已有的类型定义一个别名,以提高代码的可读性和可维护性。通过类型别名,可以给复杂或重复出现的类型定义一个简洁的名称。

以下是一些使用类型别名的示例:

1. 基本类型别名

type ID = number;
let userId: ID = 123;

在这个示例中,我们使用type关键字为number类型定义了一个别名ID,然后将其用于声明变量userId

2. 联合类型别名

type Status = \"success\" | \"failure\";
let result: Status = \"success\";

在这个示例中,我们使用type关键字为字符串字面量类型定义了一个联合类型别名Status,它只允许取值为”success”或”failure”。然后将其用于声明变量result

3. 复杂对象类型别名

type Point = {
  x: number;
  y: number;
};
let p: Point = { x: 10, y: 20 };

在这个示例中,我们使用type关键字为对象类型定义了一个别名Point,它包含了两个属性x和y。然后将其用于声明变量p。

通过使用类型别名,我们可以将复杂的类型定义简化为一个易于理解和使用的名称。

类型约束

在TypeScript中,函数可以通过参数类型、返回值类型和函数重载等方式进行约束。以下是函数的相关约束和函数重载的示例

1. 参数类型、返回值类型约束

function multiply(a: number, b: number): number {
 return a * b;
}
let result = multiply(2, 3); // 返回 6

在这个示例中,函数multiply接受两个参数,都是number类型,并且返回值也是number类型。通过返回值类型的约束,我们可以确保函数返回的结果符合预期的数据类型。

2.函数重载

function getValue(value: string): string;
function getValue(value: number): number;
function getValue(value: string | number): string | number {
  if (typeof value === \"string\") {
    return \"Hello, \" + value;
  } else if (typeof value === \"number\") {
    return value * 2;
  }
  throw new Error(\"value不是string或number类型\");
}
let result1 = getValue(\"John\"); // 返回 \"Hello, John\"
let result2 = getValue(5); // 返回 10

在这个示例中,我们定义了一个名为getValue的函数,并使用多个重载声明来定义不同参数类型对应的返回值类型。在函数体内部,我们根据参数的类型进行不同的处理。通过函数重载,我们可以根据不同的参数类型来调用相应的函数实现。

通过参数类型约束、返回值类型约束和函数重载等方式,我们可以在TypeScript中对函数进行更精确的约束和定义,以提高代码的可读性、可维护性和可靠性。

总结

通过了解这些基本类型和类型运算,开发者可以更好地定义变量、函数参数和返回值的数据类型,并在编码过程中捕获潜在的错误。这有助于提高代码质量、减少调试时间,并增强代码的可读性、可维护性和可靠性。

以上就是TypeScript基础:基本类型与类型运算的全部内容哦,希望对你有帮助!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6375.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号