【TS】九天学会TS语法——2.TypeScript基本类型及变量声明

今天学习的内容是TypeScript 基本类型，包括 number, string, boolean, any, void 等，以及变量声明的方式和区别。

1. 基本类型介绍
2. 变量声明（var, let, const）
3. 类型注解

开始学习

目录

引言

一、基本类型介绍

二、变量声明

1.概念解析

（1）作用域

（2）变量提升

2.声明变量的关键字

（1）var关键字

（2）let 关键字

（3）const关键字

三、类型注解

引言

在 TypeScript 中，基本类型是构建应用程序的基础。了解这些基本类型对于编写健壮、可维护的代码至关重要。本文将详细介绍 TypeScript 的基本类型，包括 number, string, boolean, any, void 等，并解释如何使用变量声明和类型注解。

一、基本类型介绍

TS一共有六种基本类型，分别是number、string、boolean、any、void以及undefined。

number：表示数字类型，包括整数和浮点数。

let age: number = 30;
let price: number = 19.99;

string：表示字符串类型，可以使用单引号或双引号。

let name: string = "Alice";
let sentence: string = 'I am learning TypeScript.';

boolean：表示布尔类型，只有 true 和 false 两个值。

let isStudent: boolean = true;
let hasGraduated: boolean = false;

any：表示任意类型，可以赋值为任何类型的值。

let value: any = "Hello, TypeScript!";
let otherValue: any = 42;

void：表示空类型，通常用于函数没有返回值的情况。

function greet(): void {console.log("Hello!");
}function calculate(): void {// 执行一些计算，但不返回任何值
}

undefined：表示一个变量已经被声明，但尚未被赋值。即该变量存在，但它的值未定义。

let myVariable: string;console.log(myVariable); // 输出: undefined

二、变量声明

在学习变量声明以前，有必要了解一下两个概念：作用域和变量提升。

1.概念解析

（1）作用域

作用域（Scope）是指变量、函数、类等标识符在代码中可见的范围。简单来说，作用域就是变量能被访问到的区域。TS支持几种不同的作用域类型：

• 全局作用域：在整个程序中都可以访问的变量和函数。

let globalVar = "I am global";
function globalFunction() {console.log("I am a global function");
}

• 函数作用域：在函数内部声明的变量和函数，只能在函数内部访问。

function myFunction() {let localVar = "I am local to myFunction";function localFunction() {console.log("I am a local function");}console.log(localVar); // 可以访问localFunction(); // 可以调用
}
myFunction();
// console.log(localVar); // 错误：无法访问
// localFunction(); // 错误：无法调用

• 块作用域：在代码块（如 if、for 循环或 {} 块）内部声明的变量，只能在块内部访问。

if (true) {let blockVar = "I am local to this block";console.log(blockVar); // 可以访问
}
// console.log(blockVar); // 错误：无法访问

• 模块作用域：在模块（使用 import 和 export 关键字）内部声明的变量和函数，只能在模块内部访问。

// myModule.ts
export let moduleVar = "I am in the module";
export function moduleFunction() {console.log("I am a function in the module");
}

• 类作用域：在类内部声明的变量和函数，只能在类内部访问。

class MyClass {classVar = "I am a class variable";classFunction() {console.log("I am a class function");}
}
let myClassInstance = new MyClass();
console.log(myClassInstance.classVar); // 可以访问
myClassInstance.classFunction(); // 可以调用

（2）变量提升

变量提升（Variable Hoisting）是 JavaScript 中的一种行为，它指的是在代码执行之前，JS 引擎会将所有变量的声明提升到它们所在作用域的顶部。

变量提升只适用于变量的声明，不包括变量的赋值。如果变量声明和赋值在同一行，那么赋值不会提升。

console.log(a); // 输出: undefined
var a = 10;
console.log(a); // 输出: 10

在这个例子中，变量 a 的声明被提升到代码的顶部，但赋值没有提升。因此，在第一行打印中，变量 a 已经被声明，但还没有被赋值，所以输出 undefined。

在 TS 中，变量提升的行为与 JS 类似，但 TS 提供了更严格的类型检查和作用域规则。在 TS 中，使用 let 和 const 声明的变量不会发生变量提升，它们遵循块级作用域规则，即它们只在声明它们的代码块中可用。

以 let 为例，来看看什么是块级作用域：

console.log(a); // 错误：变量 'a' 在此之前尚未声明
let a = 10;
console.log(a); // 输出: 10if (true) {let a = 20; // 新的块级作用域，不会影响外部的 aconsole.log(a); // 输出: 20
}console.log(a); // 输出: 10

2.声明变量的关键字

在 TypeScript 中，var、let 和 const 都是用来声明变量的关键字。但是现在 var 已经不推荐使用，let 和 const 是 ES6 引入的新特性，它们提供了更精确的作用域控制和变量声明方式。现在我们来看看它们的区别。

（1）var关键字

function exampleVar() {var x = 10;if (true) {var x = 20; // 重复声明，覆盖之前的值}console.log(x); // 输出: 20
}
exampleVar();

• 函数作用域：使用 var 声明的变量是函数作用域的，如果变量在函数内部声明，它只能在函数内部访问。
• 变量提升：使用 var 声明的变量会在代码执行之前被提升到其作用域的顶部。
• 可以重复声明：同一个作用域内，可以使用 var 多次声明同一个变量。

（2）let 关键字

• 块级作用域：使用 let 声明的变量是块级作用域的，它只能在声明它的代码块（如 if、for 循环等）内部访问。
• 不存在变量提升：使用 let 声明的变量不会在代码执行之前被提升。
• 不能重复声明：同一个作用域内，不能使用 let 多次声明同一个变量。

function exampleLet() {let y = 10;if (true) {let y = 20; // 新的块级作用域，不会影响外部的 yconsole.log(y); // 输出: 20}console.log(y); // 输出: 10
}
exampleLet();

（3）const关键字

• 块级作用域：与 let 类似，const 也是块级作用域的。
• 不存在变量提升：与 let 类似，const 也不会在代码执行之前被提升。
• 不能重复声明：与 let 类似，不能在同一作用域内重复声明。
• 常量：使用 const 声明的变量必须立即赋值，且其值不能被改变（对于基本类型），或者其引用不能被改变（对于对象类型）。

function exampleConst() {const z = 10;// z = 20; // 错误：不能改变 const 变量的值if (true) {const z = 20; // 新的块级作用域，不会影响外部的 zconsole.log(z); // 输出: 20}console.log(z); // 输出: 10
}
exampleConst();

三、类型注解

上文我们已经详细解释了类型注解，这里再做一个简要的说明。

点击进入上文：【TS】九天学会TS语法——1.TypeScript 是什么

类型注解是 TypeScript 的核心特性之一，它允许开发者在代码中显式地指定变量、函数参数、函数返回值等的数据类型。类型注解可以提高代码的可读性、可维护性和减少运行时错误。通过类型注解，TypeScript 编译器可以在编译时检查类型错误，从而提高代码的可靠性。

---

🚀感谢您的细心品读，完成了这篇关于【TS】九天学会TS语法——2.TS基本类型及变量声明的旅程。 🚀

🎉 您的每一个鼓励都是我不断更新的动力，不要忘记点赞收藏🎉

🔍 期待与您一同深入前端技术的海洋，共同探索那些未知的宝藏，揭开Web开发的层层迷雾。🔍

🌟 🌈 感恩您的支持与同行，愿我们的前端征途越走越远！🌈 🌟