[TIL] 2021/03/05 Sat - 타입스크립트의 타입

 

 

Today I Learned

 

오늘은 타입스크립트의 타입과 인터페이스에 대해서 공부했다.

 

타입스크립트의 기본 타입

 

타입스크립트의 기본 타입에는 크게 12가지가 있으며, 타입을 정의할 때는 콜론(:)과 함께 타입을 선언하는 타입 표기(Type Annotation)라고 하는 방식을 사용한다.

 

- Boolean

- Number

- String

- Object

- Array

- Tuple

- Enum

- Any

- Void

- Null

- Undefined

- Never

 

String

let str: string = 'hello'

 

Number

let num: number = 10

 

Array

Array는 타입을 선언할 때 아래의 두 가지 표기 방식을 사용할 수 있다. 두 방식 모두 타입은 Array이며, Array의 요소로서 number만 담을 수 있음을 정의한 것으로, 두 번째 표기 방식은 배열을 리터럴로 표현한 것일뿐 Array<number> 와 동일한 의미를 가진다.

 

let items: Array<number> = [1, 2, 3]
let items: number[] = [1, 2, 3]

 

Tuple

Array에서 모든 인덱스의 타입까지 정의할 때 사용한다. 리터럴 표기 방식의 [] 안에 각 인덱스의 타입을 지정한다.

 

let myAddress: [string, number] = ['boramae', 24]

 

Object

객체를 정의할 때는 Object 타입까지만 정의하거나 Object value의 타입까지 구체적으로 정의할 수도 있다.

 

let obj: object = {}

// 구체적 정의
let person: { name: string; age: number } = {
  name: 'zubetcha',
  age: 29,
}

 

Boolean

let show: boolean = true

 

타입스크립트의 함수 타입

 

파라미터와 반환 값 타입

함수의 타입을 정의할 때는 파라미터의 타입과 반환 값의 타입을 정의할 수 있다. 함수의 파라미터에 타입을 정의하면 해당 함수의 파라미터로 받아야 하는 값의 타입과 개수를 엄격하게 확인하여 제한하는 특성을 가지게 되어 정확히 일치하지 않으면 에러를 발생시킨다. 반면에 자바스크립트의 경우 예를 들어 함수의 정의부에 세 번째, 네 번째 파라미터가 정의되어 있지 않은데도 실행문에서 세 번째, 네 번째 파라미터를 넘겨도 에러를 발생시키지 않는다.

 

// 함수의 파라미터에 타입 정의
function sum(a: number, b: number) {
  return a + b;
}

// 함수의 반환 값에 타입 정의
function add(): number {
  return 10;
}

// 함수에 타입 정의
function sum2(a: number, b: number): number {
  return a + b;
}

 

Optional Parameter

함수의 파라미터 개수를 필요에 따라 유연하게 설정하고 싶다면 물음표를 사용하면 된다.

 

function log(a: string, b?: string) {}
log('hello world')
log('hello ts', 'abc')

 

---

인터페이스 섹션도 강의를 들었는데 공부가 더 필요할 것 같아서 내일 더 찾아보고 정리해 봐야겠다.