Angular 2-Typescriptでオプションのクラスパラメーターを設定するにはどうすればよいですか?

dragonmnl:

Typescript では、オプションのパラメーターは疑問符でマークできることを知っています

ただし、実際に新しいキーワードでクラスをインスタンス化する唯一の方法です。

問題は、Angular 2のスターター「ヒーロー」チュートリアルクラスに基づいて、新しいキーワードを介してインスタンス化されておらず、Angularが内部で行っていることを理解していることです。

たとえば、私はこのコードを持っています:

models / users.ts

export class User {
    id: number;
    name: string; // I want this to be optional
}

models / mock-users.ts

import {User} from './user';

export var USERS: User[] = [
    {
       id: 1
       // no name (I wanted it to be optional for user with id 1)
    },
    {
       id: 2,
       name: "User 2"
    },        
]

services / user.service.ts

import {Injectable} from 'angular2/core';
import {USERS} from './../models/mock-users';

@Injectable()
export class UserService {
    getUsers() {
         return Promise.resolve(USERS);
    }
}

views / my-component.component.ts

// imports here...

@Component({
   // ...
})

export class MyComponent {
   constructor(private _userService: UserService) { }

   getUsers() {
         this._userService.getUsers().then(users => console.log(users));
   }
}
ロナルド・ザレット:

あなたのケースでは、代わりにユーザーのインターフェイスを使用する方が便利かもしれません。

export interface User {
    id: number;
    name?: string; // interfaces allow fields to be optional
}

オブジェクトの「形状」を定義する場合はインターフェースを使用し、動作(メソッド)を追加する必要がある場合はクラスを使用します。必要なのは、データを移動することだけであれば、インターフェイスを使用します。

クラスが必要な場合は、Usersのインスタンスを作成するための構文がmock-users.ts少し異なります。まず、TypeScriptには「オプションのクラスフィールド」はありません。どのフィールドも設定/「未定義」できないため、フィールドをオプションとしてマークしても意味がありません。newキーワードを使用してクラスをインスタンス化できます。欠点は、フィールド値を設定するか、インスタンスを変数に割り当ててフィールドを設定するコンストラクターを作成する必要があることです。しかし、特にテストオブジェクトの場合、新しいキーワードを使用しても何も問題はありません。

実行したように、オブジェクトリテラルを使用してオブジェクトをインスタンス化することもできますmock-users.ts。キャストを追加して、より明示的にする必要があります。

export var USERS: User[] = [
    <User> { // explicit cast to let the TypeScript compiler know you know what you're doing
       id: 1
       // no name (I wanted it to be optional for user with id 1)
    },
    {
       id: 2,
       name: "User 2"
    },        
]

キャストがない場合、TypeScriptコンパイラはエラーを生成します。これは、間違いを見つけるための仕様です。(興味深い)理由について詳しく知りたい場合は、型チェックの背後にあるいくつかの考え方について、関連する詳細な議論を以下に示します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ページアンカーナビゲーションを使用しているときに、Angular 2でnavbarをブートストラップするように「activate」クラスを設定するにはどうすればよいですか?

分類Dev

TypeScript、Angular2の派生クラスで基本クラスコンストラクターパラメーターを繰り返さないようにするにはどうすればよいですか?

分類Dev

Angular2で@Inputのデフォルトパラメータを設定するにはどうすればよいですか?

分類Dev

Angular 2/4アプリコンポーネントでルートパラメータを取得するにはどうすればよいですか?

分類Dev

Angular 11で2つの親のルートパラメータにアクセスするにはどうすればよいですか?

分類Dev

Angular 2クライアント側アプリケーションでAPIキーを非表示/保護するにはどうすればよいですか?

分類Dev

Angular 2のngrxエフェクトのパラメーターにアクセスするにはどうすればよいですか?

分類Dev

OpenAPI 3.0で2つのオプションパラメータを使用してパスを定義するにはどうすればよいですか?

分類Dev

プログラムでAngular 2フォームコントロールをダーティに設定するにはどうすればよいですか?

分類Dev

Angular2ルートのパラメーターをAngularの方法で取得するにはどうすればよいですか?

分類Dev

Angular2 +の* ngFor要素にアンカーを設定するにはどうすればよいですか?

分類Dev

Angular 2コンポーネントのプロパティのデフォルト値を設定するにはどうすればよいですか?

分類Dev

Angular 2アプリのルートにアクセスするときにクエリ文字列パラメーターをURLに保持するにはどうすればよいですか?

分類Dev

Angular2で兄弟コンポーネントのスタイルを設定するにはどうすればよいですか?

分類Dev

PHPアプリケーションでAngular 2を使用するにはどうすればよいですか?

分類Dev

Angular 2で動的に作成された場合、選択したフォームに特定のオプションを設定するにはどうすればよいですか?

分類Dev

TypeScriptを使用してAngular 2コンポーネントでモデルクラスを宣言するにはどうすればよいですか?

分類Dev

Angular2アプリケーションでMediaRecorderオブジェクトを使用するにはどうすればよいですか?

分類Dev

Angular 2で新しいオプションを選択するたびに関数をトリガーするにはどうすればよいですか?

分類Dev

Angular2の特定の内部ルートパラメータを変更するにはどうすればよいですか?

分類Dev

Angular 2:フォームのさまざまなオプションから選択した値を取得するにはどうすればよいですか?

分類Dev

Angular 2でBootstrap navbarの「アクティブ」クラスを設定するにはどうすればよいですか?

分類Dev

Angular 2の以前のAPIリクエストからのパラメーターを必要とするAPIからデータを取得するにはどうすればよいですか?

分類Dev

Angular 2のDatePipeでロケールを設定するにはどうすればよいですか?

分類Dev

Angular 2のプロバイダーをランタイムデータに登録するにはどうすればよいですか?

分類Dev

スナックバーの長さをangular2(material2)で設定するにはどうすればよいですか?

分類Dev

Angular2で拡張クラスインスタンスのライフサイクルを制御するにはどうすればよいですか?

分類Dev

Angular2で属性dpfパス要素を設定するにはどうすればよいですか?

分類Dev

Angular 2のgulp-typescriptを設定するにはどうすればよいですか?

Related 関連記事

  1. 1

    ページアンカーナビゲーションを使用しているときに、Angular 2でnavbarをブートストラップするように「activate」クラスを設定するにはどうすればよいですか?

  2. 2

    TypeScript、Angular2の派生クラスで基本クラスコンストラクターパラメーターを繰り返さないようにするにはどうすればよいですか?

  3. 3

    Angular2で@Inputのデフォルトパラメータを設定するにはどうすればよいですか?

  4. 4

    Angular 2/4アプリコンポーネントでルートパラメータを取得するにはどうすればよいですか?

  5. 5

    Angular 11で2つの親のルートパラメータにアクセスするにはどうすればよいですか?

  6. 6

    Angular 2クライアント側アプリケーションでAPIキーを非表示/保護するにはどうすればよいですか?

  7. 7

    Angular 2のngrxエフェクトのパラメーターにアクセスするにはどうすればよいですか?

  8. 8

    OpenAPI 3.0で2つのオプションパラメータを使用してパスを定義するにはどうすればよいですか?

  9. 9

    プログラムでAngular 2フォームコントロールをダーティに設定するにはどうすればよいですか?

  10. 10

    Angular2ルートのパラメーターをAngularの方法で取得するにはどうすればよいですか?

  11. 11

    Angular2 +の* ngFor要素にアンカーを設定するにはどうすればよいですか?

  12. 12

    Angular 2コンポーネントのプロパティのデフォルト値を設定するにはどうすればよいですか?

  13. 13

    Angular 2アプリのルートにアクセスするときにクエリ文字列パラメーターをURLに保持するにはどうすればよいですか?

  14. 14

    Angular2で兄弟コンポーネントのスタイルを設定するにはどうすればよいですか?

  15. 15

    PHPアプリケーションでAngular 2を使用するにはどうすればよいですか?

  16. 16

    Angular 2で動的に作成された場合、選択したフォームに特定のオプションを設定するにはどうすればよいですか?

  17. 17

    TypeScriptを使用してAngular 2コンポーネントでモデルクラスを宣言するにはどうすればよいですか?

  18. 18

    Angular2アプリケーションでMediaRecorderオブジェクトを使用するにはどうすればよいですか?

  19. 19

    Angular 2で新しいオプションを選択するたびに関数をトリガーするにはどうすればよいですか?

  20. 20

    Angular2の特定の内部ルートパラメータを変更するにはどうすればよいですか?

  21. 21

    Angular 2:フォームのさまざまなオプションから選択した値を取得するにはどうすればよいですか?

  22. 22

    Angular 2でBootstrap navbarの「アクティブ」クラスを設定するにはどうすればよいですか?

  23. 23

    Angular 2の以前のAPIリクエストからのパラメーターを必要とするAPIからデータを取得するにはどうすればよいですか?

  24. 24

    Angular 2のDatePipeでロケールを設定するにはどうすればよいですか?

  25. 25

    Angular 2のプロバイダーをランタイムデータに登録するにはどうすればよいですか?

  26. 26

    スナックバーの長さをangular2(material2)で設定するにはどうすればよいですか?

  27. 27

    Angular2で拡張クラスインスタンスのライフサイクルを制御するにはどうすればよいですか?

  28. 28

    Angular2で属性dpfパス要素を設定するにはどうすればよいですか?

  29. 29

    Angular 2のgulp-typescriptを設定するにはどうすればよいですか?

ホットタグ

アーカイブ