[Typescript] ES6 에서의 getter/setter함수

Front-End/Typescript 2017. 3. 4. 17:24
donaricano-btn

ES6 에서의  getter/setter함수


1. 일반적인 프로퍼티 추가

?
1
2
3
4
var myObj = new Object();
myObj.message = "hello";
 
console.log(myObj.message);

- message프로퍼티는 값을 저장하거나 읽을 수 있지만 값의 설정과 출력과정에 아무런 처리를 할 수 없다


2. set/get  키워드

- 프로퍼티 설정과 출력 시 특정 처리를 한다

{ set 속성이름(매개변수){..}}

{ get 속성이름(){..}}

?
1
2
3
4
5
6
7
8
9
10
11
12
let obj = {
    msg : '',
    get hello(){
        return this.msg + 'world';
    },
    set hello(value){
        this.msg = value;
    }
};
 
obj.hello = 'Hello';
console.log(obj.hello);
 

'Front-End > Typescript' 카테고리의 다른 글

[Typescript] 타입스크립트 화살표 함수 =>  (0) 2017.03.04
[Typescript] 타입스크립트 디스트럭처링(destructuring)  (0) 2017.03.04
[Typescript] 타입스크립트 문자열 표현 - 템플릿 문자열  (0) 2017.03.04
[Typescript] 타입스크립트유니언 타입 - Union type  (0) 2017.03.04
[Typescript] 타입스크립트 - 배열선언  (0) 2017.02.22
블로그 이미지

리딩리드

,

[Typescript] 타입스크립트 화살표 함수 =>

Front-End/Typescript 2017. 3. 4. 17:09
donaricano-btn

타입스크립트 화살표 함수 =>


1. 정의

- ES6표준에 포함된 익명의 함수를 간략하게 표현 할 수 있는 방법


2. 기본 사용

-  function(){ } ;

- () => { } ;


3. 화살표함수의 이용

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//case1
var pw = function(x){
    return x * x;
}
console.log(pw(2));
 
//case2
var pw2 = (x)=>{
    return x*x;
}
console.log(pw2(3));
 
//case3
var pw3= x => x*x;
console.log(pw3(3));

- 기본 함수를 간단하게 표현이 가능하다

1) 즉시 실행함수 형태

?
1
2
3
((x) => {
    console.log(x*x);
})(3);

2) 화살표 함수와 필터함수

?
1
2
3
4
5
6
7
8
9
10
11
12
var numbers = [1,2,3,4];
 
//normal
var number_list = numbers.filter(check);
function check(value){
    return value > 1;
}
console.log(number_list);
 
//arrow
var arrow_filter = numbers.filter(value => value > 1);
console.log(arrow_filter);

'Front-End > Typescript' 카테고리의 다른 글

[Typescript] ES6 에서의 getter/setter함수  (0) 2017.03.04
[Typescript] 타입스크립트 디스트럭처링(destructuring)  (0) 2017.03.04
[Typescript] 타입스크립트 문자열 표현 - 템플릿 문자열  (0) 2017.03.04
[Typescript] 타입스크립트유니언 타입 - Union type  (0) 2017.03.04
[Typescript] 타입스크립트 - 배열선언  (0) 2017.02.22
블로그 이미지

리딩리드

,

[Typescript] 타입스크립트 디스트럭처링(destructuring)

Front-End/Typescript 2017. 3. 4. 16:32
donaricano-btn

타입스크립트 디스트럭처링(destructuring)


1. 정의

- 배열이나 객체에서 데이터를 선택적으로 추출할 수 있는 자바스크립트 표현식

- ES6에 표함된 기능


2.  ES5 배열 요소 변수 할당

?
1
2
3
4
5
6
7
var params = ['apple','banana','Orange'];
 
let m_name = params[0];
let m_name1 = params[1];
 
console.log(m_name);
console.log(m_name1);


3. 디스트럭처링(destructuring)

?
1
2
3
4
5
6
7
8
var params = ['apple','banana','Orange'];
 
let [m_name, m_name1] = params;
 
console.log(`
    m_name : ${m_name}
    m_name1 : ${m_name1}
`);
 

'Front-End > Typescript' 카테고리의 다른 글

[Typescript] ES6 에서의 getter/setter함수  (0) 2017.03.04
[Typescript] 타입스크립트 화살표 함수 =>  (0) 2017.03.04
[Typescript] 타입스크립트 문자열 표현 - 템플릿 문자열  (0) 2017.03.04
[Typescript] 타입스크립트유니언 타입 - Union type  (0) 2017.03.04
[Typescript] 타입스크립트 - 배열선언  (0) 2017.02.22
블로그 이미지

리딩리드

,

[Typescript] 타입스크립트 문자열 표현 - 템플릿 문자열

Front-End/Typescript 2017. 3. 4. 16:21
donaricano-btn

타입스크립트 문자열 표현 - 템플릿 문자열


1. 기본적인 사용

?
1
2
3
let test : string = 'HelloWorld';
 
console.log(test);

- "", ''   를 사용하여 문자열을 표시한다


2. 개행문자(\n) 삽입시 문제

?
1
2
let line : string = "one:"+String(1)+"\n"+"two:"+String(2);
console.log(line);
 

-  줄 바꿈을 처리 하기 위해선 위와 같은 복잡한 처리를 해야함

- 개선 방법으론 템플릿 문자열을 사용


3. 템플릿 문자열

- 템플릿 문자열은 기본적으로 백틱(backpack) 문자 `(~ 아래) 를 사용한다

?
1
2
3
4
5
let multi_line : string = `
    one = 1
    two = 2
`
console.log(multi_line);
 

- `${표현식}`

?
1
2
3
4
5
6
7
8
9
10
11
12
13
let w: string="world";
let one:number =1;
 
function hi(){
    return 'hi';
}
 
let hello : string = `
    hello ${w}
    1+${one} = ${1+1}
    ${hi()}
`
console.log(hello);
 

hello world

    1+1 = 2

    hi



'Front-End > Typescript' 카테고리의 다른 글

[Typescript] 타입스크립트 화살표 함수 =>  (0) 2017.03.04
[Typescript] 타입스크립트 디스트럭처링(destructuring)  (0) 2017.03.04
[Typescript] 타입스크립트유니언 타입 - Union type  (0) 2017.03.04
[Typescript] 타입스크립트 - 배열선언  (0) 2017.02.22
[Typescript] 타입스크립트의 클래스 typescript classes  (0) 2017.02.15
블로그 이미지

리딩리드

,

공지사항

카테고리

글 보관함

달력

«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

티스토리툴바