如何在Angular 2-Typescript中设置可选的类参数?

dra*_*mnl 21 typescript angular

我知道在Typescript中可选参数可以用问号标记.

但是,我发现实际使用new关键字实例化类的唯一方法.

问题是基于Angular 2的首发"英雄"教程类没有通过new关键字实例化,据我所知,这是由Angular内部完成的.

例如,我有这个代码:

车型/ users.ts

export class User {
    id: number;
    name: string; // I want this to be optional
}
Run Code Online (Sandbox Code Playgroud)

模型/模拟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"
    },        
]
Run Code Online (Sandbox Code Playgroud)

服务/ user.service.ts

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

@Injectable()
export class UserService {
    getUsers() {
         return Promise.resolve(USERS);
    }
}
Run Code Online (Sandbox Code Playgroud)

意见/我-component.component.ts

// imports here...

@Component({
   // ...
})

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

   getUsers() {
         this._userService.getUsers().then(users => console.log(users));
   }
}
Run Code Online (Sandbox Code Playgroud)

Ron*_*īts 44

在您的情况下,使用User的界面可能更方便.

export interface User {
    id: number;
    name?: string; // interfaces allow fields to be optional
}
Run Code Online (Sandbox Code Playgroud)

当我想要定义对象的'形状'时,我需要使用接口,当需要添加行为(方法)时,我会使用类.如果您只需要移动数据,我就会使用一个界面.

如果确实需要一个类,那么创建Users实例的语法mock-users.ts应该有点不同.首先,TypeScript中没有"可选类字段".任何字段都不能设置/'未定义',因此没有意义标记字段可选.您可以使用new关键字实例化一个类- 缺点是您需要编写构造函数来设置字段值或将实例分配给变量并设置字段.但是使用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"
    },        
]
Run Code Online (Sandbox Code Playgroud)

如果没有强制转换,TypeScript编译器将产生错误.这是设计上的错误.如果您想了解更多有关(有趣)的原因,请参阅以下关于类型检查背后的一些思考的相关详细讨论: