TypeScript:3、类型声明与类型推断

类型声明与类型推断

TypeScript 最重要的能力之一,就是通过类型信息帮助我们检查代码。类型信息可以手动声明,也可以由编译器自动推断。

一、类型声明的基本语法

变量、参数和返回值都可以添加类型:

ts 复制代码
let variable: type;

let variable: type = value;

function fn(parameter: type): returnType {
  // ...
}

实际示例:

ts 复制代码
let username: string = '孙悟空';
let age: number = 18;

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

二、变量类型检查

声明为 number 的变量只能保存数字:

ts 复制代码
let count: number = 10;

count = 20;

// 编译错误:不能把 string 赋值给 number
// count = '20';

类型声明的作用不是把值转换成某种类型,而是告诉编译器这个变量应该保存什么类型的值。

三、自动类型推断

当变量声明和初始化同时完成时,TypeScript 通常可以根据初始值推断类型:

ts 复制代码
let message = 'hello';
let total = 100;
let completed = false;

编译器会推断出:

text 复制代码
message   → string
total     → number
completed → boolean

后续赋值仍然会受到推断类型的限制:

ts 复制代码
let message = 'hello';

message = 'world';

// 编译错误:message 被推断为 string
// message = 100;

四、什么时候应该显式声明类型

以下情况建议显式写出类型:

  1. 变量没有初始值。
  2. 函数参数需要明确约束。
  3. 函数返回值对外提供服务。
  4. 类型比较复杂或单靠初始值无法表达意图。
  5. 希望让代码阅读者快速了解数据结构。
ts 复制代码
let userName: string;

function formatPrice(price: number): string {
  return '¥' + price.toFixed(2);
}

五、函数参数和返回值

1. 参数类型

ts 复制代码
function greet(name: string): string {
  return 'Hello, ' + name;
}

greet('Tom');

// 编译错误:参数类型不匹配
// greet(100);

2. 返回值类型

ts 复制代码
function multiply(a: number, b: number): number {
  return a * b;
}

如果函数内部的返回值足够明确,TypeScript 也可以推断返回类型:

ts 复制代码
function multiply(a: number, b: number) {
  return a * b;
}

在公共函数、复杂函数或团队项目中,显式写出返回值类型通常更容易维护。

六、let 和 const 的类型特点

ts 复制代码
let mutableValue = 'hello';
mutableValue = 'world';

const fixedValue = 'hello';

let 声明的变量可以重新赋值,const 声明的变量不能重新赋值。实际项目中,变量不会重新赋值时优先使用 const。

七、类型声明和类型推断如何选择

场景 建议
初始值简单且类型明显 使用类型推断
函数参数 显式声明
函数返回值复杂或对外使用 建议显式声明
没有初始值 显式声明
类型表达业务规则 显式声明

示例:

ts 复制代码
const appName = '后台管理系统';

function getUserId(userId: number): number {
  return userId;
}

八、常见错误

错误一:把类型声明写成赋值

ts 复制代码
// 错误写法
// let age = number;

// 正确写法
let age: number = 18;

错误二:以为类型声明会转换数据

ts 复制代码
const input = '18';

// 类型断言不会把字符串转换为数字
const value = input as unknown as number;

真正需要转换时,应该使用运行时转换方法:

ts 复制代码
const value = Number(input);

错误三:为了省事给所有变量使用 any

any 会削弱类型检查。类型确实未知时,优先考虑 unknown,并在使用前进行类型判断。

九、本章小结

  • 类型声明使用 变量: 类型 语法。
  • 函数参数和返回值可以分别声明类型。
  • 初始化时,TypeScript 通常可以自动推断类型。
  • 类型声明用于检查,不负责运行时数据转换。
  • 能推断时可以少写类型,公共接口和业务边界建议明确声明。
相关推荐
系统集成-鹰翔5 小时前
ERP图片改名后仍命中识别缓存:缓存键、十分钟到期与调用计数
javascript·经验分享·后端
FlyWIHTSKY6 小时前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
程序员大阳7 小时前
副队长JavaScript教程(66)-本地存储实战:待办事项网页的开发
javascript·json·实战·待办事项·本地存储·案例
Dream-Y.ocean8 小时前
鸿蒙PC平台逻控 PLC 编辑器适配实战:基于 Electron 壳方案的纯 JavaScript 梯形图编程与仿真引擎开发
javascript·编辑器·harmonyos
前端小D10 小时前
JS核心底层
前端·javascript
Dovis(誓平步青云)11 小时前
启元 T1 Pro 人机相声搭档:语音-触摸双通道的启元机器人节奏引擎设计
开发语言·前端·javascript·microsoft·交互
且从容.11 小时前
Ubuntu 安装 Docker
linux·ubuntu·docker
codeejun12 小时前
每日一Go·MySQL-11、覆盖索引 & 回表原理
javascript·数据库·mysql
用户2986985301412 小时前
React 前端将 Excel 工作表导出为图片的技术实践
javascript·react.js·excel
麦麦麦当劳大王1 天前
【油猴脚本】Boss直聘 岗位职责复制
开发语言·前端·javascript