TypeScript 完整入门教程

一、环境搭建

1. 安装 TypeScript

复制代码

# 全局安装
npm install -g typescript
# 查看版本验证安装
tsc -v

2. 运行 TS 文件

创建 demo.ts 写入代码
编译 TS 生成 JS：

tsc demo.ts

会生成 demo.js，用 node 运行：node demo.js

3. 自动编译（开发必备）

复制代码

tsc demo.ts --watch

文件保存自动重新编译。

4. 项目配置 tsconfig.json

根目录执行生成配置文件：

复制代码

tsc --init

常用配置：

json

复制代码

{
  "compilerOptions": {
    "target": "ES6", // 编译后的JS版本
    "module": "CommonJS",
    "outDir": "./dist", // 输出目录
    "rootDir": "./src", // 源码目录
    "strict": true, // 开启严格类型检查（必开）
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

二、基础数据类型

1. 原始类型

typescript

复制代码

// 字符串
let str: string = "TypeScript";
// 数字
let num: number = 99;
let float: number = 3.14;
// 布尔值
let flag: boolean = true;
// null / undefined
let n: null = null;
let u: undefined = undefined;

2. 数组

typescript

复制代码

// 写法1：类型[]
let arr1: number[] = [1, 2, 3];
// 写法2：泛型 Array<类型>
let arr2: Array<string> = ["a", "b"];

3. 元组 Tuple

固定长度、固定类型的数组

typescript

复制代码

let tuple: [string, number] = ["张三", 20];
tuple[0] = "李四";

4. any / unknown

any：关闭类型检查，不推荐滥用

typescript

复制代码

let data: any = 123;
data = "文字";
data.foo(); // 不会报错，运行时可能崩溃

unknown：安全的任意类型，使用前必须类型判断

typescript

复制代码

let val: unknown = "hello";
if (typeof val === "string") {
  console.log(val.length);
}

5. void / never

void：无返回值

typescript

复制代码

function log(): void {
  console.log("日志");
}

never：永远不会正常返回（报错 / 死循环）

typescript

复制代码

function error(): never {
  throw new Error("程序异常");
}

三、类型进阶

1. 联合类型 |

一个变量支持多种类型

typescript

复制代码

let id: number | string;
id = 100;
id = "1001";

// 字面量联合（限定固定值）
type Status = "success" | "fail" | "loading";
let res: Status = "success";

2. 交叉类型 &

合并多个类型，同时满足所有规则

typescript

复制代码

type A = { name: string };
type B = { age: number };
type User = A & B;
const u: User = { name: "小明", age: 18 };

3. 类型别名 type

复用自定义类型

typescript

复制代码

type NumStr = number | string;
let a: NumStr = 66;

4. 接口 interface

约束对象结构，可继承、可扩展

typescript

复制代码

interface User {
  id: number;
  name: string;
  age?: number; // 可选属性
  readonly createTime: number; // 只读属性
}

const user: User = {
  id: 1,
  name: "小红",
  createTime: Date.now()
};

接口继承

typescript

复制代码

interface Person {
  name: string;
}
interface Student extends Person {
  studentId: number;
}

5. 枚举 Enum

固定一组常量，提高可读性

typescript

复制代码

enum Color {
  Red, // 默认 0
  Green, // 1
  Blue // 2
}
let c: Color = Color.Red;

// 自定义数值
enum Status {
  Off = 0,
  On = 1
}

四、函数类型

1. 基础函数类型标注

typescript

复制代码

// 参数类型 + 返回值类型
function add(a: number, b: number): number {
  return a + b;
}

// 箭头函数
const sub = (a: number, b: number): number => a - b;

2. 可选参数 / 默认参数

typescript

复制代码

// 可选参数
function sayHi(name?: string) {
  console.log(name || "游客");
}
// 默认参数
function logNum(n: number = 0) {
  console.log(n);
}

3. 剩余参数

typescript

复制代码

function sum(base: number, ...nums: number[]): number {
  return base + nums.reduce((a, b) => a + b, 0);
}
sum(10, 1, 2, 3);

4. 函数类型别名

typescript

复制代码

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

五、泛型 Generic

泛型实现类型复用，组件、工具函数适配任意类型

1. 基础泛型函数

typescript

复制代码

// <T> 代表任意类型
function getFirst<T>(arr: T[]): T {
  return arr[0];
}
// 调用自动推导类型
getFirst([1, 2, 3]);
getFirst(["a", "b"]);

2. 泛型约束 extends

限制泛型必须包含指定属性

typescript

复制代码

interface HasName {
  name: string;
}
function printName<T extends HasName>(obj: T) {
  console.log(obj.name);
}
printName({ name: "小王", age: 22 });

3. 泛型接口

typescript

复制代码

interface Response<T> {
  code: number;
  data: T;
}
// 用户接口返回
type UserItem = { id: number; name: string };
const res: Response<UserItem> = {
  code: 200,
  data: { id: 1, name: "张三" }
};

六、类 Class（面向对象）

1. 基础类 + 访问修饰符

typescript

复制代码

class Person {
  // public 公开（默认）
  public name: string;
  // private 私有，外部无法访问
  private age: number;
  // protected 保护，子类可访问，外部不行
  protected gender: string;

  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

  say(): void {
    console.log(`我是${this.name}，${this.age}岁`);
  }
}

const p = new Person("小李", 25, "男");
p.say();

2. 类继承 extends

typescript

复制代码

class Student extends Person {
  studentId: number;
  constructor(name: string, age: number, gender: string, id: number) {
    super(name, age, gender); // 调用父类构造器
    this.studentId = id;
  }
  study() {
    console.log(`${this.name}正在学习`);
  }
}

七、常用实用语法

1. 类型断言 as

手动指定变量类型

typescript

复制代码

let strVal: unknown = "hello ts";
let len: number = (strVal as string).length;

2. 可选链操作符？.

防止对象不存在属性报错

typescript

复制代码

interface User {
  info?: {
    address?: string
  }
}
const user: User = {};
console.log(user.info?.address);

3. 空值合并？？

只有 null /undefined 才取默认值

typescript

复制代码

let num: number | null = null;
let val = num ?? 0;

八、拓展方向（后续学习）

类型体操：高级工具类型（Partial、Required、Readonly、Pick、Omit）
Vue3 + TS：组合式 API、组件 props 类型、defineProps/defineEmits
React + TS：组件 Props、useState、useEffect、事件类型
Node.js + TS：接口服务、Express/Koa 类型封装