告别繁琐的类型注解:TypeScript 类型推断完全指南

一、变量初始化

这是类型推断最常见、也最直观的场景。简单来说,当你在声明一个变量或常量时,如果同时进行了初始化,TypeScript会根据你赋的值自动推断出它的类型。

typescript 复制代码
// 基础类型推断
let name = "Alice";      // TypeScript 推断 name 的类型是 string
let age = 30;            // TypeScript 推断 age 的类型是 number
let isStudent = true;    // TypeScript 推断 isStudent 的类型是 boolean

// 复杂类型也不在话下
const user = {
    id: 1,
    name: "Bob"
};
// TypeScript 推断 user 的类型是 { id: number; name: string; }

const numbers = [1, 2, 3];
// TypeScript 推断 numbers 的类型是 number[]

// 尝试给它们赋一个错误的类型,守护者会立刻现身!
name = 123; // Error:不能将类型"number"分配给类型"string".

关键点letconst 的推断有所不同。const 因为不可变,TypeScript会推断出更精确的字面量类型

typescript 复制代码
let greeting = "hello"; // 类型是 string
const constGreeting = "hello"; // 类型是 "hello"

二、函数返回类型

根据return 语句,来推断函数的返回值类型

typescript 复制代码
function add(a: number, b: number) {
  return a + b; // 返回number类型
}

三、赋值

函数参数类型/返回值也能通过赋值来推断

typescript 复制代码
type Adder = (a: number, b: number) => number;
let foo: Adder = (a, b) => {
  a = 'hello'; // Error:不能把 'string' 类型赋值给 'number' 类型
  return a + b;
};

解析

  • foo 的类型是 Adder,他能推导出 foo 的参数 abnumber 类型。

四、组合

示例:解构赋值

typescript 复制代码
function returnType(a:string, b:number){
    return [a, b]
}

let [str, num] = returnType('hello', 100);
console.log(str, num); // hello 100
console.log(typeof str, typeof num); // string number

总结

如果你喜欢本教程,记得点赞+收藏!关注我获取更多JavaScript/TypeScript开发干货

相关推荐
文心快码BaiduComate15 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古16 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers
行者..................17 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_17 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员
golang学习记17 小时前
AI 乱写代码?不是模型不行,而是你的 VS Code 缺了 Context!MCP 才是破局关键
前端
星光不问赶路人17 小时前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
疯狂踩坑人17 小时前
【万字长文】让面试没有难撕的JS基础题
javascript·面试
z_y_j22997043818 小时前
服务器中使用Docker部署前端项目
服务器·前端·docker·容器
极客小俊18 小时前
【浅谈javascript禁术】 eval函数暗藏玄机?
javascript
迪丽热爱18 小时前
解决【npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。】问题
前端·npm·node.js