개발관련/other

TypeScript에서 get 및 set

Rateye 2021. 8. 13. 10:09
728x90
반응형

 

질문 : TypeScript에서 가져 오기 및 설정

속성에 대한 get 및 set 메서드를 만들려고합니다.

private _name: string;

Name() {
    get:
    {
        return this._name;
    }
    set:
    {
        this._name = ???;
    }
}

값을 설정하는 키워드는 무엇입니까?

답변

TypeScript는 ActionScript3과 같은 getter / setter 구문을 사용합니다.

class foo {
    private _bar: boolean = false;
    get bar(): boolean {
        return this._bar;
    }
    set bar(value: boolean) {
        this._bar = value;
    }
}

Object.defineProperty() 기능을 사용하여이 JavaScript가 생성됩니다.

var foo = (function () {
    function foo() {
        this._bar = false;
    }
    Object.defineProperty(foo.prototype, "bar", {
        get: function () {
            return this._bar;
        },
        set: function (value) {
            this._bar = value;
        },
        enumerable: true,
        configurable: true
    });
    return foo;
})();

그래서 그것을 사용하려면

var myFoo = new foo();
if(myFoo.bar) {         // calls the getter
    myFoo.bar = false;  // calls the setter and passes false
}

그러나이를 사용하려면 TypeScript 컴파일러가 ECMAScript5를 대상으로하는지 확인해야합니다. 명령 줄 컴파일러를 실행하는 경우 다음과 같이 --target

tsc --target ES5

Visual Studio를 사용하는 경우 프로젝트 파일을 편집하여 TypeScriptCompile 빌드 도구의 구성에 플래그를 추가해야합니다. 여기에서 볼 수 있습니다.

foo.bar = true 와 같은 로컬 속성을 읽고 쓰는 경우 setter 및 getter 쌍을 갖는 것은 과잉입니다. 속성을 읽거나 쓸 때마다 로깅과 같은 작업을 수행해야하는 경우 나중에 언제든지 추가 할 수 있습니다.

Getter를 사용하여 읽기 전용 속성을 구현할 수 있습니다. 다음은 getter가 읽기 전용 및 옵션 유형과 상호 작용하는 방식도 보여 주는 예입니다.

//
// type with optional readonly property.
// baz?:string is the same as baz:string|undefined
//
type Foo = {
    readonly bar: string;
    readonly baz?: string;
}
const foo:Foo = {bar: "bar"}
console.log(foo.bar) // prints 'bar'
console.log(foo.baz) // prints undefined

//
// interface with optional readonly property
//
interface iFoo {
    readonly bar: string;
    readonly baz?: string;
}

const ifoo:iFoo = {bar: "bar"}
console.log(ifoo.bar)  // prints 'bar'
console.log(ifoo.baz)  // prints undefined


//
// class implements bar as a getter, 
// but leaves off baz.
//
class iBarClass implements iFoo {

    get bar() { return "bar" }
}
const iBarInstance = new iBarClass()
console.log(iBarInstance.bar)  // prints 'bar'
// accessing bas gives warning that bas does not exist 
// on iBarClass but returns undefined
console.log(iBarInstance.bas) // prints 'undefined'
// note that you could define baz as a getter
// and just return undefined to remove the warning.


//
// class implements optional readonly property as a getter
//
class iBazClass extends iBarClass {
    private readonly _baz?: string

    constructor(baz?:string) {
        super()
        this._baz = baz
    }

    get baz() { return this._baz; }
}

const iBazInstance = new iBazClass("baz")
console.log(iBazInstance.bar)  // prints bar
console.log(iBazInstance.baz)  // prints baz
출처 : https://stackoverflow.com/questions/12827266/get-and-set-in-typescript
728x90
반응형