前言

typeScript 是 JavaScript 的一个超集，由微软开发并开源。它在 JavaScript 的基础上增加了静态类型系统，让开发者能够在编写代码时定义变量、函数参数和返回值的类型。随着前端项目规模越来越大，JavaScript 动态类型带来的维护成本急剧上升，TypeScript 应运而生。

无论你是刚开始学习前端，还是已经有 JavaScript 经验，掌握 TypeScript 都能显著提升代码的可靠性和可维护性。本文将带你从零开始，全面了解 TypeScript 的核心基础知识。

概念

1. 什么是typescript？

• TypeScript = Type + JavaScript。任何合法的 JavaScript 代码都是合法的 TypeScript 代码。TypeScript 文件以 .ts 或 .tsx 结尾，需要通过编译器（tsc）编译成纯 JavaScript 后再由浏览器或 Node.js 执行。

2. 为什么要用？

• 早期发现错误：在编码阶段就能捕获类型不匹配、空值调用等问题，而不是等到运行时。
• 更好的开发体验：编辑器可以提供精确的自动补全、跳转定义和重构支持。
• 自我文档化：类型声明本身就是一份可靠的文档，降低了团队协作的沟通成本。
• 适合大型项目：强类型约束让代码更容易理解、维护和扩展。

类型声明

• 类型声明是 TypeScript 最核心的语法，用于明确指定变量、函数参数、返回值等应该是什么类型。
• 基本语法：

let 变量名: 类型 = 值;

• 示例：

let name: string = "Alice";
let age: number = 30;
let isStudent: boolean = false;

• 函数参数与返回值声明：

function greet(person: string): string {
  return "Hello, " + person;
}

• 可选参数与默认值：

// 可选参数用 ? 标记
function buildName(firstName: string, lastName?: string): string {
  return lastName ? firstName + " " + lastName : firstName;
}

// 默认参数
function multiply(a: number, b: number = 1): number {
  return a * b;
}
}

类型推断

• 基本推断

let message = "Hello";  // 推断为 string
message = 123;          // 报错：不能将 number 赋给 string

• 函数返回值的推断

function add(x: number, y: number) {
  return x + y;   // 推断返回值类型为 number
}

• 什么时候需要显式声明：
  • 变量声明时不赋初值（此时会被推断为 any，不建议）
  • 函数参数（参数无法推断，必须声明或默认值）
  • 需要指定更宽泛或更精确的类型时（例如 let ids: string | number = “123”）

类型总览

• string 、 number 、 boolean 、 null 、 undefined 、 bigint 、 symbol 、 object
• 四个新类型： void 、 never 、 unknown 、 any 、 enum 、 tuple
• ⾃定义类型： type 、 interface

常用类型

1. string, number, boolean

let str: string = "hello";
let num: number = 42;       // 整数、小数、负数、NaN、Infinity 都归为 number
let bool: boolean = true;

2. 数组

let list1: number[] = [1, 2, 3];
let list2: Array<string> = ["a", "b", "c"];

3. 元组（Tuple）

• 元组表示一个固定长度且每个位置类型已知的数组。

let person: [string, number] = ["Alice", 25];
// 顺序和数量必须完全匹配
person = [25, "Alice"];  // 报错

4. 对象

// 直接注解
let user: { name: string; age: number } = {
  name: "Bob",
  age: 28,
};

// 使用接口（更推荐）
interface Person {
  name: string;
  age: number;
}
let employee: Person = { name: "Carol", age: 32 };

5. 联合类型

• 一个变量可能拥有多种类型，用 | 分隔。

let id: string | number;
id = "abc123";
id = 456;
id = true;   // 报错

function formatValue(value: string | number): string {
  return value.toString();
}

6. 类型别名

type ID = string | number;
type User = { name: string; email: string };

let uid: ID = 100;
let newUser: User = { name: "Tom", email: "tom@example.com" };

7. any 与 unknown

• any：关闭类型检查，变量可以赋任意值。尽量少用，它会破坏 TypeScript 的保护。
• unknown：比 any 安全，表示“还不知道是什么类型”。使用前必须进行类型检查。

let something: any = "hello";
something = 123;       // 不报错
something.toUpperCase(); // 运行时可能出错

let data: unknown = "world";
// data.toUpperCase();  // 报错：unknown 不能直接调用方法
if (typeof data === "string") {
  data.toUpperCase();   // 现在安全
}

8. void 与 never

• void：表示没有返回值的函数。实际上 undefined 或 null 可以赋值给 void（严格模式下只有 undefined）。
• never：表示永远不会正常返回的函数（如无限循环或抛出异常）。

function warnUser(): void {
  console.log("This is a warning");
}

function error(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {}
}

9. 函数类型

• 函数本身也是一种类型，可以描述其参数和返回值。也可以配合类型别名使用：

let myFunc: (x: number, y: number) => number;

myFunc = function (a, b) {
  return a + b;
};

type MathOp = (a: number, b: number) => number;
const multiply: MathOp = (x, y) => x * y;

10. 枚举

// 定义⼀个枚举
enum Color {
 Red,
 Blue,
 Black,
 Gold
}
// 定义⼀个枚举，并指定其初识数值
enum Color2 {
 Red = 6,
 Blue,
 Black,
 Gold
}
console.log(Color)
/*
 {
 0: 'Red',
 1: 'Blue',
 2: 'Black',
 3: 'Gold',
 Red: 0,
 Blue: 1,
 Black: 2,
 Gold: 3
 }
*/
console.log(Color2)
/*
 {
 6: 'Red',
 7: 'Blue',
 8: 'Black',
 9: 'Gold',
 Red: 6,
 Blue: 7,
 Black: 8,
 Gold: 9
 }
*/
// 定义⼀个phone变量，并设置对⻬进⾏限制
let phone: {name:string,price:number,color:Color}
phone = {name:'华为Mate60',price:6500,color:Color.Red}
phone = {name:'iPhone15Pro',price:7999,color:Color.Blue}
if(phone.color === Color.Red){
 console.log('⼿机是红⾊的')
}

总结

• TypeScript 并没有改变 JavaScript 的运行规则，而是在编码阶段提供了一套强大的类型系统。通过本文，你已经掌握了：
  • 概念：TypeScript 是 JS 的超集，带来静态类型。
  • 类型声明：使用 : type 为变量、函数等标注类型。
  • 类型推断：TS 会自动推断常见情况，减少冗余代码。
  • 类型总览：包括基本类型、数组、元组、对象、any、unknown、void、never 等。
  • 常用类型实践：字符串、数字、布尔、数组、联合类型、类型别名、函数类型等。
• 这些基础知识足以让你开始在日常项目中尝试 TypeScript。下一步可以学习接口（interface）与类型别名的区别、泛型（generics）以及如何在 React/Vue 中使用 TypeScript。

记住：TypeScript 不是一门新语言，而是为你熟悉的 JavaScript 披上了一件“安全盔甲”。开始使用它，你将体验到更自信、更高效的编码过程。