TypeScript变量的类型标注

原创于 2026-07-02 01:00:00 发布 · 208 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

在这里插入图片描述

TypeScript变量的类型标注概述

TypeScript 变量的类型标注是 TypeScript 中最基础、最常见的语法之一。它的作用是在声明变量时明确说明变量应该保存什么类型的数据。与 JavaScript 相比，TypeScript 更强调类型明确。JavaScript 中的变量可以在不同时间保存不同类型的数据，而 TypeScript 可以通过类型标注提前限制变量的数据类型，从而在编码阶段发现一部分类型错误。

在学习变量类型标注之前，需要先明确 TypeScript 代码的运行方式。浏览器不能直接运行 TypeScript 代码，浏览器最终执行的仍然是 JavaScript。TypeScript 中的类型标注主要用于开发阶段的类型检查，经过编译后，这些类型标注会从生成的 JavaScript 代码中消失。当前阶段还没有学习 Node.js、npm 和本地 TypeScript 编译环境，因此可以先使用 TypeScript Playground 测试代码，观察类型错误提示和编译后的 JavaScript 结果。

变量类型标注的基本写法是在变量名后面加冒号和类型，例如 let username: string = "jack";。其中，username 是变量名，: string 表示这个变量只能保存字符串，"jack" 是赋给变量的具体值。初学阶段最常见的基础类型包括 string、number 和 boolean。string 用于表示字符串，适合保存姓名、地址、提示信息等文本内容；number 用于表示数字，整数和小数都属于 number；boolean 用于表示布尔值，只能保存 true 或 false。

变量一旦被标注为某种类型，后续赋值时就应该保持类型一致。例如，let age: number = 18; 表示 age 只能保存数字，后面不能再把字符串赋值给它。类似地，let isLogin: boolean = false; 表示 isLogin 只能保存布尔值，不能赋值为 "yes" 或 1。这种规则可以帮助我们在代码运行之前发现明显的类型错误，减少因为变量类型混乱带来的问题。

TypeScript 并不要求所有变量都必须手动写类型标注。如果声明变量时已经有明确的初始值，TypeScript 通常可以根据初始值自动推断变量类型。例如，let username = "jack"; 会被推断为字符串类型，let age = 18; 会被推断为数字类型，let isStudent = true; 会被推断为布尔类型。虽然没有手动写出 : string、: number 或 : boolean，TypeScript 仍然会进行类型检查。

是否手动添加类型标注，可以根据具体场景判断。如果变量是先声明、后赋值，建议写出类型标注，例如 let username: string;。因为声明时没有初始值，手动标注可以明确变量后续应该保存的数据类型。如果变量声明时已经有非常明确的初始值，可以依靠 TypeScript 的类型推断。对于简单的 const 常量，由于声明时必须赋值，而且后续不能重新赋值，通常也可以省略类型标注。

初学阶段还需要注意类型名称的写法。变量类型标注中通常使用小写的 string、number、boolean，不建议写成大写的 String、Number、Boolean。此外，带引号的数字仍然是字符串，例如 "99.8" 是字符串，不是数字；只有不带引号的 99.8 才是数字。理解这些基础规则后，就能看懂 Vue3 示例代码中常见的变量类型标注，也能为后续学习函数类型、数组类型、对象类型和接口打好基础。

案例源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TypeScript 变量的类型标注</title>
</head>
<body>
  <h1>TypeScript 变量的类型标注</h1>

  <p>
    本节学习 TypeScript 中最基础、最常见的语法之一：
    <strong>变量的类型标注</strong>。
  </p>

  <p>
    变量的类型标注，就是在声明变量时，明确告诉 TypeScript：
    这个变量应该保存什么类型的数据。
  </p>

  <hr>

  <p>
    在正式学习变量类型标注之前，需要先说明一个非常重要的问题：
    <strong>浏览器不能直接运行 TypeScript 代码。</strong>
  </p>

  <p>
    浏览器可以直接运行 HTML、CSS 和 JavaScript。
    但是 TypeScript 代码需要先经过编译，转换成 JavaScript 之后，浏览器才能执行。
  </p>

  <p>
    例如，下面是 TypeScript 代码：
  </p>

  <pre><code>let age: number = 18;
console.log(age);</code></pre>

  <p>
    这段代码中，<code>: number</code> 是 TypeScript 的类型标注。
    浏览器不能直接识别这部分 TypeScript 语法。
  </p>

  <p>
    TypeScript 编译后，会转换成 JavaScript：
  </p>

  <pre><code>let age = 18;
console.log(age);</code></pre>

  <p>
    可以看到，类型标注 <code>: number</code> 在编译后的 JavaScript 中消失了。
    因为类型标注主要用于开发阶段的类型检查，真正运行时执行的是 JavaScript。
  </p>

  <p>
    现阶段我们还没有学习 Node.js、npm 和本地 TypeScript 编译环境，
    所以不建议一开始就在本地搭建复杂环境。
  </p>

  <p>
    当前阶段最推荐使用 TypeScript 官方提供的在线练习工具：
    <a href="https://www.typescriptlang.org/play/" target="_blank">
      TypeScript Playground
    </a>
  </p>

  <p>
    使用方式很简单：
  </p>

  <ol>
    <li>打开上面的 TypeScript Playground 官方地址。</li>
    <li>把文档中的 TypeScript 代码复制进去。</li>
    <li>观察编辑器是否提示类型错误。</li>
    <li>查看转换后的 JavaScript 代码。</li>
  </ol>

  <p>
    例如，可以在 TypeScript Playground 中测试下面这段代码：
  </p>

  <pre><code>let age: number = 18;

age = "十八";</code></pre>

  <p>
    这段代码会提示错误。
    因为 <code>age</code> 已经被标注为 <code>number</code> 类型，
    后面不能再赋值字符串。
  </p>

  <p>
    所以，本阶段学习 TypeScript 时要记住：
  </p>

  <ol>
    <li>HTML 文件主要用于展示和讲解 TypeScript 代码。</li>
    <li>TypeScript 代码不能直接写在 HTML 的 <code>&lt;script&gt;</code> 中运行。</li>
    <li>现在可以使用 TypeScript Playground 测试代码。</li>
    <li>后面学习 Node.js、npm 后，再学习如何在本地编译和运行 TypeScript。</li>
    <li>进入 Vue3 项目后，Vite 会帮助我们处理 TypeScript 编译。</li>
  </ol>

  <hr>

  <h2>一、为什么需要变量的类型标注</h2>

  <p>
    在 JavaScript 中，变量可以保存不同类型的数据。
  </p>

  <pre><code>let age = 18;

age = "十八";</code></pre>

  <p>
    上面的代码在 JavaScript 中是允许的。
    第一次赋值时，<code>age</code> 是数字；
    第二次赋值时，<code>age</code> 又变成了字符串。
  </p>

  <p>
    这种写法虽然灵活，但是在项目变大之后，容易产生问题。
    例如，后续代码本来想把 <code>age</code> 当作数字计算，
    但它却变成了字符串，就可能导致错误。
  </p>

  <p>
    TypeScript 的变量类型标注可以提前限制变量的类型。
  </p>

  <pre><code>let age: number = 18;

age = "十八"; // 错误：age 已经被标注为 number，不能再赋值字符串</code></pre>

  <p>
    这里的 <code>: number</code> 表示：
    <code>age</code> 这个变量只能保存数字。
  </p>

  <p>
    这就是变量类型标注的作用：
    <strong>提前规定变量的数据类型，减少代码出错的可能。</strong>
  </p>

  <hr>

  <h2>二、变量类型标注的基本语法</h2>

  <p>
    TypeScript 变量类型标注的基本格式如下：
  </p>

  <pre><code>let 变量名: 类型 = 值;</code></pre>

  <p>
    例如：
  </p>

  <pre><code>let username: string = "jack";
let age: number = 18;
let isStudent: boolean = true;</code></pre>

  <p>
    上面三行代码分别表示：
  </p>

  <ol>
    <li><code>username</code> 是字符串类型，只能保存字符串。</li>
    <li><code>age</code> 是数字类型，只能保存数字。</li>
    <li><code>isStudent</code> 是布尔类型，只能保存 <code>true</code> 或 <code>false</code>。</li>
  </ol>

  <p>
    注意：
    冒号 <code>:</code> 后面的内容不是赋值，而是在说明变量的类型。
  </p>

  <pre><code>let username: string = "jack";</code></pre>

  <p>
    可以这样理解：
  </p>

  <pre><code>let username       // 声明一个变量
: string           // 规定这个变量只能保存字符串
= "jack";          // 给这个变量赋值</code></pre>

  <hr>

  <h2>三、字符串类型 string</h2>

  <p>
    如果一个变量用于保存文字内容，可以标注为 <code>string</code>。
  </p>

  <pre><code>let username: string = "张三";
let address: string = "北京市海淀区";
let message: string = "欢迎学习 TypeScript";</code></pre>

  <p>
    <code>string</code> 表示字符串类型。
    字符串通常用来表示姓名、地址、提示信息等文本内容。
  </p>

  <p>
    如果一个变量已经被标注为 <code>string</code>，
    后面就不能给它赋值数字或布尔值。
  </p>

  <pre><code>let username: string = "张三";

username = "李四"; // 正确：仍然是字符串

username = 100;   // 错误：不能把数字赋值给 string 类型的变量
username = true;  // 错误：不能把布尔值赋值给 string 类型的变量</code></pre>

  <p>
    注意：
    TypeScript 中通常使用小写的 <code>string</code>，
    不建议写成大写的 <code>String</code>。
  </p>

  <hr>

  <h2>四、数字类型 number</h2>

  <p>
    如果一个变量用于保存数字，可以标注为 <code>number</code>。
  </p>

  <pre><code>let age: number = 18;
let price: number = 99.8;
let count: number = 10;</code></pre>

  <p>
    <code>number</code> 表示数字类型。
    整数和小数都属于 <code>number</code>。
  </p>

  <pre><code>let score: number = 95;

score = 100;  // 正确：100 是数字
score = 88.5; // 正确：88.5 也是数字

score = "优秀"; // 错误：不能把字符串赋值给 number 类型的变量</code></pre>

  <p>
    注意：
    TypeScript 中通常使用小写的 <code>number</code>，
    不建议写成大写的 <code>Number</code>。
  </p>

  <hr>

  <h2>五、布尔类型 boolean</h2>

  <p>
    如果一个变量只表示“是或否”“真或假”，可以标注为 <code>boolean</code>。
  </p>

  <pre><code>let isLogin: boolean = true;
let isStudent: boolean = false;
let isFinished: boolean = true;</code></pre>

  <p>
    <code>boolean</code> 表示布尔类型。
    布尔类型只有两个常见值：
    <code>true</code> 和 <code>false</code>。
  </p>

  <pre><code>let isLogin: boolean = false;

isLogin = true;  // 正确
isLogin = false; // 正确

isLogin = "yes"; // 错误：不能把字符串赋值给 boolean 类型的变量
isLogin = 1;     // 错误：不能把数字赋值给 boolean 类型的变量</code></pre>

  <p>
    注意：
    TypeScript 中通常使用小写的 <code>boolean</code>，
    不建议写成大写的 <code>Boolean</code>。
  </p>

  <hr>

  <h2>六、先声明变量，再赋值时的类型标注</h2>

  <p>
    有时候，我们会先声明变量，后面再赋值。
    这种情况下，类型标注就很有用。
  </p>

  <pre><code>let username: string;

username = "jack"; // 正确

username = 100;    // 错误：username 已经被标注为 string</code></pre>

  <p>
    上面代码中，声明变量时还没有立即赋值：
  </p>

  <pre><code>let username: string;</code></pre>

  <p>
    这行代码表示：
    先声明一个变量 <code>username</code>，
    并且规定它以后只能保存字符串。
  </p>

  <p>
    再看数字类型：
  </p>

  <pre><code>let totalPrice: number;

totalPrice = 200;   // 正确
totalPrice = 99.8;  // 正确

totalPrice = "200"; // 错误："200" 是字符串，不是数字</code></pre>

  <p>
    注意：
    <code>200</code> 是数字，
    <code>"200"</code> 是字符串。
    它们看起来相似，但类型不同。
  </p>

  <hr>

  <h2>七、类型标注和类型推断</h2>

  <p>
    TypeScript 不一定每次都要求你手动写类型标注。
    如果你在声明变量时已经赋值，TypeScript 通常可以自动推断变量类型。
  </p>

  <pre><code>let username = "jack";
let age = 18;
let isStudent = true;</code></pre>

  <p>
    虽然上面没有写类型标注，但 TypeScript 可以自动推断：
  </p>

  <ol>
    <li><code>username</code> 是 <code>string</code> 类型。</li>
    <li><code>age</code> 是 <code>number</code> 类型。</li>
    <li><code>isStudent</code> 是 <code>boolean</code> 类型。</li>
  </ol>

  <p>
    所以下面的代码仍然会报错：
  </p>

  <pre><code>let username = "jack";

username = "lucy"; // 正确：仍然是字符串

username = 100;    // 错误：TypeScript 已经推断 username 是 string</code></pre>

  <p>
    这就是类型推断。
    它表示 TypeScript 可以根据初始值自动判断变量类型。
  </p>

  <p>
    当前阶段可以先记住：
  </p>

  <ol>
    <li>如果声明变量时已经赋值，很多时候可以不写类型标注。</li>
    <li>如果先声明变量，后面再赋值，建议写类型标注。</li>
  </ol>

  <hr>

  <h2>八、什么时候建议写变量类型标注</h2>

  <p>
    对初学者来说，不需要一开始就纠结所有变量都要不要写类型。
    可以先按照下面的规则理解。
  </p>

  <h3>情况一：先声明变量，后赋值，建议写类型</h3>

  <pre><code>let username: string;

username = "jack";</code></pre>

  <p>
    因为声明时没有初始值，
    TypeScript 不容易根据初始值推断类型，
    所以建议手动写类型标注。
  </p>

  <h3>情况二：变量含义很重要时，可以写类型</h3>

  <pre><code>let totalPrice: number = 199.8;
let isLogin: boolean = false;</code></pre>

  <p>
    这些变量含义比较明确，写上类型标注后，代码更容易阅读。
  </p>

  <h3>情况三：变量初始化值已经很明确，可以不写类型</h3>

  <pre><code>let username = "jack";
let age = 18;
let isStudent = true;</code></pre>

  <p>
    TypeScript 可以根据初始值自动推断类型，
    所以这些简单变量可以不写类型标注。
  </p>

  <p>
    不过在学习阶段，为了看清楚语法，可以适当多写一些类型标注。
  </p>

  <hr>

  <h2>九、const 变量是否需要类型标注</h2>

  <p>
    <code>const</code> 声明的是常量。
    常量一旦赋值，后面不能重新赋值。
  </p>

  <pre><code>const username = "jack";</code></pre>

  <p>
    这行代码中，<code>username</code> 已经被赋值为字符串，
    TypeScript 可以自动知道它是字符串相关的值。
  </p>

  <p>
    所以，很多简单的 <code>const</code> 变量不需要手动写类型标注。
  </p>

  <pre><code>const username = "jack";
const age = 18;
const isStudent = true;</code></pre>

  <p>
    当然，也可以写类型标注：
  </p>

  <pre><code>const username: string = "jack";
const age: number = 18;
const isStudent: boolean = true;</code></pre>

  <p>
    这也是正确的。
    但在实际开发中，如果 <code>const</code> 的初始值很清楚，通常可以省略类型标注。
  </p>

  <hr>

  <h2>十、常见错误写法</h2>

  <p>
    下面列出一些初学者容易写错的地方。
  </p>

  <h3>错误一：类型和赋值不一致</h3>

  <pre><code>let age: number = "18";</code></pre>

  <p>
    错误原因：
    <code>age</code> 被标注为 <code>number</code>，
    但是 <code>"18"</code> 是字符串。
  </p>

  <p>
    正确写法：
  </p>

  <pre><code>let age: number = 18;</code></pre>

  <h3>错误二：把类型名写成大写</h3>

  <pre><code>let username: String = "jack";
let age: Number = 18;
let isStudent: Boolean = true;</code></pre>

  <p>
    上面写法不适合初学阶段使用。
    在变量类型标注中，通常应该使用小写：
  </p>

  <pre><code>let username: string = "jack";
let age: number = 18;
let isStudent: boolean = true;</code></pre>

  <h3>错误三：把字符串数字当成 number</h3>

  <pre><code>let price: number = "99.8";</code></pre>

  <p>
    错误原因：
    <code>"99.8"</code> 带引号，是字符串，不是数字。
  </p>

  <p>
    正确写法：
  </p>

  <pre><code>let price: number = 99.8;</code></pre>

  <hr>

  <h2>十一、完整小示例</h2>

  <p>
    下面是一段简单的 TypeScript 代码，用来综合演示变量的类型标注。
  </p>

  <pre><code>// 用户名：字符串类型
let username: string = "jack";

// 年龄：数字类型
let age: number = 18;

// 是否已经登录：布尔类型
let isLogin: boolean = false;

// 商品价格：数字类型
let price: number = 99.8;

// 修改变量时，必须保持类型一致
username = "lucy"; // 正确
age = 20;          // 正确
isLogin = true;    // 正确
price = 120.5;     // 正确

// 以下写法都是错误示例
// username = 100;
// age = "20";
// isLogin = "yes";
// price = "120.5";</code></pre>

  <p>
    这段代码体现了一个核心规则：
    <strong>变量被标注为什么类型，后续赋值时就应该继续保持这个类型。</strong>
  </p>

  <hr>

  <h2>十二、本节总结</h2>

  <p>
    本节学习了 TypeScript 变量的类型标注。
  </p>

  <ol>
    <li>浏览器不能直接运行 TypeScript 代码。</li>
    <li>TypeScript 代码需要先转换成 JavaScript 后才能运行。</li>
    <li>当前阶段可以使用 TypeScript Playground 测试 TypeScript 代码。</li>
    <li>变量的类型标注用于规定变量应该保存什么类型的数据。</li>
    <li>基本语法是：<code>let 变量名: 类型 = 值;</code></li>
    <li><code>string</code> 表示字符串类型。</li>
    <li><code>number</code> 表示数字类型。</li>
    <li><code>boolean</code> 表示布尔类型。</li>
    <li>变量被标注为某种类型后，后续赋值应保持类型一致。</li>
    <li>如果声明变量时已经赋值，TypeScript 通常可以自动推断类型。</li>
    <li>如果先声明变量，后面再赋值，建议手动写类型标注。</li>
    <li>简单的 <code>const</code> 变量通常可以省略类型标注。</li>
    <li>初学阶段建议使用小写的 <code>string</code>、<code>number</code>、<code>boolean</code>。</li>
  </ol>

</body>
</html>