고정 헤더 영역
상세 컨텐츠
본문
### TS타입스크립트 실행환경에서 지원하는 ES6엑마스크립트기능을 JS와 비교하면서 확인(아래)
- 실습환경 : 코드펜 ( https://codepen.io/ )
- 사전지식(JS(ES5) vs ES6 비교 글) : https://kimilguk.tistory.com/838
---------------------------------------------------------------------------------------------------------------------------------------
#### 블록 영역 변수, 상수 선언 : 코드펜에서 실습(아래 https://codepen.io/pen/ )
---------------------------------------------------------------------------------------------------------------------------------------
엑마스크립트6(ES6)부터 let, const 키워드를 사용해 변수, 상수를 정의할 수 있다.
TypeScript(TS) 또한 마찬가지로 사용한다.
let 변수는 var 변수가 불러오는 문제점(중복 선언에 따른 의도치 않은 동작 등)을 해결하는데 사용 됩니다.
즉, let또는 const 키워드를 사용하면 블록 영역(Block Scope)으로 중복사용 문제점을 해결할 수 있다.(아래 실습코드)
// var 변수는 중복선언 기능(아래)
var context = document.querySelector('html');
var context = document.querySelector('body'); // 변수를 중복선언 기능 let에서는 불가능
console.log('글로벌 변수 context = ', context); //<body>~</body>
//자바스크립트 var 변수는 함수의 블록영역내에서만 유효(아래)
var context1 = '아무개';
{
var context1 = '김일국';
//여기서 전역변수가 되기 때문에 예상치 못한 결과가 나올수 있다. 변수의 호이스팅 이라고 한다.
}
() => { //Anonymous(어나미머스)익명함수는 콜백-자동실행된다.
var context1 = '홍길동';
}
console.log('글로벌 변수 context1 = ',context1); // 김일국
//타입스크립트 let 변수는 모든 블럭 영역내에서 유효(아래)
let context2 = '아무개';
{
let context2 = '김일국'; // 블록내부에 선언한 변수는 외부와 분리되며, 같은 변수명을 사용가능.
}
() => { //Anonymous(어나미머스)익명함수는 콜백-자동실행된다.
let context2 = '홍길동';
}
console.log('글로벌 변수 context2 = ',context2); //아무개- 위 소스를 코드펜에서 실행한 화면(아래)
---------------------------------------------------------------------------------------------------------------------------------------
#### 템플릿 리터럴 변수사용 : 코드펜에서 실습(아래 https://codepen.io/pen/ )
---------------------------------------------------------------------------------------------------------------------------------------
ES6부터 템플릿 리터럴을 활용해 보다 손쉽게 템플릿 구문을 처리(문자열 접합)할 수 있다. TypeScript에서도 템플릿 리터럴을 사용해 템플릿 구문을 손쉽게 사용할 수 있다.(아래 실습코드)
let name = '김일국';
let login_msg = `
<p>
안녕하세요 <strong>${name}</strong>님.
가입을 환영합니다. :-)
</p>
`;
console.log(login_msg);
let body = document.querySelector('body');
let div = body.appendChild(document.createElement('div'));//body>div태그 생성
div.innerHTML = login_msg; //위에서 생성한 div 태그에 html코드 넣기
//document.querySelector('body').innerHTML = login_msg; //참고로, body태그에 바로 넣을 수도 있다.
console.log(document.querySelector('body'));- 위 소스를 코드펜에서 실행한 화면(아래)
---------------------------------------------------------------------------------------------------------------------------------------
#### 화살표(애로우)함수-람다식 사용 : 코드펜에서 실습(아래 https://codepen.io/pen/ )
---------------------------------------------------------------------------------------------------------------------------------------
사전지식(JS(ES5) vs ES6 비교 글) : https://kimilguk.tistory.com/838 내용 중 6. 마지막 세련된 ES6를 활용한 비동기 통신 소스의 getData함수를 애로우 함수로 변경하고, json객체를 string문자열로 데이터 출력해 보세요.(아래결과 2줄 변경)
//람다식으로 변경(아래 1줄)
let getData = async (host, date, headers = {}) => { // 초기값 빈 배열객체{}, POST방식에서 body와 headers에 "Content-Type": "application/json", 을 사용할 수 있다.
const url = `${host}=${date}`;
const options = {
method: "GET",
headers: {
...headers, // ES6구조 분해할당 중 배열할당기호 ...
}
};
const res = await fetch(url, options);
const data = await res.json();
if (res.ok) {
return data;
} else {
throw Error(data);
}
}
getData("https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt", "20230101",)
.then((data) => {
console.log(data); //ES6부터 지원되는 promise Object를 JSON.stringify함수로 문자열로변환 후 화면에 출력 1줄
document.querySelector('body').innerHTML = JSON.stringify(data);//data.boxOfficeResult.dailyBoxOfficeList[0]['movieNm'];
})
.catch((error) => console.log(error));- 위 소스를 코드펜에서 실행한 화면(아래)
- 플레이그라운드 환경에서는 함수의 매개변수 타입을 지정해 준다(아래) https://www.typescriptlang.org/play
---------------------------------------------------------------------------------------------------------------------------------------
#### 함수의 매개변수 초기화 사용 : 코드펜과 타입스크립트 플레이그라운드에서 실습
아래 JS는 https://codepen.io/pen/ 과 TS는 플레이그라운드에서 실행한 결과 https://www.typescriptlang.org/play
---------------------------------------------------------------------------------------------------------------------------------------
function countDown(start:number = 10): ()=>number { // 초기number형의 값을 가지고, 함수형을 반환한다.
return () => start > 0 ? --start : 0; //start-- 일때는 10을 리턴
}
console.log(countDown()());
---------------------------------------------------------------------------------------------------------------------------------------
#### 배열에 전개연산자 사용 : 코드펜과 타입스크립트 플레이그라운드에서 실습
아래 JS는 https://codepen.io/pen/ 과 TS는 플레이그라운드에서 실행한 결과 https://www.typescriptlang.org/play
---------------------------------------------------------------------------------------------------------------------------------------
ES6부터 전개 연산자를 사용할 수 있다. TypeScript 역시 전개 연산자를 지원한다.(아래 TS실습코드)
let numbers:number[] = [101, 21, -12, 934, 87];
// 배열 내부 아이템으로 결합
numbers = [10, 31, 11, ...numbers, -2, 0];
console.log(numbers);
// 배열 ⟹ 개별 아이템으로 순차적 제공
let min_number:number = Math.min(...numbers);
let max_number:number = Math.max(...numbers);
console.log(min_number);
console.log(max_number);
---------------------------------------------------------------------------------------------------------------------------------------
#### 전개연산자를 매개변수에 사용 : 코드펜과 타입스크립트 플레이그라운드에서 실습
아래 JS는 https://codepen.io/pen/ 과 TS는 플레이그라운드에서 실행한 결과 https://www.typescriptlang.org/play
---------------------------------------------------------------------------------------------------------------------------------------
ES6부터 전개연산자를 매개변수에 사용(Rest Parameters라고 불린다)를 사용할 수 있다. 나머지 매개 변수는 함수에서 활용되며 전개 연산자를 매개변수 앞에 붙여 사용한다.(아래)
// 전개연산자를 매개변수에 붙여서 파라미터를 배열로 만든다.
function makeArray(...args:(number|string)[]): (number|string)[] {
return args;
}
console.log(makeArray(11, 'eleven', 100, 'one hundred'));
---------------------------------------------------------------------------------------------------------------------------------------
#### 인덱스index대신 비구조화 할당 사용 : 코드펜과 타입스크립트 플레이그라운드에서 실습
---------------------------------------------------------------------------------------------------------------------------------------
- ES6 엑마스크립트에서 index대신 비구조화 추출로 배열또는 객체의 아이템 또는 속성을 변수에 할당(아래)
// 배열 비구조화 할당 : 1대1 위치로 배열 값을 할당 받는다.
let [html, ,body] = [document.documentElement, document.head, document.body];
console.log(html, body);
// 객체 비구조화 할당 : 비구조인 n 파라미터를 배열로 할당받고 number 형태로 리턴=반환한다.
let calc_module = {
multiply: (...n:number[]):number => n.reduce((a, b) => a * b),
sum: (...n:number[]):number => n.reduce((a, b) => a + b)
};
let { sum, multiply } = calc_module;
console.log(sum(3,4));
console.log(multiply(3,4));
//reduce함수는 n-배열의 각 요소를 반복하며 callback함수-(a,b)의 실행 값을 누적하여 하나의 결과값을 반환한다.- 위 ES6 소스를 플레이그라운드에서 실행한 결과 https://www.typescriptlang.org/play (아래)
- JS 자바스트립트에서 index로 추출로 배열또는 객체의 아이템 또는 속성을 변수에 할당(아래)
// 배열 비구조화 할당 : JS에서는 배열의 인덱스[index]로 값을 할당한다.
var _a = [document.documentElement, ,document.body],
html = _a[0],
body = _a[2];
console.log(html, body);
// 객체 비구조화 할당 : JS에서는 arguments 배열의 인덱스[index]로 값을 할당한다.
var calc_module = {
multiply: function () {
var n = [];
for (var _i = 0; _i < arguments.length; _i++) {
n[_i] = arguments[_i];
}//reduce함수는 n-배열의 각 요소를 반복하며 callback함수-(a,b)의 실행 값을 누적하여 하나의 결과값을 반환한다.
return n.reduce(function (a, b) { return a * b; });
},
sum: function () {
var n = [];
for (var _i = 0; _i < arguments.length; _i++) {
n[_i] = arguments[_i];
}
return n.reduce(function (a, b) { return a + b; });
}
};
var sum = calc_module.sum;
console.log(sum(3,4));
var multiply = calc_module.multiply;
console.log(multiply(3,4));- 위 JS소스를 코드펜에서 실습한 결과 https://codepen.io/pen/ (아래)
- TS타입스크립트에서는 비구조화 할당에 age? 물음표서식 처럼 비할당도 사용가능하다. (아래)
// TS타입스크립트에서는 비구조화 할당에 age? 서식처럼 비할당도 사용가능하다. (아래)
type MemberType2 = { name: string; age?: number }
type JsonArrayType = MemberType2[];
class Users {
users: JsonArrayType = [];
// 생성자-초기화 함수
constructor(users: JsonArrayType) {
this.users = users; // this.user는 클래스의 멤버변수, user는 파라미터 변수
}
addUser(user: MemberType2) {
this.users.push(user); // this.user는 클래스의 멤버변수, user는 파라미터 변수
}
}
let members = new Users([
{ name: "김일국", age: 23 },
{ name: "아무개", age: 20 }
]);
members.addUser({ name: "kim"});// 위 age? 빈값 허용서식의 ?을 제거하면 오류가 난다.
console.log(members.users);- 위 TS 소스를 플레이그라운드에서 실행한 결과 https://www.typescriptlang.org/play (아래)
- Ps. 기술참조 : https://yamoo9.gitbook.io/typescript/
'노드js·자바스크립트' 카테고리의 다른 글
| TS-타입스크립트 확장 코딩 패턴 (0) | 2023.11.02 |
|---|---|
| ES6 vs TS vs 리액트+TS 에서 클래스 사용 (0) | 2023.10.25 |
| 타입스크립트-TypeScript 전용 타입에 대해서 (0) | 2023.10.14 |
| TypeScript-타입스크립트의 특징 (1) | 2023.10.03 |
| 리액트-리덕스 향상된 버전인 리덕스js 툴킷 사용 예 (0) | 2023.10.01 |
댓글 영역