如何将 TypeScript 类拆分为多个文件？

Question

我找到了很多示例，也尝试将一个模块拆分为多个文件。所以我得到了那个，非常方便。但有时出于同样的原因拆分班级也很实用。假设我有几种方法，我不想把所有东西都塞进一个长文件中。

我正在寻找类似于 C# 中的 partial 声明的东西。

Answer 1

模块让您可以从另一个文件扩展打字稿类：

user.ts

export class User {
  name: string;
}

import './user-talk';

user-talk.ts

import { User } from './user';

class UserTalk {
  talk (this:User) {
    console.log(`${this.name} says relax`);
  }
}

User.prototype.sayHi = UserTalk.prototype.sayHi;

declare module './user' {
  interface User extends UserTalk { }
}

用法：

import { User } from './user';

const u = new User();
u.name = 'Frankie';
u.talk();
> Frankie says relax

如果你有很多方法，你可以试试这个：

// user.ts
export class User {
  static extend (cls:any) {
    for (const key of Object.getOwnPropertyNames(cls.prototype)) {
      if (key !== 'constructor') {
        this.prototype[key] = cls.prototype[key];
      }
    }
  }
  ...
}

// user-talk.ts
...
User.extend(UserTalk);

或者将子类添加到原型链中：

...
static extend (cls:any) {
  let prototype:any = this;
  while (true) {
    const next = prototype.prototype.__proto__;
    if (next === Object.prototype) break;
    prototype = next;
  }
  prototype.prototype.__proto__ = cls.prototype;
}

Answer 2

我个人使用@partial装饰器作为一种简化语法，可以帮助将单个类的功能划分为多个???类文件...https://github.com/mustafah/partials

Answer 3

提议模式的修改版本。

// temp.ts contents
import {getValue, setValue} from "./temp2";

export class BigClass {
    // @ts-ignore - to ignore TS2564: Property 'getValue' has no initializer and is not definitely assigned in the constructor.
    public getValue:typeof getValue;

    // @ts-ignore - to ignore TS2564: Property 'setValue' has no initializer and is not definitely assigned in the constructor.
    public setValue:typeof setValue;
    protected value = "a-value";
}

BigClass.prototype.getValue = getValue;
BigClass.prototype.setValue = setValue;

//======================================================================
// temp2.ts contents
import { BigClass } from "./temp";

export function getValue(this: BigClass) {
    return this.value;
}

export function setValue(this: BigClass, value: string ) {
    this.value = value;
}

优点

• 不在类实例中创建额外的字段，因此没有开销：在构造、销毁时，不使用额外的内存。 typescript 中的字段声明仅用于此处的输入，它们不会在 Javascript 运行时创建字段。
• 智能正常（在 Webstorm 中测试）

缺点

• 需要ts-ignore
• 比@Elmer 的答案更丑的语法

解的其余性质相同。

Answer 4

最近我使用这种模式：

// file class.ts
import { getValue, setValue } from "./methods";

class BigClass {
    public getValue = getValue;
    public setValue = setValue;

    protected value = "a-value";
}

// file methods.ts
import { BigClass } from "./class";

function getValue(this: BigClass) {
    return this.value;
}

function setValue(this: BigClass, value: string ) {
   this.value = value;
}

这样我们可以将方法放在一个单独的文件中。现在这里发生了一些循环依赖的事情。文件class.ts 从methods.ts 导入，methods.ts 从class.ts 导入。这可能看起来很可怕，但这不是问题。只要代码执行不是循环的，一切都很好，在这种情况下，methods.ts 文件不会执行class.ts 文件中的任何代码。 NP！

您也可以将它与这样的泛型类一起使用：

class BigClass<T> {
    public getValue = getValue;
    public setValue = setValue;

    protected value?: T;
}

function getValue<T>(this: BigClass<T>) {
    return this.value;
}

function setValue<T>(this: BigClass<T>, value: T) {
    this.value = value;
}

Answer 5

为了添加到@Elmer 的solution，我添加了以下内容以使其在单独的文件中工作。

some-function-service-helper.ts

import { SomeFunctionService } from "./some-function-service";

export function calculateValue1(this: SomeFunctionService) {
...
}

some-function-service.ts

import * as helper from './some-function-service-helper';

@Injectable({
    providedIn: 'root'
})
export class SomeFunctionService {

    calculateValue1 = helper.calculateValue1;  //  helper function delcaration used for getNewItem

    public getNewItem() {
        var one = this.calculateValue1();
    }

Answer 6

为什么不直接使用 js 自带的Function.call。

class-a.ts

Class ClassA {
  bitten: false;

  constructor() {
    console.log("Bitten: ", this.bitten);
  }

  biteMe = () => biteMe.call(this);
}

在其他文件中bite-me.ts

export function biteMe(this: ClassA) {
  // do some stuff
  // here this refers to ClassA.prototype

  this.bitten = true;

  console.log("Bitten: ", this.bitten);
}

// 使用它

const state = new ClassA();
// Bitten: false

state.biteMe();
// Bitten: true

更多信息请查看Function.call的定义

Answer 7

您可以使用multi file namespaces。

验证.ts：

namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
}

LettersOnlyValidator.ts（使用上面的 StringValidator）：

/// <reference path="Validation.ts" /> 
namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
}

Test.ts（使用上面的 StringValidator 和 LettersOnlyValidator）：

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />

// Some samples to try
let strings = ["Hello", "101"];

// Validators to use
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["Letters only"] = new Validation.LettersOnlyValidator();

Answer 8

我们可以通过prototype和Interface的定义逐步扩展类方法：

import login from './login';
import staffMe from './staff-me';

interface StaffAPI {
  login(this: StaffAPI, args: LoginArgs): Promise<boolean>;
  staffsMe(this: StaffAPI): Promise<StaffsMeResponse>;
}

class StaffAPI {
  // class body
}

StaffAPI.prototype.login = login;
StaffAPI.prototype.staffsMe = staffsMe;

export default StaffAPI;

Answer 9

在将使用“原型”的大型旧多文件 javascript 类转换为多个打字稿文件时，我使用普通子类化：

bigclassbase.ts：

class BigClassBase {
    methodOne() {
        return 1;
    }

}
export { BigClassBase }

bigclass.ts：

import { BigClassBase } from './bigclassbase'

class BigClass extends BigClassBase {
    methodTwo() {
        return 2;
    }
}

您可以在任何其他打字稿文件中导入 BigClass。

Answer 10

你不能。

有一个实现部分类的功能请求，首先是在 CodePlex 上，后来在 GitHub 上，但 on 2017-04-04 被声明为超出范围。给出了很多理由，主要的收获似乎是他们希望尽可能地避免偏离 ES6：

TypeScript已经有太多 TS 特定的类特性 [...] 添加另一个 TS 特定的类特性是压倒骆驼的另一根稻草，如果可以的话，我们应该避免。 [...] 因此，如果有一些场景真的因为添加部分类而被淘汰出局，那么该场景应该能够通过 TC39 流程证明自己的合理性。

Answer 11

我使用这个（在 typescript 2.2.2 中工作）：

class BigClass implements BigClassPartOne, BigClassPartTwo {
    // only public members are accessible in the
    // class parts!
    constructor(public secret: string) { }

    // this is ugly-ish, but it works!
    methodOne = BigClassPartOne.prototype.methodOne;
    methodTwo = BigClassPartTwo.prototype.methodTwo;
}

class BigClassPartOne {
    methodOne(this: BigClass) {
        return this.methodTwo();
    }
}

class BigClassPartTwo {
    methodTwo(this: BigClass) {
        return this.secret;
    }
}