TypeScript类实例属性访问问题：两段链表代码差异解析

第一段TypeScript链表代码可正常运行：

class ListNode<T> {
  data: T | null;
  next: ListNode<T> | null;

  constructor(val?: T, next?: ListNode<T>) {
    this.data = val ? val : null;
    this.next = next ? next : null;
  }
}

class LinkedList {
  head: ListNode<string> | null;
  currentSize: number = 0;

  constructor(head?: ListNode<string>) {
    this.head = head ? head : null;
  }

  addFirst(val: string) {
    const node: ListNode<string> = new ListNode(val);
    node.next = this.head;
    this.head = node;
    this.currentSize += 1
  }
}
const myList = new LinkedList();
myList.addFirst("foo");

但第二段代码在TypeScript中报错Property 'next' does not exist on type 'ListNode'. ts(2339)，转成JavaScript后却能运行：

class ListNode<T> {
  data: T | null;
  next: ListNode<T> | null;

  constructor(val?: T, next?: ListNode<T>) {
    this.data = val ? val : null;
    this.next = next ? next : null;
  }
}

class LinkedList<ListNode> {
  head: ListNode | null;
  currentSize: number = 0;

  constructor(head?: ListNode) {
    this.head = head ? head : null;
  }

  addFirst(newNode: ListNode) {
    // Property 'next' does not exist on type 'ListNode'. ts(2339)
    newNode.next = this.head;
    this.head = newNode;
    this.currentSize += 1;
  }
}


const myNode = new ListNode("foo");
const myList = new LinkedList();

myList.addFirst(myNode);

用户疑问：

• 明明ListNode类已定义next属性，为何TypeScript提示该属性不存在？
• 如何修复第二段代码，同时保留它的灵活性（后续可实现tail指针，支持带next指针的节点）？

你在定义LinkedList类时，把<ListNode>当成了泛型参数占位符，而非引用已定义的ListNode类。这相当于重新声明了一个叫ListNode的未知类型，TypeScript完全不知道这个占位符有next属性，自然会报错。

简单说：class LinkedList<X>里的X是泛型变量，你只是把X换成了ListNode，和之前定义的ListNode类没有任何关系。

要保留灵活性，我们可以给LinkedList的泛型加约束，要求传入的节点类型必须包含next（以及后续需要的其他属性），而非用泛型覆盖已有类名。

方案1：用接口定义通用节点结构 #

先定义接口规范链表节点的必备属性，让ListNode实现该接口，再让LinkedList的泛型继承这个接口：

// 定义通用节点接口，规定必须有next和data属性
interface LinkedListNode<T> {
  next: LinkedListNode<T> | null;
  data: T | null;
}

// 让ListNode实现接口
class ListNode<T> implements LinkedListNode<T> {
  data: T | null;
  next: LinkedListNode<T> | null;

  constructor(val?: T, next?: LinkedListNode<T>) {
    this.data = val ?? null;
    this.next = next ?? null;
  }
}

// LinkedList的泛型参数必须符合LinkedListNode结构
class LinkedList<T, NodeType extends LinkedListNode<T>> {
  head: NodeType | null;
  currentSize: number = 0;

  constructor(head?: NodeType) {
    this.head = head ?? null;
  }

  addFirst(newNode: NodeType) {
    newNode.next = this.head;
    this.head = newNode;
    this.currentSize += 1;
  }
}

// 使用时指定具体节点类型
const myNode = new ListNode("foo");
const myList = new LinkedList<string, ListNode<string>>();

myList.addFirst(myNode);

方案2：简化泛型约束（适配子类扩展） #

如果只需要支持ListNode及其子类，可直接把泛型参数约束为ListNode<T>：

class ListNode<T> {
  data: T | null;
  next: ListNode<T> | null;

  constructor(val?: T, next?: ListNode<T>) {
    this.data = val ?? null;
    this.next = next ?? null;
  }
}

// 泛型T是数据类型，NodeType约束为ListNode<T>或其子类，默认用ListNode<T>
class LinkedList<T, NodeType extends ListNode<T> = ListNode<T>> {
  head: NodeType | null;
  currentSize: number = 0;

  constructor(head?: NodeType) {
    this.head = head ?? null;
  }

  addFirst(newNode: NodeType) {
    newNode.next = this.head;
    this.head = newNode;
    this.currentSize += 1;
  }
}

// 使用时可省略节点类型，默认用ListNode<string>
const myNode = new ListNode("foo");
const myList = new LinkedList<string>();

myList.addFirst(myNode);

// 后续扩展带tail指针的节点也能兼容
class ListNodeWithTail<T> extends ListNode<T> {
  tail: ListNodeWithTail<T> | null;
  constructor(val?: T) {
    super(val);
    this.tail = this;
  }
}

const tailNode = new ListNodeWithTail("bar");
const tailList = new LinkedList<string, ListNodeWithTail<string>>();
tailList.addFirst(tailNode);

为什么转成JavaScript能运行？ #

TypeScript的类型检查只在编译阶段生效，编译成JS后，泛型、类型约束都会被移除。JS是动态类型语言，不管变量类型，直接访问next属性——只要运行时这个属性存在，就不会报错，所以你的代码能正常执行。

内容的提问来源于stack exchange，提问作者ksingh