클래스 활용

• 클래스를 JavaScript 통해 정의하는 경우 생성자를 사용하여 초기화를 하는 경우 프로퍼티를 작성하지 않아도 됨

• 생성자를 통해 초기화만 하면 프로퍼티 사용 가능

• TypeScript에서 클래스를 사용하는 경우 접근 제어자 사용 가능(java에서 사용하는 접근 제어자와 유사함)

• 예시 코드

  // 클래스에 추가적으로 프로퍼티를 정의하지 않아도 생성자로 받은 id, task, complete
  // 프로퍼티는 접근 가능함
  class TodoItem {
  	constructor(id, task, complete) {
  		this.id = id
  		this.task = task
  		this.complete = complete
  	}
  }
  
  // TypeScript에서는 클래스를 정의하는 경우 접근 제어자 사용 가능
  class TodoItem {
  	public id: number
  	public task: string
  	public complete: boolean
  
  	constructor(id: number, task: string, complete: boolean) {
  		this.id = id
  		this.task = task
  		this.complete = complete
  	}
  }
  
  // TypeScript에서는 JavaScript 예시처럼 사용하면서 접근 제어자 사용 가능
  class TodoItem {
  	constructor(public id: number, public task: string, public complete: boolean) {
  		this.id = id
  		this.task = task
  		this.complete = complete
  	}
  }
  

타입 지정 활용

• Java 처럼 변수에 타입을 지정할 수 있음

• 변수에 타입을 지정하면 해당 변수에 다른 값을 대입할 수 없음

• 객체 리터럴에 대한 타입 정의는 해당 리터럴 객체가 갖는 각각의 프로퍼티에 대한 타입을 정의하는 형태

• 예시 코드

  // 원시 타입
  const name: string = 'Kim'
  const age: number = 20
  const hasName: boolean = true
  const nullValue: null = null
  const nothing: undefined = undefined
  
  // 클래스
  const now: Date = new Date()
  
  // 배열
  const colors: string[] = ['red', 'yellow', 'blue']
  const numbers: number[] = [1, 2, 3, 4, 5]
  
  // 리터럴에서의 타입 지정
  const point: { x: number, y: number } = {
  	x: 10,
  	y: 20
  }
  
  // 함수에서의 타입 지정
  // 선언적 함수
  function add(n1: number, n2: number): number {
  	return n1 + n2
  }
  
  // 익명 함수
  const add = function(n1: number, n2: number): number {
  	return n1 + n2
  }
  
  // 람다 함수
  // 먼저 함수 시그니처를 작성하고 이후 실제 사용되는 함수 정의
  const add = (n1: number, n2: number): number => {
  	return n1 + n2
  }
  

가변 인자 활용

• JavaScript에서는 별다른 설정 없이 가변 인자를 활용할 수 있었음

• 하지만 TypeScript에서는 다른 타입의 인자를 받아올 수 없게 되어 있음

• 만약 TypeScript에서 가변 인자를 활용하려는 경우 함수 오버로딩을 통해 활용

• 선택적 매개변수는 함수 호출시 전달 인자를 선택적으로 보낼 수 있는 기능

• 이외에 ES6를 활용하면 기본 매개변수(Default Parameter), 나머지 매개변수(Rest Parameter)사용 가능

• 예시 코드

  function add(firstParam: string, secondParam: string): string;
  function add(firstParam: number, secondParam: number): number;
  function add(firstParam: any, secondParam: any): any {
  	console.log(firstParam + secondParam)
  }
  
  // 선택적 매개변수
  // ?를 사용한 thirdParam은 생략이 가능한 매개변수(즉 있어도 없어도 되는 매개변수)
  function add(firstParam: number, secondParam: number, thirdParam?: number): number
  
  // 기본 매개변수
  // secondParam의 경우 넘어오지 않는 경우 기본값 2로 함수 진행
  function add(firstParam: number, secondParam: number = 2): number
  
  // 나머지 매개변수
  // 매개변수를 배열로 받을 수 있는 방법
  function add(...numbers: number[]): number