[Typescript] 15장 이터러블 타입

1. for..of 문 

for..of문은 이터러블 객체(ex.배열, 문자열, 맵, 세트 등)의 각 요소에 대해 반복할 수 있는 구문으로, 이터러블 객체는 Symbol.iterator 메소드를 구현해야 합니다.

const array = [1, 2, 3];
for (const value of array) {
  console.log(value); // 1 2 3
}

---

2. for..of vs for..in 문

• for..of: 이터러블 객체의 값을 반복
• for..in: 객체의 속성 이름(키)을 반복

const array = [1, 2, 3];

console.log('for..of:');
for (const value of array) {
  console.log(value); // 1,2,3
}

console.log('for..in:');
for (const index in array) {
  console.log(index); // 0,1,2
}

---

3. ES5 및 ES3 타게팅 (Targeting ES5 and ES3)

타입스크립트는 다양한 ECMAScript 버전으로 컴파일 할 수 있고, target 옵션을 통해 ES5 또는 ES3로 설정 시 다음과 같은 사항이 있습니다.

• ES5 타게팅:
  
  • ES5는 2009년에 발표된 ECMAScript 버전으로, 대부분 브라우저에 지원
  • 타입스크립트에서 ES5로 컴파일 시 ES6(ex.let, const, array, functions, for..of 등)을 ES5에 맞게 변환함
  • 예를 들어, for..of 문은 전동적인 for 루프나 Array.prototype.forEach로 변환
• ES3 타게팅:
  • ES3는 1999년에 발표된 ECMAScript 버전으로, 매우 오래된 자바스크립트 버전
  • ES3로 컴파일 시, 타입스크립트는 ES5에서 제공하는 대부분의 기능을 사용할 수 없게 됨
  • 따라서 현대적인 자바스크립트 기능이 필요한 경우 ES3 타게팅은 추천되지 않음
• tsconfig.json 예시:

{
  "compilerOptions": {
    "target": "ES5" // 또는 "ES3"
  }
}

---

5.ECMA Script 2015 및 상위 버전 타게팅 

ECMAScript 2015 (ES6) 및 그 이후 버전으로 타게팅할 경우, 최신 자바스크립트 기능을 그대로 사용할 수 있습니다, 이 설정의 장점으로는 다음과 같습니다. 

• 모던 문법 지원:
  
  • ES6의 주요 기능인 let, const, 템플릿 리터럴, 클래스, 모듈, 화살표 함수, Promise, async/await 등을 사용할 수 있음
  • 이터러블 객체에 대한 for..of 문을 직접 사용할 수 있어 코드가 더욱 간결해짐
• 호환성:
  • ES6 이상으로 타게팅하면, 최신 브라우저와 Node.js 환경에서 실행할 수 있는 자바스크립트 코드를 생성
  • 다만, 구현 브라우저에서는 ES6 기능이 지원되지 않기 때문에, 필요한 경우 Babel과 같은 트랜스파일러를 사용하면 호환성 유지할 수 있음
• tsconfig.json 예시:

{
  "compilerOptions": {
    "target": "ES6" // 또는 "ES2017", "ES2018" 등
  }
}

---

 

GitHub - Koras02/typescript-bloging