TypeScript 第一章

news/2025/1/11 4:11:16/

欢迎来到 TypeScript 学习!本章将为您介绍 TypeScript 的基础知识。
TypeScript 是 JavaScript 的一个超集,它提供了静态类型检查、类、接口等特性,使得编写大型应用程序变得更加容易和可维护。TypeScript 编写的代码可以被编译成 JavaScript,可以在任何支持 JavaScript 的环境中运行。

在本章中,我们将深入了解 TypeScript 的基础知识,包括类型注解、类和接口、函数、基本类型、高级类型和类型推断等。

类型注解

TypeScript 可以指定变量、函数、类等的类型,以便在编译时进行类型检查。

变量类型注解

以下是一个声明字符串类型的变量的示例:

let name: string = "TypeScript";

在这个示例中,我们使用 : 操作符指定了变量 name 的类型为 string。

函数类型注解

以下是一个接受两个数字并返回它们之和的函数的示例:

function add(x: number, y: number): number {return x + y;
}

在这个示例中,我们使用 : 操作符指定了函数的参数类型和返回值类型。

类型注解的好处

使用类型注解可以帮助我们更早地发现代码中的错误,提高代码的可读性和可维护性。例如,以下是一个未使用类型注解的示例:

function add(x, y) {return x + y;
}let result = add(1, '2');
console.log(result);

在这个示例中,我们没有使用类型注解指定 add 函数的参数类型和返回值类型。当我们调用 add(1, ‘2’) 时,代码不会报错,但是会返回一个错误的结果。如果我们使用类型注解,就可以更早地发现这个错误:

function add(x: number, y: number): number {return x + y;
}let result = add(1, '2'); // Error: Argument of type '"2"' is not assignable to parameter of type 'number'.
console.log(result);

在这个示例中,TypeScript 报告了一个类型错误,提示我们传递给 add 函数的第二个参数类型不匹配。

类和接口

TypeScript 支持类和接口,它们可以帮助我们组织代码和定义对象的结构。

以下是一个简单的类声明:

class Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}sayHello() {console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);}
}

在这个示例中,我们声明了一个 Person 类,它有一个 name 属性和一个 age 属性,以及一个 sayHello 方法。在构造函数中,我们使用 this 关键字来引用类的实例。

接口

以下是一个接口声明:

interface Person {name: string;age: number;
}function greet(person: Person) {console.log(`Hello, ${person.name}!`);
}

在这个示例中,我们声明了一个 Person 接口,它有一个 name 属性和一个 age 属性。在 greet 函数中,我们使用 Person 接口来指定参数 person 的类型。

类和接口的好处

使用类和接口可以帮助我们更好地组织代码和定义对象的结构,提高代码的可读性和可维护性。例如,以下是一个使用类和接口的示例:

interface Animal {name: string;eat(food: string): void;
}class Cat implements Animal {name: string;constructor(name: string) {this.name = name;}eat(food: string) {console.log(`${this.name} is eating ${food}`);}
}let cat = new Cat('Tom');
cat.eat('fish');

在这个示例中,我们声明了一个 Animal 接口,它有一个 name 属性和一个 eat 方法。然后,我们声明了一个 Cat 类,它实现了 Animal 接口,并定义了自己的 name 属性和 eat 方法。最后,我们创建了一个 Cat 类的实例 cat,并调用了它的 eat 方法。

函数

TypeScript 支持函数,可以指定函数的参数类型和返回值类型。

函数参数类型

以下是一个接受两个数字并返回它们之和的函数:

function add(x: number, y: number): number {return x + y;
}

在这个示例中,我们使用 : 操作符指定了函数的参数类型和返回值类型。

可选参数和默认参数

以下是一个接受两个数字并返回它们之和的函数,其中第二个参数为可选参数,第三个参数为默认参数:

function add(x: number, y?: number, z = 0): number {return x + (y ?? 0) + z;
}

在这个示例中,我们使用 ? 操作符指定第二个参数 y 为可选参数,使用 = 操作符指定第三个参数 z 的默认值为 0。

剩余参数

以下是一个接受任意数量数字并返回它们之和的函数,其中使用了剩余参数:

function sum(...numbers: number[]): number {return numbers.reduce((total, num) => total + num, 0);
}

在这个示例中,我们使用 … 操作符指定剩余参数 numbers,它可以接受任意数量的数字参数。

基本类型

TypeScript 支持 JavaScript 的基本类型,包括布尔值、数字、字符串、数组、元组、枚举和任意值等。

布尔值

以下是一个布尔类型的变量声明:

let isDone: boolean = false;

在这个示例中,我们使用 boolean 类型指定变量 isDone 的类型为布尔值。

数字

以下是一个数字类型的变量声明:

let count: number = 10;

在这个示例中,我们使用 number 类型指定变量 count 的类型为数字。

字符串

以下是一个字符串类型的变量声明:

let message: string = "Hello, TypeScript!";

在这个示例中,我们使用 string 类型指定变量 message 的类型为字符串。

数组

以下是一个数字类型的数组声明:

let numbers: number[] = [1, 2, 3, 4, 5];

在这个示例中,我们使用 number[] 类型指定变量 numbers 的类型为数字类型的数组。

元组

以下是一个元组类型的变量声明:

let tuple: [string, number] = ["TypeScript", 2021];

在这个示例中,我们使用 [string, number] 类型指定变量 tuple 的类型为包含一个字符串类型和一个数字类型的元组。

枚举

以下是一个枚举类型的声明:

enum Color {Red,Green,Blue,
}let color: Color = Color.Red;

在这个示例中,我们声明了一个 Color 枚举类型,并将变量 color 的值设置为 Color.Red。

任意值

以下是一个任意值类型的变量声明:

let value: any = "hello";
value = 10;

在这个示例中,我们使用 any 类型指定变量 value 的类型为任意值,它可以被赋值为任何类型的值。

以上是 TypeScript 的类型系统的一些基础知识。在接下来的学习中,我们将深入了解这些概念,并学习更多高级特性。


http://www.ppmy.cn/news/380934.html

相关文章

Flink TableAPI Aggregation And DataType

序言 这里整理下聚合的优化选项 以及 数据类型 Stream Aggregation SQL 是数据分析中使用最广泛的语言。Flink Table API 和 SQL 使用户能够以更少的时间和精力定义高效的流分析应用程序。此外,Flink Table API 和 SQL 是高效优化过的,它集成了许多查询…

企企通联合创始人兼总架构师杨华:剖析SRM顾问长期主义项目实践

近日,国产大飞机C919商业首飞成功引起广泛关注,此后,我们的出行选择中新增了一项“自己国家的大飞机”,给国人带来了更多的期待和自豪。 走难而正确的路,国产大飞机C919从项目立项到“一飞冲天”,花了十六年…

强化学习复现笔记(2)策略迭代

摘要: 上一节的压缩映射在实际迭代时可以分成两种方法,分别称作值迭代和策略迭代。本文用走迷宫的例子(将1维迷宫扩展到2维)讲这两种迭代。对应第一节参考链接[2]的前4章。 拆分压缩映射 上一节的压缩映射 v f ( v ) vf(v) vf(…

知识付费卖的并非知识,而是这个

哈喽,大家好,我是海哥,知识付费变现创业教练,教育公司培训总监,从事知识付费变现咨询10年,已助力3000人实现知识付费变现。 作为知识付费行业,外行人以为我们卖的是知识,包括行业新手…

从reflect?metadata理解Nest实现原理

目录 正文入口Module 引入模块CatsService操作数据库Reflect Metadata那元数据存在哪呢?nest 的源码:总结 正文 Nest 是 Node.js 的服务端框架,它最出名的就是 IOC(inverse of control) 机制了,也就是不需…

BF-5R对讲机改频

BF-5R对讲机改频教程 一、工具 1、电脑 2、对讲机 3、K插头 4、CH340串口下载器 二、准备工作 1、安装BF480写频软件 -------------------------安装完成------------------- -------------------------双击打开------------------------ 2、安装CH340驱动 3、制作下…

新发通讯 淘宝购买对讲机成用户首选渠道

您用过手机,用过对讲机吗? 答案是否定的,但是你一定听说过对讲机。 当手机成为主流之后,对讲机这种短距离通讯工具开始在通信领域边缘化,相比已突破8亿的手机用户,我国专业无线电通信拥有各类电台用户只有5…

是否有必要购买数字对讲机

网上超出充斥着一定要购买数字机,并宣称数字机才是未来,这让新HAM友很困惑,不知如何选择。 通过跟 老 HAM 交流得出以下结论。 数字玩的人少,没有可交流的人群。数字机距离远了,就没法用了,但模拟机还能用…