• 자바스크립트에서 배열은 Array 클래스의 인스턴스이며 생성자를 통해 선언할 수 있다.

• 타입스크립트에서 타입[] 과 같은 형태로 단축 구문을 통해 배열을 선언할 수 있다.

• 자바스크립트에서 배열은 객체이며, Array 클래스에는 배열을 사용하는 데 필요한 여러 가지 메서드를 제공한다.

• person.ts

  export default class Person {
      static numberOfPerson: number = 0;
  
      constructor(
          private name: string,
          private age: number,
          private etc?: boolean
      ) {
          Person.numberOfPerson++;
      }
  
      printInfo(): void {
          console.log(`Person name: ${this.name}`);
          console.log(`Person age: ${this.age}`);
          console.log(`Person etc: ${this.etc}`);
      }
  
      static printNumberOfPerson() {
          console.log(`The Number Of Person Object: ${this.numberOfPerson}`);
      }
  }
  
  type MakePerson = (arg0: string, arg1: number, arg2?: boolean) => Person;
  
  export const makePerson: MakePerson = (name: string, age: number, etc: boolean = false): Person => {
      return new Person(name, age, etc);
  }
  

• index.ts

  import Person, {makePerson} from "./person";
  
  const person = makePerson('Jinwon', 24);
  person.printInfo();
  
  const numbers: number[] = [1, 2, 3];
  const strings: string[] = ['Jinwon', 'haena', 'jongwan'];
  const people: Person[] = [
      makePerson('test', 24, true),
      makePerson('test2', 29)
  ];
  
  console.log(Array.isArray(people));
  

• 실행 결과

  

반복문

• EXNext 자바스크립트와 타입스크립트는 for 문을 좀 더 쉽게 사용하도록 for...in 문을 제공한다.

  • for...in 문은 객체를 대상으로 사용하며, 배열을 사용할 시 각 인덱스에 접근할 수 있다.
  • for...in 문은 배열이 아닌 객체를 대상으로 할 때는 속성을 대상으로 순회한다.

• index.ts

  import Person, {makePerson} from "./person";
  
  const person = makePerson('Jinwon', 24);
  person.printInfo();
  
  const numbers: number[] = [1, 2, 3];
  const strings: string[] = ['Jinwon', 'haena', 'jongwan'];
  const people: Person[] = [
      makePerson('test', 24, true),
      makePerson('test2', 29)
  ];
  
  console.log(Array.isArray(people));
  
  **for (const index in numbers) {
      console.log(`[${index}]: ${numbers[index]}`);
  }
  
  for (const property in person) {
      console.log(`property: ${property}`);
      // @ts-ignore
      console.log(`-> ${person[property]}`);
  }**
  

• for...in 문과는 사용법이 다른 for...of 문도 제공된다.

  • for...of 문은 배열의 아이템 값을 대상으로 순회한다.
  • 여기서 아이템은 인덱스를 참조했을 때 나오는 값(배열에 담긴 값)을 의미한다.

  import Person, {makePerson} from "./person";
  
  const person = makePerson('Jinwon', 24);
  person.printInfo();
  
  const numbers: number[] = [1, 2, 3];
  const strings: string[] = ['Jinwon', 'haena', 'jongwan'];
  const people: Person[] = [
      makePerson('test', 24, true),
      makePerson('test2', 29)
  ];
  
  console.log(Array.isArray(people));
  
  for (const index in numbers) {
      console.log(`[${index}]: ${numbers[index]}`);
  }
  
  for (const property in person) {
      console.log(`property: ${property}`);
      // @ts-ignore
      console.log(`-> ${person[property]}`);
  }
  
  for (const person of people) {
      person.printInfo();
  }
  

• 실행 결과

  

타입 수정자

• 타입스크립트는 readonly 키워드를 제공한다.

  • readonly 타입으로 선언된 매개 변수 값을 변경하는 시도가 있다면 문제가 있는 코드라고 알려줘서 불순 함수가 되지 않게 방지한다.
  • 타입스크립트에서 인터페이스, 클래스, 함수의 매개 변수 등은 let 이나 const 키워드 없이 선언하기 때문에 const 와 같은 효과를 주려면 readonly 가 필요하다.
  • 쉽게 말해 속성을 private 로 선언했음에도 불구하고, person.name 이 아닌 person[name] = ‘test’ 와 같이 접근하면 값이 바뀐다. 이런 경우를 방지하기 위함이다.

• index.ts

  export default class Person {
      static numberOfPerson: number = 0;
  
      constructor(
          **private readonly name: string, 
          private readonly age: number, 
          private readonly etc: boolean,**
      ) {
          Person.numberOfPerson++;
      }
  
  	...
  }