在 TypeScript 中，变量声明与 JavaScript 类似，但增加了静态类型系统。这意味着你可以为每个变量指定一个明确的数据类型，这有助于捕获潜在的错误并在开发过程中提供更好的工具支持（如智能感知）。以下是几种常见的变量声明方式：
变量声明
1. 使用 let 和 const
TypeScript 支持 ES6 引入的 let 和 const 关键字来声明变量。let 允许你声明可以重新赋值的变量，而 const 则用于声明不能重新赋值的常量。
let age: number = 25; // 变量，可以重新赋值
age = 26; // 合法const pi: number = 3.14159; // 常量，不可重新赋值
// pi = 3.14; // 错误：无法分配到 'pi' ，因为它是常量。
2. 类型推断
如果你初始化变量时给出了初始值，TypeScript 编译器会自动推断出该变量的类型，因此不需要显式地声明类型。
let name = "Alice"; // TypeScript 推断 name 的类型为 string
name = "Bob"; // 合法
// name = 42; // 错误：类型 'number' 不能分配给类型 'string'
3. 显式类型声明
你可以通过在变量名后面加上冒号和类型来显式地声明变量的类型。
let count: number;
count = 10; // 合法
// count = "ten"; // 错误：类型 'string' 不能分配给类型 'number'let message: string;
message = "Hello, World!";
// message = 123; // 错误：类型 'number' 不能分配给类型 'string'
4. 联合类型 (Union Types)
联合类型允许你声明一个变量可以是多种类型的其中之一。
let id: number | string;
id = 123; // 合法
id = "abc"; // 合法
// id = true; // 错误：类型 'boolean' 不是 'number | string' 的一部分
5. 类型别名 (Type Aliases)
你可以使用类型别名来创建自定义类型，这使得代码更易读且易于维护。
type ID = number | string;let userId: ID;
userId = 101; // 合法
userId = "user-101"; // 合法
6. 枚举 (Enums)
枚举是一种特殊的类型，它允许一组命名的常量。TypeScript 提供了两种枚举：数字枚举和字符串枚举。
enum Direction {Up,Down,Left,Right
}let direction: Direction = Direction.Up;
7. Any 类型
如果你不确定变量的具体类型或者想要暂时忽略类型检查，可以使用 any 类型。不过，在实际项目中应尽量避免使用 any，因为它会绕过 TypeScript 的类型系统。
let anything: any = "This can be anything";
anything = 42; // 合法
anything = { name: "John" }; // 合法
8. Unknown 类型
unknown 类型表示一个未知类型的值。与 any 不同的是，unknown 类型更加安全，因为在将其赋值给其他类型之前，必须先进行类型检查或转换。
let notSure: unknown = 4;
notSure = "maybe a string instead";if (typeof notSure === "string") {console.log(notSure.toUpperCase()); // 安全操作
}
9. Void 类型
void 类型通常用于函数返回值，表示函数不返回任何值。
function warnUser(): void {console.log("This function does not return a value");
}
10. Never 类型
never 类型表示那些永远不会发生的情况，例如总是抛出异常的函数或永不结束的循环。
function error(message: string): never {throw new Error(message);
}
总结
TypeScript 的变量声明不仅限于上述内容，还包括接口、类等高级特性。了解并熟练掌握这些基本概念对于编写高效、可维护的 TypeScript 代码至关重要。随着你的经验增长，你会逐渐探索更多复杂的类型定义和模式。
类型断言（Type Assertion）
TypeScript 的类型断言（Type Assertion）允许你在特定情况下告诉编译器某个表达式的类型，从而覆盖其默认的类型推断。这在你比编译器更了解代码运行时的具体类型时非常有用。类型断言不会改变实际的 JavaScript 代码，它们只影响 TypeScript 编译器的行为。
类型断言的形式
有两种方式可以进行类型断言：
- 尖括号语法：类似于 JSX 中的元素标签形式。
as关键字：更直观，尤其适用于 JSX 或 React 环境。
示例
let someValue: any = "this is a string";// 使用尖括号语法
let strLength1: number = (<string>someValue).length;// 使用 as 语法
let strLength2: number = (someValue as string).length;
类型断言 vs 类型转换
需要注意的是，类型断言不同于类型转换。类型断言只是告诉编译器如何解释这个值，而不会对值本身做任何修改或检查。因此，如果断言错误，可能会导致运行时错误。
let someValue: any = 42;
let strLength: number = (someValue as string).length; // 运行时会报错，因为 42 不是字符串
断言为 any 类型
有时你会想要暂时绕过 TypeScript 的类型系统，这时可以将变量断言为 any 类型：
let value: unknown = "Hello";
let message: string = (value as any) as string;
不过，这样做通常不是最佳实践，因为它降低了类型安全性和代码的可维护性。
断言为更具体的类型
当你有一个父类和子类关系，或者接口继承关系时，你可以使用类型断言来告诉编译器一个对象实际上是更具体的子类型：
interface Animal {name: string;
}interface Dog extends Animal {breed: string;
}function printDog(dog: Dog) {console.log(`${dog.name} is a ${dog.breed}`);
}let myPet: Animal = { name: "Buddy" };
printDog(myPet as Dog); // 可能会在运行时抛出错误，因为 myPet 实际上没有 'breed' 属性
使用场景
类型断言适用于以下几种常见情况：
-
DOM 操作：当与 DOM 元素交互时，类型断言可以帮助你明确指出元素的具体类型。
const inputElement = document.getElementById('myInput') as HTMLInputElement; inputElement.value = 'Hello'; -
联合类型的缩小：当你有一个联合类型并且你知道某个条件成立后，该值必定属于其中一种类型时。
function getLength(input: string | number): number {if ((<string>input).length) { // 如果输入是字符串，则返回其长度return (input as string).length;} else {return input.toString().length; // 否则转换为字符串并返回其长度} } -
第三方库：当你使用某些没有类型定义的第三方库时，可能需要使用类型断言来指定预期的类型。
总之，类型断言是 TypeScript 提供的一种灵活机制，但应该谨慎使用，确保不会引入潜在的运行时错误。在大多数情况下，尽量依赖 TypeScript 的类型推断和类型保护功能来保证代码的安全性和可靠性。
类型推断
TypeScript 的类型推断（Type Inference）是编译器自动识别变量、函数返回值等表达式的类型的机制。它使得开发者无需在每个地方都显式地声明类型，提高了代码的简洁性和可读性。然而，在某些情况下，明确指定类型仍然是必要的或有益的，以确保代码的行为符合预期。
类型推断的基本规则
-
变量声明时的初始化：当一个变量被声明并同时赋初值时，TypeScript 编译器会根据初始值来推断该变量的类型。
let message = "Hello, TypeScript!"; // TypeScript 推断 message 是 string 类型 -
函数参数和返回值：如果函数体内的逻辑足够清晰，TypeScript 可以推断出参数类型和返回值类型。
function add(a, b) {return a + b; } // TypeScript 可能无法正确推断参数类型，因此最好显式声明类型： function add(a: number, b: number): number {return a + b; } -
对象字面量：当你创建一个对象字面量时，TypeScript 会根据其属性及其值的类型来推断整个对象的类型。
const point = { x: 0, y: 0 }; // TypeScript 推断 point 的类型为 { x: number; y: number } -
数组字面量：类似地，当你定义一个数组时，TypeScript 会基于数组元素的类型进行推断。
const numbers = [1, 2, 3]; // TypeScript 推断 numbers 的类型为 number[] -
上下文类型：有时 TypeScript 能够从使用位置推断出表达式的类型，这被称为“上下文类型”。例如，在回调函数中：
window.addEventListener("click", function(event) {console.log(event.clientX); }); // TypeScript 可以推断 event 参数的类型为 MouseEvent -
最佳通用类型：当有多个候选类型时，TypeScript 尝试找到一个可以适配所有情况的最佳通用类型。例如，在联合类型的情况下：
let value = Math.random() < 0.5 ? 10 : "hello"; // TypeScript 推断 value 的类型为 number | string -
控制流分析：TypeScript 还可以根据条件语句等控制结构来缩小类型范围，即所谓的“控制流类型细化”。
function printId(id: number | string) {if (typeof id === "string") {console.log(id.toUpperCase());// 在这个块内，id 的类型被细化为 string} else {console.log(id);// 在这里，id 的类型被细化为 number} }
类型推断的影响
- 提高开发效率：减少了手动添加类型注解的需求，使代码编写更加流畅。
- 保持灵活性：允许开发者在需要时选择是否要显式声明类型。
- 潜在风险：过度依赖类型推断可能导致某些复杂场景下的类型不明确，从而引发难以调试的问题。因此，在关键的地方还是应该适当添加类型注解以增强代码的安全性和可维护性。
总之，TypeScript 的类型推断是一个强大而便捷的功能，它能在很多情况下为你节省时间和精力。但请记住，在涉及到复杂的业务逻辑或者外部接口交互时，适当的类型声明仍然是保证代码质量的重要手段。
变量作用域
TypeScript 中的变量作用域决定了变量在代码中的哪些部分是可访问的。理解变量的作用域对于编写清晰、无误的代码至关重要。TypeScript 继承了 JavaScript 的作用域规则，并且通过静态类型系统增强了其功能。以下是 TypeScript 中变量作用域的主要概念：
1. 全局作用域（Global Scope）
全局作用域是指定义在所有函数和块外部的变量，这些变量在整个程序中都是可访问的。
let globalVar = "I'm global";function printGlobal() {console.log(globalVar); // 可以访问全局变量
}printGlobal();
2. 函数作用域（Function Scope）
函数作用域意味着变量仅在定义它的函数内部可见。当一个变量在函数内声明时，它不会影响到函数外部。
function printLocal() {let localVar = "I'm local";console.log(localVar);
}printLocal();
// console.log(localVar); // 错误：localVar 不在作用域中
3. 块作用域（Block Scope）
ES6 引入了 let 和 const 关键字，它们提供了块级作用域。这意味着变量只在定义它的 {} 大括号内有效，包括循环、条件语句等。
if (true) {let blockScopedVar = "I'm block scoped";console.log(blockScopedVar); // 输出: I'm block scoped
}// console.log(blockScopedVar); // 错误：blockScopedVar 不在作用域中
4. 函数参数
函数的参数也具有局部作用域，只能在函数体内访问。
function greet(name: string) {console.log(`Hello, ${name}!`);
}greet("Alice");
// console.log(name); // 错误：name 不在作用域中
5. 词法作用域（Lexical Scope）
JavaScript 使用词法作用域，也称为静态作用域。这意味着子函数可以访问父函数中的变量，即使是在父函数返回后。这种关系是在编译阶段确定的，而不是在运行时。
function outer() {let outerVar = "I'm from outer function";function inner() {console.log(outerVar); // 可以访问外层函数的变量}return inner;
}const myInnerFunc = outer();
myInnerFunc(); // 输出: I'm from outer function
6. 变量提升（Hoisting）
使用 var 关键字声明的变量会受到变量提升的影响，即它们会在代码执行前被“移动”到其作用域的顶部。然而，let 和 const 不会被提升，因此在声明之前尝试访问它们会导致引用错误。
console.log(varExample); // undefined
var varExample = "hoisted";// 下面的代码会导致 ReferenceError
// console.log(letExample);
let letExample = "not hoisted";
7. 模块作用域（Module Scope）
在 TypeScript 中，每个文件通常被视为一个模块。如果一个变量是在模块内部声明的，那么它默认情况下是私有的，只有在同一模块内的其他代码才能访问它。要使变量或函数对外部模块可见，必须使用 export 关键字。
// fileA.ts
export let moduleScopedVar = "I'm module scoped";// fileB.ts
import { moduleScopedVar } from './fileA';
console.log(moduleScopedVar); // 输出: I'm module scoped
总结
了解 TypeScript 中的不同作用域可以帮助你更好地组织代码，避免不必要的命名冲突，并提高代码的安全性和可维护性。尽量使用 let 和 const 来声明变量，因为它们提供了更严格的块级作用域，有助于减少意外错误的发生。
