TypeScript 基础语法

TypeScript 基础语法总结

TypeScript 是 JavaScript 的超集，核心增强是静态类型系统，以下是其基础语法的系统总结：

一、环境准备

• 安装：npm install -g typescript（全局安装 TypeScript 编译器）

• 编译：tsc 文件名.ts（将 TS 编译为 JS，默认生成同名 JS 文件）

• 配置：通过 tsconfig.json 配置编译规则（如目标 JS 版本、模块规范等）

二、基本类型（核心）

TypeScript 扩展了 JS 的类型，支持显式类型注解，语法为 变量名: 类型。

类型	说明	示例
number	数字（整数、浮点数、NaN、Infinity）	let age: number = 20
string	字符串（单引号、双引号、模板字符串）	let name: string = Tom${age}``
boolean	布尔值（true/false）	let isDone: boolean = false
null/undefined	空值 / 未定义（默认是所有类型的子类型）	let n: null = null
void	表示函数无返回值（或返回 undefined）	function log(): void { console.log(1) }
any	任意类型（关闭类型检查，等同于原生 JS）	let value: any = 'hello'; value = 123
unknown	未知类型（比 any 更安全，使用前必须断言类型）	let u: unknown = 'hi'; (u as string).length
never	表示函数永不返回（如抛出错误、无限循环）	function error(): never { throw new Error() }
object	非原始类型（对象、数组、函数等）	let obj: object = { name: 'Tom' }
数组	两种写法：类型[] 或 Array<类型>	let nums: number[] = [1,2,3] 或 Array<number>
元组（Tuple）	固定长度和类型的数组（越界元素会被类型推断为联合类型）	let tuple: [string, number] = ['a', 1]
枚举（Enum）	定义命名常量集合（默认从 0 开始，可手动赋值）	enum Direction { Up, Down = 2, Left, Right }（Up=0，Left=3）

三、变量声明

• 语法：let/const/var 变量名[: 类型] = 值

• 类型推断：声明时赋值，TS 会自动推断类型（可省略注解）

  例：let num = 10（自动推断为 number 类型）

四、函数

核心是参数类型和返回值类型注解。

1. 基本语法

// 函数声明

function add(a: number, b: number): number {

  return a + b;

}

// 函数表达式

const multiply = (x: number, y: number): number => x \* y;

2. 特殊参数

• 可选参数：参数名?（必须在必选参数后）

  function greet(name?: string): string { return name || 'Guest' }

• 默认参数：参数名: 类型 = 默认值（自动推断为可选）

  function greet(name: string = 'Guest'): string { ... }

• 剩余参数：...参数名: 类型[]（收集剩余参数为数组）

  function sum(...nums: number[]): number { return nums.reduce((a,b)=>a+b, 0) }

五、接口（Interface）

用于定义对象 / 函数的类型结构，支持扩展和合并。

1. 基本用法（对象类型）

interface Person {

  name: string;       // 必选属性

  age?: number;       // 可选属性（?）

  readonly id: number; // 只读属性（初始化后不可修改）

}

// 实现接口（必须匹配结构）

const p: Person = { name: 'Tom', id: 1 };

p.id = 2; // 报错（只读属性）

2. 函数类型接口

interface SearchFunc {

  (source: string, keyword: string): boolean; // 入参和返回值类型

}

const search: SearchFunc = (s, k) => s.includes(k);

3. 接口继承

interface Student extends Person {

  grade: number; // 继承 Person 的属性，新增 grade

}

六、类型别名（Type）

与接口类似，但更灵活（可定义基本类型、联合类型等）。

// 基本类型别名

type Age = number;

let a: Age = 20;

// 联合类型（多种类型可选）

type StringOrNumber = string | number;

let val: StringOrNumber = '123' || 123;

// 交叉类型（合并多种类型）

type A = { a: number };

type B = { b: string };

type C = A & B; // { a: number; b: string }

接口 vs 类型别名：

• 接口可多次声明合并（interface A { x: number }; interface A { y: number } 合并为 {x,y}）

• 类型别名不可合并，更适合定义联合 / 交叉类型。

七、类型断言（Type Assertion）

手动指定变量类型（告诉 TS “我知道类型更具体”），两种语法：

// 方式1：值 as 类型（推荐，JSX 中唯一支持）

const strLength = (val: string | number): number => {

  return (val as string).length || val.toString().length;

};

// 方式2：<类型>值（不推荐，与 JSX 冲突）

const len = \<string>val.length;

八、类型守卫（Type Guard）

在联合类型中缩小类型范围，常用方式：

1. typeof：判断基本类型（string/number/boolean/symbol）

   if (typeof val === 'string') { ... }

2. instanceof：判断对象类型（如 Date/Array）

   if (val instanceof Date) { val.getFullYear() }

3. in：判断对象是否有某个属性

   if ('name' in val) { ... }

4. 自定义类型守卫：返回 x is 类型 的函数

function isString(x: unknown): x is string {

  return typeof x === 'string';

}

if (isString(val)) { val.length } // 自动推断为 string

九、类（Class）

TS 增强了类的类型控制，支持访问修饰符、抽象类等。

1. 基本语法（属性类型注解）

class Person {

  name: string; // 实例属性（需类型注解）

  age: number;

  constructor(name: string, age: number) {

    this.name = name;

    this.age = age;

  }

  sayHi(): string { // 方法返回值类型

    return \`Hi, \${this.name}\`;

  }

}

2. 访问修饰符

• public：默认，任意位置可访问

• private：仅类内部可访问（子类不可）

• protected：类内部和子类可访问

• readonly：属性只读（初始化后不可修改）

class Student extends Person {

  private grade: number; // 仅 Student 内部可访问

  protected id: number;  // Student 和其子类可访问

  constructor(name: string, age: number, grade: number) {

    super(name, age); // 调用父类构造函数

    this.grade = grade;

    this.id = 1;

  }

}

3. 抽象类（Abstract Class）

• 不能实例化，仅用于继承

• 抽象方法必须在子类中实现

abstract class Animal {

  abstract makeSound(): void; // 抽象方法（无实现）

}

class Dog extends Animal {

  makeSound(): void { // 必须实现抽象方法

    console.log('Woof');

  }

}

十、泛型（Generics）

创建可复用的类型组件，支持多种类型（类似 “类型参数”）。

1. 泛型函数

// 定义：\<T> 为类型参数（约定用大写字母，如 T/U/V）

function identity\<T>(arg: T): T {

&#x20; return arg; // 输入和输出类型一致

}

// 调用（自动推断或显式指定）

identity(123); // 推断 T 为 number

identity\<string>('hello'); // 显式指定 T 为 string

2. 泛型约束（限制类型范围）

// 约束 T 必须有 length 属性

function getLength\<T extends { length: number }>(arg: T): number {

&#x20; return arg.length;

}

getLength('abc'); // 正确（string 有 length）

getLength(123); // 报错（number 无 length）

3. 泛型接口 / 类

// 泛型接口

interface Container\<T> {

&#x20; value: T;

}

const c: Container\<number> = { value: 10 };

// 泛型类

class Box\<T> {

&#x20; content: T;

&#x20; constructor(content: T) {

&#x20;   this.content = content;

&#x20; }

}

const box = new Box\<string>('apple');

十一、模块（Module）

与 ES6 模块一致，用 import/export 管理代码：

// 导出（module.ts）

export const name = 'TS';

export function add(a: number, b: number): number { return a + b; }

// 导入（main.ts）

import { name, add } from './module';

console.log(name); // 'TS'

总结

TypeScript 的核心是类型系统，通过静态类型检查提前规避错误。基础语法围绕 “类型定义” 展开，包括：基本类型、接口 / 类型别名、函数 / 类的类型约束、泛型等。掌握这些后，可进一步学习高级特性（如映射类型、条件类型等）。