TypeScript 中的基本类型推断-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 中的基本类型推断

TypeScript 是 JavaScript 的超集，提供了静态类型检查和增强开发体验等功能，许多开发者选择使用 TypeScript 来开发前端项目。在 TypeScript 中，变量和函数的类型可以显式地声明，也可以通过类型推断自动推导。本文将介绍 TypeScript 中的基本类型推断，旨在帮助开发者更好地理解、使用 TypeScript。

基本类型推断

TypeScript 中的类型推断是指 TypeScript 根据变量的值来推断变量的类型的过程。如果一个变量没有显式地声明类型，则 TypeScript 会根据变量的值来推导出变量的类型。例如：

let num = 123;
let str = "Hello";
let bool = true;

在上述代码中，变量 num 的类型被推断为 number，变量 str 的类型被推断为 string，变量 bool 的类型被推断为 boolean。

在 TypeScript 中，基本类型推断可以减少类型声明的工作量，同时又能保证类型安全。但是，有时推断结果可能与开发者的意图不一致，这时需要显式地声明变量类型。

推断联合类型

在 TypeScript 中，可以使用联合类型表示一个值的可能类型。例如：

let value: string | number;
value = "Hello";
value = 123;

在上述代码中，变量 value 的类型被推断为 string | number，即可以是字符串类型，也可以是数字类型。

当 TypeScript 推断出一个联合类型时，可以使用类型保护来判断一个变量是哪种类型，从而使用变量的特定属性和方法。例如：

function getStringLength(value: string | number) {
  if (typeof value === "string") {
    return value.length;
  } else {
    return 0;
  }
}

在上述代码中，函数 getStringLength 接收一个参数 value，它可以是 string 类型或 number 类型。通过判断 value 的类型，可以返回字符串的长度或数字 0。

推断函数类型

在 TypeScript 中，可以使用箭头函数或函数表达式来声明函数。例如：

const add1 = (a: number, b: number) => a + b;
const multiply = function (a: number, b: number) {
  return a * b;
};

在上述代码中，变量 add1 和函数 multiply 分别用箭头函数和函数表达式声明了函数类型。

在 TypeScript 中，函数类型推断可以帮助开发者根据函数的实现自动推断出函数的类型。例如：

function add2(a: number, b: number) {
  return a + b;
}

在上述代码中，函数 add2 的类型被推断为 (a: number, b: number) => number，即输入两个数字类型，返回一个数字类型。

推断数组和对象类型

在 TypeScript 中，可以通过字面量形式声明数组和对象类型。例如：

const fruits: string[] = ["apple", "banana", "orange"];
const person: { name: string; age: number } = { name: "Tom", age: 18 };

在上述代码中，变量 fruits 是一个字符串数组类型，变量 person 是一个对象类型，包括 name 和 age 两个属性，分别为字符串类型和数字类型。

在 TypeScript 中，可以通过数组和对象的元素来推断它们的类型。例如：

const numbers = [1, 2, 3];
const user = {
  name: "Jack",
  age: 20,
};

在上述代码中，变量 numbers 的类型被推断为 number[]，变量 user 的类型被推断为 { name: string; age:number }。

总结

本文介绍了 TypeScript 中的基本类型推断，包括基本类型推断、推断联合类型、推断函数类型、推断数组和对象类型等。基于 TypeScript 的类型推断，可以提高开发效率和代码质量，避免类型错误和运行时错误。在实际开发中，开发者应当熟练掌握 TypeScript 的类型推断规则，加深对类型系统的理解，写出更加健壮和高效的代码。

示例代码

-- -------------------- ---- -------
--- --- - ----
--- --- - --------
--- ---- - -----

--- ------ ------ - -------
----- - --------
----- - ----

-------- ---------------------- ------ - ------- -
  -- ------- ----- --- --------- -
    ------ -------------
  - ---- -
    ------ --
  -
-

----- ---- - --- ------- -- ------- -- - - --
----- -------- - -------- --- ------- -- ------- -
  ------ - - --
--

-------- ------- ------- -- ------- -
  ------ - - --
-

----- ------- -------- - --------- --------- ----------
----- ------- - ----- ------- ---- ------ - - - ----- ------ ---- -- --

----- ------- - --- -- ---
----- ---- - -
  ----- -------
  ---- ---
--

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64689a69968c7c53b08c8f1b