web-dev-qa-db-ja.com

Typescriptの「計算済み」プロパティ

皆さん、私はAngular 6＆7）の「実践による学習」の最中であり、この問題に何度も遭遇しました。

私がクラス/インターフェース/タイプを持っていると想像してください-例えばPerson-Web API呼び出しによって返されるいくつかのプロパティ-次のようなもの：

export interface Person {
    FirstName: string;
    LastName: string;
    JobTitle: string;
    // so other properties - not relevant to this question
}

フルネーム（例： "FirstName + [Space] + LastName"）を例： Angular grid（AG-Grid）または他の場所-where I cannot concat式または何かを使用しますが、クラスの単一のプロパティを参照する必要があります/ interface/type。

C＃では、プロパティを作成します

string FullName { get { return $"{FirstName} {LastName}"; } }

そしてそれで終わります-しかし、Typescriptでこれをどのように行うことができますか？私が読んで研究してきたことから、これはnsupportedのようです-本当に？！？!!？どうして？このような単純で頻繁に使用される操作のようです-これがTypescriptに存在しない理由は何ですか？それとも存在しますか-TSでこれを行う方法が見つかりませんでしたか？

c#angulartypescriptproperties
13
marc_s

それがインターフェースの場合、JavaScriptのすべてのプロパティは、公開されたフィールドではなく、getter/setter関数を持つことができるため、構文はありません。これは実装の問題です。

TypeScriptのBTWメンバーはcamelCaseを使用します：

export interface Person {
    firstName: string;
    lastName : string;
    jobTitle : string;

    fullName : string;
}

class SimplePerson implements Person {

    // ...

    get fullName(): string {
        return this.firstName + " " + this.lastName;
    }
}
4
Dai

JavaScriptでgettersおよびsettersを定義することもできます。

これをコンポーネントクラスで試してください：

person: Person;
...
// You got the person Object from your Backend API.
...
// Now
get fullName() { 
  return `${this.person.firstName} ${this.person.lastName}`; 
}

そして、あなたのテンプレートで：

単にfullNameを次のように使用します：

<p>{{ fullName }}</p>
1
SiddAjmera

Javascriptは、プロパティを定義するときにgetおよびsetをサポートします（主にObject.definePropertyを使用）。

どうやらTypeScript（クラス用）には便利な構文があります：

class MyClass{
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string){
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }
}

インターフェースに関しては、実装ではなくデータの記述のみが目的であるため、このようなことが可能かどうかはわかりません。

1
Vivick

文字列の配列を使用してみることができます。

var fullName: Array<string> = Array<string>();
var firstName: string = 'Bob';
var lastName: string = 'Boberanne';
fullName.Push(firstName);
fullName.Push(lastName);

HTML：

<p>{{fullName.join(' ')}}</p>
<p>{{[fistname, lastName].join(' ')}}</p>

TypeScriptの場合：

fullName.join(' ');
[firstName, lastName].join(' ');
0
RetroCoder