타입스크립트를 사용하는 이유와 기본적인 기능

타입스크립트를 사용하는 이유는 다양할 것입니다.

 

C#을 주로 사용하다가 자바스크립트의 세계로 입문하고 싶었다거나

자바스크립트를 사용하면서 정적이지 않은 프로그래밍에 지쳤다거나 등

 

제가 생각하는 타입스크립트를 사용하는 가장 유력한 이유는 오류를 내뱉는 시점라고 생각합니다.

 

자바스크립트는 원하지 않은 연산도 최선을 다해 결과를 도출해냅니다.

예를들어 1+[]과 같은 다른 타입끼리의 연산이 있을 수 있겠습니다.

 

이런 기능이 도움이 될 수도 있겠지만 버그를 쉽게 확인하는데는 전혀 도움이 되질 않습니다.

 

타입스크립트는 이런 버그를 알려줄 뿐만 아니라 코드를 입력하는 순간 곧바로 에러 메시지를 발생시킵니다.

3 + [] // 에러 TS2365: '3' 타입과 'never[]' 탕입에 연산자 '+'를 적용할 수 없음

let obj = {}
obj.foo // 에러 TS2339: '{}' 타입에 'foo' 프로퍼티가 존재하지 않음

function a(b:number) {
	return b / 2
}
a('2') // 에러 TS2345: 'number' 타입의 매개변수에 '2'라는 인수 타입을 할당할 수 없음

 

 

1. 어노테이션으로 타입 지정하기

let a:number = 1
let b:string = 'hello'
let c:boolean[] = [true,false]

어노테이션은 'valse:type'형태로 쓰이며 변수에 타입을 고정해줍니다.

 

2. 자동으로 타입 지정하기

let a = 1
let b = 'hello'
let c = [true,false]

타입스크립트는 변수에 값을 할당함과 동시에 변수의 타입을 고정해줍니다.

a의 타입은 number, b의 타입은 string, c의 타입은 boolean[]

 

타입스크립트가 타입을 추론하도록 두는 것이 코드를 줄일 수 있는 방법이기에 보통 어노테이션을 사용하지 않습니다

 

타입 시스템 기능	자바스크립트	타입스크립트
타입 결정 방식	동적	정적
타입이 자동으로 변환되는가?	yes	no(대부분)
언제 타입을 확인하는가?	런타임	컴파일 타임
언제 에러를 검출하는가?	런타임(대부분)	컴파일 타임(대부분)

 

 

 

 

 

 

타입이란 값과 이 값으로 할 수 있는 일의 집합을 의미합니다.

boolean 타입은 모든 불(참과 거짓 중 하나)과 불에 수행할 수 있는 모든 연산(||,&&,! 등)의 집합입니다.

number 타입은 모든 숫자와 숫자에 적용할 수 있는 모든 연산(+,-,*,/,%,||,&&,? 등)의 집합입니다.

string 타입은 모든 문자열과 문자열에 수행할 수 있는 모든 연산(+,||,&& 등), 문자열에 호출할 수 있는 모든 메서드(.concat, .toUpperCase 등)의 집합입니다.

 

any

any는 타입의 대부입니다. any로 뭐든지 할 수 있지만 꼭 필요한 상황이 아니라면 사용하지 않는 것이 좋습니다. 타입스크립트를 사용하는 의미가 없어지기 때문입니다.

 

의도적으로 옳지 않은 연산을 할 때 사용합니다.

let a:any = 666;
let b:any = ['danger'];
let c = a + b

앞서 자바스크립트에서 예시로 사용한 이상한 연산입니다.

숫자와 문자열 배열을 더했지만 타입스크립트에서도 결과를 도출해냅니다.

위와 같은 연산을 의도한다면 any를 사용해도 좋습니다.

 

unknown

타입을 미리 알 수 없는 어떤 값이 있을 때 any 대신 unknown을 사용합니다. any처럼 unknown도 모든 값을 대표하지만, unknown의 타입을 검사해 정제(refine)하기 전까지는 타입스크립트가 unknown 타입의 값을 사용할 수 없게 강제합니다.

말이 어려우니 예시를 들겠습니다.

let a:unknown = 30; // unknown
let b = a === 123 // boolean
let c = a + 10 // 에러 TS2571: 객체의 타입이 'unknown'임
if (typof a === 'number') {
	let d = a + 10 // number
}

 

 

위 예제에서 unknown의 3가지 규직을 볼 수 있습니다.

1. 타입스크립트가 무언가의 타입을 unknown이라고 추론하는 상황은 없다. unknown 타입을 사용하고자 한다면 개발자가 명시적으로 설정해야한다. (변수 a 선언)

2. unknown타입이 아닌 값과 unknown타입인 값을 비교할 수 있다. (변수 b 선언)

3. 하지만 unknown 값이 특정 타입이라고 가정하고 해당 타입에서 지원하는 동작을 수행할 수는 없다(변수 c 선언), 먼저 타입스크립트에게 해당 값이 특정 타입임을 증명해야 한다.(변수 d 선언)

 

 

boolean

let a = true // boolean
let b = false // boolean
let c = true // true
let d:boolean = true // boolean
let d:true = true // true
let f:true = false //에러 TS2322: 'false' 타입을 'true'타입에 할당할 수 없음

 

1. 어떤 값이 boolean인지 타입스크립트가 추론하게 한다(a,b)

2. 어떤 값이 특정 boolean인지 타입스크립트가 추론하게 한다.(c)

3. 값이 boolean임을 명시적으로 타입스크립트에 알린다(d)

4. 값이 특정 boolean임을 명시적으로 타입스크립트에 알린다(e,f)

 

4번째가 특이 한데 오직 하나의 값을 나타내는 타입이며 이를 타입 리터럴이라고 합니다.

 

number

let a = 1234 //number
var b = Infinity * 0.10 // number
const c = 5678 // 5678
let d = a < b // boolean
let e:number = 100 //number
let f:26.218 = 26.218 //26.218
let g:26.218 = 10 //에러 TS2322: '10' 타입을 '26.218'타입에 할당할 수 없음

 

1. 타입스크립트가 값이 number임을 추론하게 한다(a,b)

2. const 를 이용해 타입스크립트가 값이 특정 number임을 추론하게 한다(c)

3. 값이 number 임을 명시적으로 타입스크립트에 알린다.(e)

4. 타입스크립트에 값이 특정 number임을 명시적으로 알린다(f,g)

 

 

Bigint

number는 253까지의 정수를 표현할 수 있지만 bigint를 이용하면 이보다 큰 수도 표현할 수 있다고 합니다.

let a = 1234n // bigint
const b = 5678n //5678n
var c = a + b //bigint
let d = a < 1235 // boolean
let e = 88.5n // 에러 TS1353: bigint 리터럴은 반드시 정수여야 함
let f:bigint = 100n //bigint
let g:100n = 100n //100n
let h:bigint = 100 //에러 TS2322: '100'타입은 'bigint'타입에 할당할 수 없음

 

 

String

let a = 'hello' // string
var b = 'billy' // string
const c = '!' // '!'
let d = a + '' + b + c // string
let e:string = 'zoom' // string
let f:'john' = 'john' // 'john'
let g:'john' = 'zoe' // 에러 TS2322: 'zoe' 타입을 'john'타입에 할당할 수 없음

 

 

타입스크립트를 사용하는 이유와 기본적인 타입들에 대해 알아봤습니다.

 

다음글에선 객체타입에 대해 알아보겠습니다.