programing

Angular 2-Types 스크립트에서 선택적 클래스 매개 변수를 설정하는 방법은 무엇입니까?

mailnote 2023. 7. 15. 10:25
반응형

Angular 2-Types 스크립트에서 선택적 클래스 매개 변수를 설정하는 방법은 무엇입니까?

Typescript에서 선택적 매개변수는 물음표로 표시할 수 있습니다.

하지만 새로운 키워드로 수업을 실제로 인스턴스화할 수 있는 유일한 방법을 찾았습니다.

문제는 Angular 2의 스타터 "hero" 튜토리얼 클래스는 새로운 키워드를 통해 인스턴스화되지 않으며 내가 이해하기로는 Angular에서 내부적으로 수행됩니다.

예를 들어 다음 코드가 있습니다.

모델/사용자.ts

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

모델/모뎀 사용자.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
}

개체의 '모양'을 정의하고 싶을 때는 인터페이스를 사용하고, 행동(메소드)을 추가해야 할 때는 클래스를 사용합니다.데이터를 이동하기만 하면 된다면 인터페이스를 사용하겠습니다.

클래스가 필요한 경우 사용자의 인스턴스를 만들기 위한 구문입니다.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 컴파일러에서 오류가 발생합니다.이것은 실수를 잡기 위해 고안된 것입니다.(흥미로운) 이유에 대해 자세히 알고 싶다면 다음은 유형 확인 뒤에 있는 몇 가지 생각에 대한 관련 상세 토론입니다.

class User {
    constructor(public id: number, public name: string = null) {}
}

var USERS: User[] = [
    new User(1),
    new User(2, 'User 2')
];

console.log(USERS);

제이에스피들

건설자를 사용하는 것은 아마도 여러분의 삶을 훨씬 더 쉽게 만들 것입니다.당신은 얻을 수 없을 것입니다.undefined사용자 이름을 가져오려고 하면 클래스에서 함수를 정의할 수 있습니다.유일한 차이점은 당신이 사용한다는 것입니다.new User(...)객체 리터럴을 형식으로 사용하는 대신.

한 가지 다른 방법은 사용하는 것입니다.Object.assign(속성 )으로합니다.a그리고.c에서는)

export class A {
    a:number=1;
    b:number;
    c:string;
    d:string;
}

let validA:A = Object.assign(new A(),{
    b:3,
    d:'Lorem ipsum'
});

저는 개인적으로 이 구문을 사용하여 여러 줄의 객체 초기화를 피하고 제 앱의 각 모델에 대한 인터페이스(따라서 코어 응답 클래스가 존재하는 경우 다른 파일이 매우 유용하지 않음)를 만드는 지루한 작업을 방지하고자 합니다.

또한 클래스 정의에서 기본값을 설정하는 것이 이 경우에 필수적인 것이 아니더라도 주저하지 마십시오.

마지막으로 중요한 것은 이 경우 클래스 메소드를 느슨하게 하지 않는다는 것입니다({} 캐스팅과 반대).

언급URL : https://stackoverflow.com/questions/36746806/how-to-set-optional-class-parameters-in-angular-2-typescript

반응형