告别繁琐的类型注解: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开发干货

相关推荐
RaidenLiu8 小时前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost8 小时前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost8 小时前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost8 小时前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪8 小时前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在9 小时前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方9 小时前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
炒米23339 小时前
【Array】数组的方法
javascript
小猫由里香9 小时前
小程序打开文件(文件流、地址链接)封装
前端
Tzarevich9 小时前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端