Skip to content
🔥 更新时间:

TypeScript 基础

在开始类型体操之前,我们需要先掌握 TypeScript 的基本类型系统概念。这些是构建复杂类型的基础。

基本类型

TypeScript 包含以下基本类型:

typescript
// 基本类型
let num: number = 123;
let str: string = "hello";
let bool: boolean = true;
let u: undefined = undefined;
let n: null = null;
let obj: object = { x: 1 };
let big: bigint = 100n;
let sym: symbol = Symbol("sym");

数组与元组

typescript
// 数组
let arr1: number[] = [1, 2, 3];
let arr2: Array<number> = [1, 2, 3];

// 元组:长度固定且每个位置有特定类型的数组
let tuple: [string, number] = ["hello", 10];

对象和接口

typescript
// 接口定义对象结构
interface User {
  name: string;
  age: number;
  email?: string; // 可选属性
  readonly id: number; // 只读属性
}

const user: User = {
  name: "Alice",
  age: 25,
  id: 1
};

联合类型与交叉类型

typescript
// 联合类型
type ID = string | number;
let id: ID = 123; // 可以是字符串或数字

// 交叉类型
type Employee = {
  id: number;
  name: string;
};

type Department = {
  deptId: number;
  location: string;
};

type EmployeeWithDept = Employee & Department;

类型别名

typescript
// 类型别名用 type 关键字定义
type Point = {
  x: number;
  y: number;
};

// 可以用于简化复杂类型
type UserID = string | number;
type UserCallback = (id: UserID) => void;

枚举

typescript
// 枚举定义一组命名常量
enum Direction {
  Up,
  Down,
  Left,
  Right
}

let dir: Direction = Direction.Up;

函数类型

typescript
// 函数类型定义
function add(a: number, b: number): number {
  return a + b;
}

// 函数类型表达式
type MathFunc = (a: number, b: number) => number;
const multiply: MathFunc = (x, y) => x * y;

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

字面量类型

typescript
// 字面量类型:只能是特定的值
type Direction = "up" | "down" | "left" | "right";
let move: Direction = "up"; // 只能是这四个值之一

// 数字字面量类型
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
let roll: DiceRoll = 3;

类型断言

typescript
// 类型断言:告诉编译器一个值的类型
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
// 或
let strLength2: number = (<string>someValue).length; // 旧语法,JSX 中不能使用

非空断言

typescript
// 非空断言运算符 !
function getValue(x: string | null | undefined): string {
  // 断言 x 不为 null 或 undefined
  return x!.toUpperCase();
}

类型推断

TypeScript 可以根据上下文自动推断类型:

typescript
// 变量初始化时的类型推断
let x = 3; // 推断为 number

// 函数返回值的类型推断
function getLength(s: string) {
  return s.length; // 返回值推断为 number
}

never 和 unknown 类型

typescript
// never 类型:永不返回(抛出异常或无限循环)
function throwError(message: string): never {
  throw new Error(message);
}

// unknown 类型:类型安全的 any
let value: unknown;
value = 123;
value = "hello";

// 必须进行类型检查或类型断言才能使用特定类型的方法
if (typeof value === "string") {
  console.log(value.toUpperCase());
}

keyof 操作符

typescript
// keyof 获取对象类型的所有键的联合类型
interface Person {
  name: string;
  age: number;
  location: string;
}

type PersonKeys = keyof Person; // "name" | "age" | "location"

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

泛型

typescript
// 泛型:可重用的类型参数
function identity<T>(arg: T): T {
  return arg;
}

// 调用方式
let output1 = identity<string>("myString");
let output2 = identity("myString"); // 类型推断

// 泛型接口
interface Box<T> {
  value: T;
}

let box: Box<number> = { value: 123 };

掌握这些基础概念后,我们就可以进入更高级的类型操作了。

Contributors

The avatar of contributor named as fengzebing fengzebing

Changelog

本站访客数 人次 本站总访问量