Articles
TypeScript简介
TypeScript中的内置函数

TypeScript中的内置函数

本文解释了TypeScript中的内置函数。

YouTube Video

TypeScript中的内置函数

TypeScript中的内置函数是为简洁地执行日常操作而提供的方便函数。这些是带有额外类型安全性的标准JavaScript函数，使其在TypeScript编程中特别有用。在这里，我们将详细解释一些重要的内置函数、它们的用法以及类型规范。

什么是内置函数？

TypeScript的内置函数基于标准JavaScript函数。应用TypeScript的类型系统可以增强类型检查和自动补全。主要函数包括以下几种：。

  • parseInt()
  • parseFloat()
  • isNaN()
  • isFinite()
  • Number()
  • String()
  • Array()
  • Array.isArray()
  • eval()
  • encodeURI()
  • decodeURI()
  • setTimeout()
  • setInterval()

这些函数在TypeScript项目中广泛用于简洁的数据转换和评估。

parseInt()

parseInt() 是用于将字符串转换为整数的函数。您可以将基数（如二进制、十进制）指定为第二个参数。在TypeScript中，您可以按照以下方式指定类型：。

 1function stringToInt(value: string, radix: number = 10): number {
 2    const result: number = parseInt(value, radix);
 3    if (isNaN(result)) {
 4        throw new Error('Invalid number format');
 5    }
 6    return result;
 7}
 8
 9console.log(stringToInt("42")); // 42
10console.log(stringToInt("101010", 2)); // 42 (converted from binary)
  • 指定输入为字符串，格式为 value: string
  • 返回值被明确指定为 number 类型。

parseFloat()

parseFloat() 是用于将字符串转换为浮点数的函数。

 1function stringToFloat(value: string): number {
 2    const result: number = parseFloat(value);
 3    if (isNaN(result)) {
 4        throw new Error('Invalid number format');
 5    }
 6    return result;
 7}
 8
 9console.log(stringToFloat("3.14")); // 3.14
10console.log(stringToFloat("2.71828")); // 2.71828
  • parseFloat() 可以正确解析包含小数点的数字。
  • 通过指定类型，如果输入不是数字，您可以在类型检查过程中收到警告。

isNaN()

isNaN() 是用于判断给定值是否为 NaN（非数字）的函数。以下是在TypeScript中的一个使用示例：。

1function checkNaN(value: unknown): boolean {
2    return isNaN(Number(value));
3}
4
5console.log(checkNaN("hello")); // true
6console.log(checkNaN(123)); // false
  • unknown 类型是一个可以接受任何类型的通用类型。
  • 使用 Number() 函数转换为数字，并检查结果是否为 NaN。

isFinite()

isFinite() 用于判断一个值是否为有限值。

1function isValueFinite(value: unknown): boolean {
2    return isFinite(Number(value));
3}
4
5console.log(isValueFinite("100")); // true
6console.log(isValueFinite(Infinity)); // false
  • 此函数还会在判断前使用 Number() 将值转换为数字。

Number()

Number() 函数将字符串或布尔值转换为数字。

1function convertToNumber(value: string | boolean): number {
2    return Number(value);
3}
4
5console.log(convertToNumber("42")); // 42
6console.log(convertToNumber(true)); // 1
  • 在这个例子中，使用联合类型 string | boolean 指定参数可以是字符串或布尔值之一。

String()

String() 函数将数字或布尔值转换为字符串。

1function convertToString(value: number | boolean): string {
2    return String(value);
3}
4
5console.log(convertToString(123)); // "123"
6console.log(convertToString(false)); // "false"
  • 在这个例子中，创建了一个函数，它接受联合类型 number | boolean，并将结果转换为字符串。

Array()

Array() 函数用于创建一个新数组。此外，它还提供了许多有用的方法，用于从现有数组创建子数组或提取特定元素。

 1function createArray(): Array<number> {
 2    return Array(1, 2, 3, 4, 5); // 新しい配列を作成
 3}
 4
 5function getSubArray(array: Array<number>): Array<number> {
 6    return array.slice(1, 4); // サブ配列を作成
 7}
 8
 9const numbers = createArray();
10console.log(numbers); // [1, 2, 3, 4, 5]
11
12const subArray = getSubArray(numbers);
13console.log(subArray); // [2, 3, 4]
  • 本示例演示了如何使用 Array() 函数创建新数组，并使用 slice() 方法创建子数组。

Array.isArray()

Array.isArray() 用于判断给定的值是否为数组。

1function checkArray(value: unknown): boolean {
2    return Array.isArray(value);
3}
4
5console.log(checkArray([1, 2, 3])); // true
6console.log(checkArray("Not an array")); // false
  • 使用 unknown 类型，我们可以接受任意类型，同时检查它是否是数组。

eval()

eval() 函数将一个字符串作为表达式进行计算并返回结果。然而，由于安全性和性能风险，不建议使用它。

1function evaluateExpression(expression: string): any {
2    return eval(expression);
3}
4
5console.log(evaluateExpression("2 + 3")); // 5
6console.log(evaluateExpression("'Hello ' + 'World!'")); // "Hello World!"
  • 在本示例中，通过 eval 对作为字符串提供的表达式进行计算，并输出结果。

encodeURI()

encodeURI() 函数对整个 URL 进行编码并转义某些字符。

1const uri = "https://example.com/page?name=John Doe&age=30";
2const encodedURI = encodeURI(uri);
3
4console.log(encodedURI); // "https://example.com/page?name=John%20Doe&age=30"
  • 本示例将空格编码为 %20 以生成安全的 URL。

decodeURI()

decodeURI() 函数将已编码的 URL 还原为原始格式。

1const encodedURI = "https://example.com/page?name=John%20Doe&age=30";
2const decodedURI = decodeURI(encodedURI);
3
4console.log(decodedURI); // "https://example.com/page?name=John Doe&age=30"
  • 本示例将已编码的 URL 字符串还原为原始 URL。

setTimeout()

setTimeout() 函数在给定延迟时间（以毫秒为单位）后执行指定函数。

1setTimeout(() => {
2    console.log("Executed after 2 seconds");
3}, 2000);
  • 本示例在2秒后显示一条消息。

setInterval()

setInterval() 函数以指定间隔时间（以毫秒为单位）重复执行指定函数。

1let count = 0;
2const intervalId = setInterval(() => {
3    count++;
4    console.log(`Interval executed ${count} time(s)`);
5    if (count === 3) {
6        clearInterval(intervalId); // Stops the interval after 3 executions
7    }
8}, 1000);
  • 本示例以每秒为间隔显示一条消息，并在执行三次后停止。

结论

TypeScript 的内置函数通过为标准 JavaScript 函数添加类型安全性，使编码更安全和更高效。这些函数简化了日常编程任务，提高了代码的可读性和可维护性。每个函数都根据其用途正确使用，并通过指定类型提前检测错误，从而在增强开发过程的可靠性方面发挥重要作用。

通过使用 TypeScript，开发可以利用静态类型的优势，同时保持 JavaScript 的灵活性。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

TypeScript 中的空值合并操作符TypeScript中的函数