TypeScript 基础语法

TypeScript 基础语法详解

TypeScript（TS）是 JavaScript（JS）的超集，所有合法的 JavaScript 代码都是合法的 TypeScript 代码。TS 在 JS 基础上主要增加了静态类型系统，其他语法几乎与现代 JS（ES6+）一致。下面从基础语法入手，逐步介绍 TS 独有或增强的部分。

1. 基本类型（Primitive Types）

TS 支持 JS 的所有原始类型，并要求显式或隐式指定类型。

let isDone: boolean = false;

let age: number = 30;          // 包括整数、浮点数、BigInt（如 100n）
let binary: number = 0b1010;   // 二进制
let octal: number = 0o744;     // 八进制
let hex: number = 0xf00d;      // 十六进制

let username: string = "Alice";
let sentence: string = `Hello, ${username}!`;  // 模板字符串

let undefinedValue: undefined = undefined;
let nullValue: null = null;

let sym: symbol = Symbol("unique");

2. 数组和元组（Array & Tuple）

// 数组：两种写法等价
let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];  // 泛型写法

// 元组：固定长度、固定类型的数组
let tuple: [string, number] = ["hello", 10];
// tuple[2] = 100;  // 错误：长度固定

3. any、unknown、never、void

let anything: any = 4;
anything = "string";     // any 可以赋值为任何类型，几乎关闭类型检查

let unsure: unknown = 4;
// unsure.toFixed();     // 错误：需先类型检查
if (typeof unsure === "number") {
  unsure.toFixed();
}

function error(msg: string): never {
  throw new Error(msg);  // never 表示永远不会正常返回
}

function log(): void {
  console.log("no return");
}

4. 对象类型：接口（interface）和类型别名（type）

// 接口（推荐用于定义对象形状）
interface Person {
  name: string;
  age?: number;          // 可选属性
  readonly id: number;   // 只读属性
  [prop: string]: any;   // 索引签名：允许任意额外属性
}

let user: Person = {
  name: "Bob",
  age: 25,
  id: 1,
  extra: "anything"
};
// user.id = 2;  // 错误：只读

// 类型别名（更灵活，可用于联合类型等）
type ID = string | number;
let userId: ID = 123;
userId = "abc";

5. 函数语法

// 函数声明
function add(x: number, y: number): number {
  return x + y;
}

// 函数表达式
const subtract: (a: number, b: number) => number = (a, b) => a - b;

// 可选参数和默认参数
function greet(name: string, greeting?: string): string {
  return `${greeting ?? "Hi"} ${name}`;
}
greet("Alice");           // OK
greet("Alice", "Hello");

// 剩余参数
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

6. 联合类型（Union）和类型守卫（Type Guards）

let id: string | number = 123;
id = "abc";

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());  // 类型守卫：TS 知道这里是 string
  } else {
    console.log(id.toFixed());
  }
}

7. 类型断言（Type Assertion）

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

// 另一种写法（React 中常用）
let strLength2: number = (<string>someValue).length;

8. 字面量类型（Literal Types）

type Direction = "up" | "down" | "left" | "right";
let dir: Direction = "up";  // 只能是这四个值之一

type YesOrNo = true | false;
type Zero = 0;

9. 枚举（Enums）

enum Color {
  Red,    // 默认 0
  Green = 2,
  Blue    // 3
}

let c: Color = Color.Green;
console.log(Color[2]);  // "Green"（反向映射）

10. 基本配置（tsconfig.json 常用选项）

新手常用严格模式配置片段：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,              // 开启所有严格检查
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

小结：入门建议

1. 从普通 JS 项目逐步添加 .ts 或 .tsx 文件。
2. 开启 strict 模式，强制养成良好类型习惯。
3. 多用类型推断，减少不必要的显式注解。
4. 学会阅读编译错误信息，这是提升最快的途径。

如果您想看某个部分的完整示例代码（如类、泛型入门、异步函数等），或者想练习一个小型 TS 项目，请告诉我！