타입스크립트에는 기본적으로 제공하는 객체와 타입들이 존재합니다.
자바스크립트와 호환되기 위해 타입스크립트 타입은 자바스크립트와 대응되어 제공됩니다.
기본 제공 타입
유형 | 자바스크립트 타입 | 타입스크립트 타입 |
---|---|---|
숫자 타입 | Number | number |
불리언 타입 | Boolean | boolean |
문자열 타입 | String | string |
객체 타입 | Object | object |
const와 let 키워드
const와 let 타입은 변수 앞에 선언하는 키워드 입니다.
TypeScript를 사용할 때 가장 많이 사용할 키워드이자 많이 헷갈릴 수 있는 키워드 입니다.
변수를 선언할 때 기존에는 var 키워드를 사용했지만 이제는 사용을 금지하고 대체하기 위한 키워드로 const와 let은 만들었습니다.
let 키워드는 변경 가능한 변수를 선언할 때 사용합니다.
const 키워드는 처음 초기화 후 변경하지 않는 변수를 선언할 때 사용합니다.
let 변수 이름 = 초기 값(선택)
const 변수 이름 = 초기 값(필수)
타입 주석
타입 주석은 변수에 타입을 명시할 수 있습니다.
타입스크립트가 자바스크립트에서 부족한 타입 명확성을 체우기 위해 개발된 언어입니다.
그렇기에 정확한 타입을 명시하기 위해 타입 주석을 사용합니다.
let 변수 이름: 타입 = 초기 값
const 변수 이름: 타입 = 초기 값
JavaScript와 가장 큰 차이는 앞에 타입이 붙습니다.
타입 주석을 사용하는 이유는 선언된 변수에 다른 타입이 들어와 혼란을 주는 것을 막기 위함입니다.
const는 선언 시 값이 정해지기 때문에 문제가 없습니다.
let은 선언 후에도 값이 갱신 될 수 있기 때문에 타입 주석을 꼭 사용해야합니다.
타입 주석을 쓰고 다른 타입의 값을 저장하면 오류가 발생합니다.
let a: number = 1
a = 'a' // 타입 불일치 오류 발생
타입 추론과 Any 타입과 undefined 타입
앞서 타입 주석에 대해 말씀드렸습니다.
하지만 타입을 꼭 선언하지 않더라도 오류는 발생하지 않습니다.
그 이유는 TypeScript에는 타입 추론 기능이 있기 때문입니다.
타입 추론은 TypeScript와 JavaScript간에 호환성을 위해 만들어졌습니다.
아래와 같이 코드를 작성하면 알아서 타입을 추론하여 값을 저장합니다.
let a = 1 // number Type
let b = 'Hi!' // string Type
let c = [] // Array Type
이렇게 넣는다고 다른 타입의 값을 재설정 할 수 있는 것은 아닙니다.
혼돈하면 안됩니다.
그 다음은 Any 타입입니다.
any는 타입과 무관하게 어떤 종류의 값도 저장할 수 있는 타입입니다.
let a: any = 0
a = 'str'
a = true
이와 같이 어떤 타입이든 저장하고 싶다면 위 코드처럼 선언해서 사용하면 됩니다.
하지만 권장하는 타입은 아닙니다. 혼동이 올 수 있기 때문입니다. 차라리 새로운 변수를 선언해서 사용하는 걸 추천 드립니다.
undefined 타입은 변수를 초기화 하지 않을 때 기본적으로 가지고 있는 타입입니다.
TypeScript에서는 undefined가 타입과 값으로 존재합니다.
JavaScript는 값으로만 존재합니다.
let a: undefined = undefined
a = 1 // 타입 불일치 에러
undefined는 모든 타입에서 하위에 위치합니다.
그래서 상위 타입인 number, boolean, string, object 등에 타입을 넣을 수 없습니다.
any는 최상위 타입으로 모든 타입을 받을 수 있습니다.
템플릿 문자열
변수에 담긴 값을 조합해 문자열로 만드는 방식으로 템플릿 문자열이 있습니다.
TypeScript는 역따옴표(“)로 문자열을 감싸고 변수를 ${}로 감싸는 형태로 만들 수 있습니다.
`${name}을 출력합니다.`
아래는 사용 예시입니다.
const count = 20
const name = 'cent'
console.log(`${name}의 나이는 ${count}입니다.`)
함께 보면 좋은 글
TypeScript Vs Javascript – [타입스크립트 시리즈 1]
참고
https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/object