객체와 타입

타입스크립트에는 기본적으로 제공하는 객체와 타입들이 존재합니다.

자바스크립트와 호환되기 위해 타입스크립트 타입은 자바스크립트와 대응되어 제공됩니다.

기본 제공 타입

유형자바스크립트 타입타입스크립트 타입
숫자 타입Numbernumber
불리언 타입Booleanboolean
문자열 타입Stringstring
객체 타입Objectobject

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

Leave a Comment