TypeScript基础(一)基本类型与类型运算

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

引言

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

基本类型

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

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

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

1. 数字类型(number)

letage: number=25;

2. 字符串类型(string)

letname: string="John";

3. 布尔类型(boolean)

letisDone: boolean=false;

4. 数组类型(array)

letnumbers: number[] = [1, 2, 3, 4, 5];
letfruits: Array<string>= ["apple", "banana", "orange"];

5. 对象(object)

functionprintValues(obj: object) {
constvalues=Object.values(obj)
values.forEach((v) =>console.log(v))
}
printValues({
name: 'afd',
age: 33})

6. null和undefined

letnullValue: null=null;
letundefinedValue: undefined=undefined;

其他常用类型

  • void类型:通常用于约束函数的返回值,表示该函数没有任何返回
functionsayHello(): void {
console.log("Hello!");
}
  • never类型:通常用于约束函数的返回值,表示该函数永远不可能结束
functionthrowError(message: string): never {
thrownewError(message);
}
functioninfiniteLoop(): never {
while (true) {
// do something...  }
}
  • 字面量类型:使用一个值进行约束。它可以用于限制变量的取值范围,只允许特定的字面量值赋给变量
letarr: [] // arr永远只能取值为一个空数组letgender='男'|'女'
  • 元祖类型(Tuple): 一个固定长度的数组,并且数组中每一项的类型确定
letperson: [string, number] = ["John", 25];
  • any类型: any类型可以绕过类型检查,因此,any类型的数据可以赋值给任意类型
letdata: any="Hello";
data=123;

类型运算

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

1. 联合类型(Union Types)

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

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

2. 交叉类型(Intersection Types)

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

interfaceA {
name: string;
}
interfaceB {
age: number;
}
typeC=A&B;
letperson: C= {
name: "John",
age: 30};

3. 可选属性(Optional Properties)

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

interfacePerson {
name: string;
age?: number;
}
letperson1: Person= {
name: "John"};
letperson2: Person= {
name: "Jane",
age: 25};

4. 泛型约束(Generic Constraints)

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

interfaceLengthwise {
length: number;
}
functionlogLength<TextendsLengthwise>(arg: T): void {
console.log(arg.length);
}
logLength("Hello"); // 输出 5logLength([1, 2, 3]); // 输出 3

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

类型别名

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

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

1. 基本类型别名

typeID=number;
letuserId: ID=123;

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

2. 联合类型别名

typeStatus="success"|"failure";
letresult: Status="success";

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

3. 复杂对象类型别名

typePoint= {
x: number;
y: number;
};
letp: Point= { x: 10, y: 20 };

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

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

类型约束

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

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

functionmultiply(a: number, b: number): number {
returna*b;
}
letresult=multiply(2, 3); // 返回 6

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

2.函数重载

functiongetValue(value: string): string;
functiongetValue(value: number): number;
functiongetValue(value: string|number): string|number {
if (typeofvalue==="string") {
return"Hello, "+value;
  } elseif (typeofvalue==="number") {
returnvalue*2;
  }
thrownewError("value不是string或number类型");
}
letresult1=getValue("John"); // 返回 "Hello, John"letresult2=getValue(5); // 返回 10

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

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


总结

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

目录
相关文章
|
22天前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
41 6
|
21天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
1月前
|
JavaScript 安全 前端开发
TypeScript类型声明:基础与进阶
通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
34 2
|
1月前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
2月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与最佳实践
【10月更文挑战第8天】深入理解TypeScript:类型系统与最佳实践
|
2月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
2月前
|
JavaScript 前端开发 开发者
TypeScript :基本配置&数据的基本类型
本文介绍了TypeScript的安装、常见问题及解决方案、配置与使用方法。包括通过npm全局安装TypeScript、设置PowerShell执行策略、初始化项目、配置模块声明、处理数据类型等。详细步骤和代码示例帮助开发者快速上手。
|
1月前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
29 0