'Front-End/Typescript'에 해당되는 글 12건

ES6 에서의  getter/setter함수

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

var myObj = new Object(); myObj.message = "hello"; console.log(myObj.message);

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

2. set/get  키워드

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

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

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

let obj = { msg : '', get hello(){ return this.msg + 'world'; }, set hello(value){ this.msg = value; } }; obj.hello = 'Hello'; console.log(obj.hello);  

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

1. 정의

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

2. 기본 사용

-  function(){ } ;

- () => { } ;

3. 화살표함수의 이용

//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) 즉시 실행함수 형태

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

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

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);

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

1. 정의

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

- ES6에 표함된 기능

2.  ES5 배열 요소 변수 할당

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)

var params = ['apple','banana','Orange']; let [m_name, m_name1] = params; console.log(` m_name : ${m_name} m_name1 : ${m_name1} `);  

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

1. 기본적인 사용

let test : string = 'HelloWorld'; console.log(test);

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

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

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

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

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

3. 템플릿 문자열

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

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

- `${표현식}`

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