TypeScript - 타입과 옵셔널 (1) Number, Optional

Younkyum J·2022년 6월 30일
0

TypeScript

목록 보기
1/8
post-thumbnail

TypeScript에서의 변수 선언

TS에서의 타입 지정은 변수 선언에서 진행된다.

const a : number = 1
const b : string = "hello TS"
const c : boolean = false

예시와 같이, const (변수명) : (변수 타입) = (값) 의 형태로 선언하면 된다.

명시적 타입 선언

const (ValueName) : (Type) = (Value)

하지만 많은 일반적 함수들이 그렇듯이, 암묵적으로 변수를 선언하더라도 TS는 타입 추론을 해준다.

암묵적 타입 선언

const (ValueName) = (Value)
const a = 1
typeof(a) // number
const b = "hello TS"
typeof(b) // string
const c = false
typeof(c) // boolean


TypeScript에서의 옵셔널

옵셔널의 이해

옵셔널은 기본적으로 값이 있을수도 없을수도 있는 변수를 만드는 것이다.
예를 한번 들어보면, 한 반의 학생들의 정보가 이렇게 있다고 해보자.

이름학년전화번호
홍길동101012345678
김철수2
김영희201098765432
박민수301011112222

이때, 김철수는 전화번호가 없으므로, 이런식으로 type을 설정할 경우 오류가 생긴다.

type Student = {
  name: string,
  grade: number,
  phoneNumber: number
}

하지만 여러가지 데이터들을 주고 받을 경우 이런 오류가 생기는 것은 치명적이다.
이러한 문제를 해결하고자, TS는 옵셔널을 지원한다.

옵셔널(Optional)은 있을수도, 없을 수도 있는 변수를 저장하기 위해 있다.


옵셔널 선언

TS에서 옵셔널은 다음과 같이 사용한다.

type Student = {
  name: string,
  grade: number.
  phoneNumber?: number
}

변수 이름 옆에 ?를 함으로써 Optional을 사용할 수 있다.

옵셔널의 사용

TS에서 값이 없는 변수는 Undefined를 리턴한다.

const kimCheolSu : Student = {
  name: "김철수",
  grade: 2
}

typeof(kimCheolSu.phoneNumber) // Undefined

따라서, 옵셔널을 사용하여 IF문을 사용할 경우 추가적인 선언이 필요하다.
if (kimeCheolSu.phonNumber == 01012345678) { 
  // Do Somthing
} // Error 발생 - Object is possibly 'undefined'.


if (kimCheolSu.phonNumber && kimeCheolSu.phonNumber == 01012345678) {
  // Do Something
}  


TypeScript에서의 함수의 리턴 타입

TS에서는 함수의 리턴타입을 지정해줄 수 있다.

함수의 리턴타입 지정

함수 선언 단계에서 리턴타입을 지정해주면 된다. 이렇게 지정해준 리턴타입은 코드 안정성을 높이는데 큰 도움이 된다.

function divide(a, b) : number { // ReturnType 지정
  return a / b
}

함수의 축약 선언

함수의 내용이 축약 가능하다면 다음과 같은 OOP식 선언도 가능하다.

const divide = (a: number, b: number) : number => (a / b)





기본적으로 이전에 Swift를 공부해서 그런지 옵셔널이 나왔을 때 되게 반가웠다. 그리고 이전까지 배운 언어들이 python을 제외하면 모두 타입에 엄격한 C#과 Go, Swift여서 그런지 크게 개념적 어려움이 생기지는 않았던 것 같다.

*본 내용은 노마드코더 "Typescript로 블록체인 만들기"에서 습득한 내용을 바탕으로 재구성한 것 입니다.

profile
기획자입니다. 근데 이제 고양이와 애플덕후와 개발을 곁들인.

0개의 댓글