[TypeScript] TypeScript 기본 & 기본 타입 (1)

이 글은 udemy의 Typescript 강의를 보고 정리한 글입니다!

강의 링크: https://www.udemy.com/course/best-typescript-21/
소스 코드: https://github.com/Mirim-Study/Typescript

 

섹션 2: TypeScript 기본 & 기본 타입 (10 ~ 15)

 

Core Types

1. number (숫자형)

정수형이나 실수형을 구분하지 않는다.

ex) 1, 5.3, -10

 

2. string (문자열)

작은 따옴표(''), 큰 따옴표(""), 백틱(``) 세 가지 방법 중 하나로 정의할 수 있다.

백틱은 최신 자바스크립트와 타입스크립트에서도 제공되는 특수 구문으로, 일부 데이터를 동적으로 주입할 수 있는 일반 문자열, 즉, 템플릿 리터럴을 작성할 수 있다.

ex) 'Hi', "Hi", `Hi`

 

3. boolean (불리언)

if 조건문에서 작업할 때 중요하다.

자바스크립트에서는 if 조건문에서 숫자 0을 사용하면 이는 거짓으로 처리되어 거짓 값이 된다.

ex) true, false

 

Type Assignment (타입 배정)

타입을 할당할 변수 다음에 ': type' 을 추가하면 된다.

function add(n1: number, n2: number) {
      return n1 + n2;
}

const num: number;

 

JavaScript와 TypeScript의 차이

JavaScript

자바스크립트는 동적 타입이다. 처음에 숫자형이 할당된 변수에 문자열을 할당하더라도 문제가 없다는 것을 의미한다.

그래서 특정 타입에 의존하는 코드가 있는 경우 런타임에서 현재 타입을 확인할 수 있는 typeof 연산자를 사용한다.

 

typeof 연산자

특정 값의 타입을 알아볼 수 있는 연산자이다.

const num = 5;
console.log(typeof num);   // number

 

TypeScript

타입스크립트는 정적 타입이다. 개발 도중에 변수의 타입을 정의한다. 런타임 중에 타입을 변경하지 못한다. 즉, JavaScript와 반대로 숫자형이 할당된 변수에 문자열을 할당하면 에러가 발생하므로 어떤 타입을 보유할 수 있는지 여부를 명확히 해야 한다.

 

즉, 타임스크립트는 컴파일 중에 확인할 수 있고, 자바스크립트는 타입스크립트의 기능이 자바스크립트 엔진에 내장되어 있지 않기 때문에 런타임 중에 확인할 수 있다. 

 

Type Case (타입 케이스)

타입스크립트에서는 항상 string 또는 number와 같은 타입을 다룬다.

타입스크립트의 주요 원시 타입은 모두 소문자이다.

ex) String, Number가 아니라 string, number이다.

 

Type Inference (타입 추론)

특정 변수나 상수에 어떤 타입을 사용했는지 타입스크립트가 이해한다는 것이다. 아래와 같이 변수에 바로 값을 대입하는 경우에는 타입 배정을 안 하는 것이 좋다. 하지만, 변수를 먼저 선언하는 경우에는 타입 배정을 하는 것이 좋다.

const num: number = 5;  // X (안 좋은 방법)

// 첫 번째 방법
const num2 = 5;

// 두 번째 방법
let num3: number; 
num3 = 5;