打字稿（Angular 服务）和解决连接错误的良好做法

Question

我想设置一个带有多个 arg 的 url。我试试这个但不工作：

@Injectable()
export class MapService {
    ign : string = 'https://wxs.ign.fr/secret/geoportail/wmts?';
    ignEnd = '&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}';
    ignSat = this.ign + 'layer=ORTHOIMAGERY.ORTHOPHOTOS';
    this.ignSat = this.ignSat + '&tilematrixset=PM';
    this.ignSat = this.ignSat + '&Service=WMTS';
    this.ignSat = this.ignSat + '&Request=GetTile';
    this.ignSat = this.ignSat + '&Version=1.0.0';
    this.ignSat = this.ignSat + '&Format=image%2Fjpeg' + this.ignEnd;

    private LAYER_IGN_SATELLITE = {
        id: 'ignsatelite',
        name: 'IGN Satelite',
        enabled: false,
        layer: tileLayer(this.ignSat, {
            maxZoom: 20,
            attribution: 'IGN'
        })
    };

    ...
    constructor() {}
    ...

}

我有这个错误：

Unexpected token. A constructor, method, accessor, or property was expected.ts(1068)

编辑

我试试这个：

ignSat = ignSat + '&style=normal';

我试试这个：

ignSat = this.ignSat.concat('&style=normal');

我试试这个：

this.ignSat = this.ignSat.concat('&style=normal');

Answer 1

在class 主体内部和任何方法主体外部，您可以声明并选择性地初始化fields。您不能重新声明或重新初始化字段。你也不能写任意的 JS 或 TS 语句：

class Foo {
    bar: string | undefined; // declaring field
    baz = "hello"; // declaring and initializing field

    bar = "" // error! you cannot redeclare or reinitialize a field
    console.log("oops") // error! you cannot write arbitrary statements here
}

我假设您看到的错误是 TypeScript 编译器试图将您的代码解析为字段或方法声明，但未能成功。例如，在上面的代码中，编译器认为console 是我在Foo 上声明的某个成员，然后对后面的所有内容感到绝望。

如果您需要在字段上完成的处理比在单个初始化程序行中完成的处理更多，您应该考虑将此类处理移动到 constructor 方法的主体中，请记住，在所有方法中，您需要将字段作为this 的属性访问：

class Bar {
    bar: string | undefined;
    baz = "hello";

    constructor() {
        this.bar = ""; // okay
        console.log("okay"); // okay
    }
}

那么，对于您的示例，我想说的是，假设您需要 ign、ignEnd 和 ignSat 成为 MapService 实例的字段（而不仅仅是临时变量），我只想声明将它们作为strings 并将所有处理移至constructor 方法中：

export class MapService {

    ign: string;
    ignEnd: string;
    ignSat: string;

    constructor() {
        this.ign = 'https://wxs.ign.fr/secret/geoportail/wmts?';
        this.ignEnd = '&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}';
        this.ignSat = this.ign + 'layer=ORTHOIMAGERY.ORTHOPHOTOS';
        this.ignSat = this.ignSat + '&tilematrixset=PM';
        this.ignSat = this.ignSat + '&Service=WMTS';
        this.ignSat = this.ignSat + '&Request=GetTile';
        this.ignSat = this.ignSat + '&Version=1.0.0';
        this.ignSat = this.ignSat + '&Format=image%2Fjpeg' + this.ignEnd;

    }
   
}

Playground link to code

Answer 2

在 TypeScript（如 JS）中，变量声明是使用关键字 let 和可选的类型说明符完成的。可以使用+ 的重载、对字符串使用.concat 方法或JS template literals 来连接字符串。您的示例的以下修改非常有效（Playground Link）：

let ign: string = 'https://wxs.ign.fr/secret/geoportail/wmts?';
let ignEnd: string = '&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}';
let ignSat: string = ign + 'layer=ORTHOIMAGERY.ORTHOPHOTOS';
ignSat = ignSat + '&tilematrixset=PM';
ignSat = ignSat + '&Service=WMTS';
ignSat = ignSat + '&Request=GetTile';
ignSat = ignSat + '&Version=1.0.0';
ignSat = ignSat + '&Format=image%2Fjpeg' + ignEnd;

如果我遗漏了什么，请完善您的问题。