【TS】九天学会TS语法——2.TypeScript基本类型及变量声明
今天学习的内容是TypeScript 基本类型，包括 number, string, boolean, any, void 等，以及变量声明的方式和区别。
- 基本类型介绍
- 变量声明（var, let, const）
- 类型注解
开始学习
目录
引言
一、基本类型介绍
二、变量声明
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开发的层层迷雾。🔍
🌟 🌈 感恩您的支持与同行，愿我们的前端征途越走越远！🌈 🌟