[TS series] TS 기본문법 #1

_sqrlkoo·2022년 12월 5일
0

TypeScript

목록 보기
1/12
post-thumbnail

* TypeScript를 사용하는 이유

TypeScript(이하 TS)는 정적타입의 검사기로서 코드 실행전 프로그램 데이터의 종류나 타입을 검사합니다.

갑자기 정적타입의 언어?

정적언어라는 것은 '타입' 즉 자료형을 컴파일 시에 결정하는 것 입니다.
우리가 잘 알고 있는 Java, C+ 등이 이에 해당합니다.
이 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야 합니다.

반대로, 동적언어란 JavaScript, Python과 같이 컴파일 시 자료형을 정하는 것이 아니고 실행 시에 결정하는 언어들을 말합니다.

동적언어의 장점은 Run Time까지 타입의 대한 결정을 끌고 갈 수 있기 때문에 많은 선택의 여지가 있습니다.

하지만 인터프리터 언어는 배우기 쉽지만 실행 도중에 변수에 예상치 못한 타입이 들어와 Type Error을 발생시키는 경우가 생길 수 있습니다.

이러한 단점을 개선하고자 TS는 JS에서 코드를 실행하기 전 오류를 확인하여 만약 프로젝트가 커질 경우 예상치 못한 오류를 개선해 주기위해 사용합니다.

본문에 들어가기 앞서 코드 한 줄 살펴보도록 하겠습니다.

let name = "jangwoo";

우리가 흔히 JS를 사용하여 변수를 선언하였습니다.

만약 TS로 변수를 선언 해 볼까요?

let name: string = "jangwoo";

위 코드처럼 TS를 사용하면 ": string" 처럼 타입을 직접 부여 해야합니다.
그리고 이것은 타입 애너테이션(annotation)이라고 불립니다!

추가로 지정해준 타입을 JS로 컴파일링하면 ":string" 같은 지정된 타입 애너테이션 코드는 사라지게 됩니다.

위 사진은 TS코드를 JS로 컴파일링을 마친 상태의 코드입니다. 보시다시피 ": string" 이라는 코드가 사라진 것을 볼 수 있습니다!

✨ 해당 링크를 통해 TS를 설치하지 않아도 경험할 수 있습니다.
https://www.typescriptlang.org/play?#code/Q

* Type Inference

TS는 똑똑해서 모든타입을 지정하지 않아도 Type Inference (타입 추론)을 통해 자동적으로 타입을 부여합니다. (다만, 모든 상황에서 해당되는 것은 아닙니다!!!!)

예를들어

let movie = "king";
movie = "queen";
movie = 3;

위 코드가 있으면 결과는 다음과 같습니다.
그리고 해당 오류를 마우스로 오버하면 이렇게 나오죠.

이처럼 TS는 타입 추론을 통해 직접적으로 타입을 부여하지 않아도 자동적으로 타입을 부여합니다.

( 다만, 모든 상황에서 해당되는 것은 아니니 타입을 모두 부여해 주는게 가장 좋다고합니다!!!!)

* any type

any type은 말 그대로 어떤 타입도 받을 수 있다는 말인데요.
TS에서 기본적으로 타입 확인없이 사용할 수 있습니다.
( 일반적으로는 TS를 사용하는 이유와 거리가 멀어 잘 사용하지 않습니다!! )
다음 사진처럼 타입을 직접 지정해주지 않고, 변수 선언 뒤 할당을 해주지 않으면 타입은 "any"를 가리킵니다!

0개의 댓글