TypeScript - Core Syntax & Feature(Core Type)

Core Syntax & Feature

• 타입스크립트가 어떤 type을 제공하고 지원하는지
• type들로 작업하는 방법
• type을 할당하는 방법
• type을 사용하면 얻어지는 이점

Core Types

타입스크립트는 자바스크립트에 덧붙여 더 많은 type을 제공한다. 또한 타입스크립트는 사용자가 정의한 사용자정의의 type도 작성하고 사용할 수 있게 해준다.

 

우선 자바스크립트가 가진 핵심 타입부터 시작해 자바스크립트와 타입스크립트에 각각 어떤 type이 지원되는지 두 언어 사이에 차이점이 의미하는 바를 알아본다.

number

자바스크립&타입스크립트에서 사용하는 핵심타입 중 하나는 number(숫자형)이다. 두개의 언어에서 number type은 하나 뿐이다. 정수형이나 실수형을 세분화 나누는 타입은 존재하지 않는다. 정수, 실수 모두 통틀어 number type에 속한다.

 

보통 다른 프로그래밍 언어에서는 특별히 정수형과 실수형을 나누어 구분하고, 또는 이중형이 존재한다.

 

string

또한 문자열 type도 존재한다. 따옴표,큰 따옴표 백틱과 같은 기호를 이용해 정의할 수 있다.

 

boolean

boolean 값은 자바스크립트에서 참값(truthy)과 거짓값(falsy) 구분해 주는 개념이기 때문에 중요하다. 예를 들어 if 조건 문에서 숫자 0을 사용하면이는 거짓으로 처리 되어 거짓값이 된다.

 

boolean 데이터 type은 참 또는 거짓이라는 두 값만 알고 있을 뿐이다. 이것은 타입스크립트 뿐만 아니라 자바스크립트에서도 마찬가지이다. 여기서 알아 두어야 할 점은 ture와 false 같은 값의 개념은  자바스크립트의  런타임 때 백그라운드에서 작동하는 if조건문에 데이터 타입과는 관련이 없다.

 

이 처럼 숫자형, 문자열, 불리언을 사용하여 몇가지 핵심 데이터 타입을 얻을 수 있다. 물론 우리가 가진 객체 등은 제외한다. 이런 타입들에 초점을 맞추고 타입스크립트가 이 타입들로 무엇을 하는지 또는 타입스크립트의 type으로 무엇을 할 수 있는지 살펴본다. 

 

실습을 위한 실시간 개발 서버 가동

app.ts

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

app.ts 파일에서 몇가지 코드를 작성한 다음 자바스크립트 코드로 컴파일하여 타입스크립트에 type의 기능들을 확인할 수 있다. add 함수와 같은 간단한 함수에는 타입스크립트를 사용할 필요가 없다.

 

app.ts

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

//실습을 위해 두가지 숫자형을 생성
const number1 = 5;
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

tsc app.ts

 

app.ts

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

//실습을 위해 두가지 숫자형을 생성
const number1 = "5";
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

number1 의 값을 숫자형 5에서 문자열 '5'로 바꾼다음 커맨드를 통해 app.ts를 컴파일하면 위 그림에서 와 같이 result 값이 바뀌어 출력되는 것을 확인할 수 있다.

 

왜냐하면 이 출력은  수학적 덧셈의 결과가 아니 문자열을 연결할 것이기 때문이다. 변수 number1에  문자열 '5'를 대입하면 문자열일 뿐이므로 자바스크립트 문자열이 있으니까 문자열에 뭔가를 더해야 겠다고 판단하게 된다.

 

따라서 자바스크립트는 2.8을 숫자형에서 문자열로 변환하여 5와 2.8을 연결함으로 5.28을 산출하고 이를 반환하게 된다.즉, 수학적 방시으로 처리하는 것이 아니라 문자열로 처리하는 것이다. 자바스크립트를 사용하면 이런 일이 발생할 수 있다.

 

함수의 매개변수에 type할당하기

app.ts

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

//실습을 위해 두가지 숫자형을 생성
const number1 = "5";
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

위 코드를 컴파일하려고 하자 문자열 "5"라는 유형의 인수는 숫자형 타입의 매개변수에 할당할 수 없다는 error가 출력된다. 게다가 vsCode IDE자체에서도 컴파일 하는 것으로 넘겨버리는 것에 대비 9번 라인에서 에러가 발생했다고 보고한다.

 

이것이 타입스크립트의 중요한 점이다. 이러한 error는 컴파일 하는 동안에만 감지된다. 브라우저에는 내장 타입스크립트 지원이 없기 때문에 런타임시에는 자바스크립트가 다른 식으로 작동하도록 변경하지 않는다. 

💡 TypeScript의 type 시스템은 오직 개발하는 동안만 도움을 준다.(즉, 코드가 JavaScirpt로 컴파일 되기전)

 

따라서 타입스크립트로 코드를 작성하는 것은 자바스크립트로 컴파일하기 전인 개발도중에만 유용하겠지만 이는 추가적인 단계와 추가적인 안전성 검사를 하는 것 이기 때문에 아주 유용하다.

 

실수가 있는 경우, 예를 들어, 문자열이어야 한다거나 숫자형이어야 한다면 이를 수정할 수 있다. 하지만 타입스크립트는 런타임 코드를 변경하지 않는다.

 

또한 컴파일 도중 에러를 감지하여 잘못된 결과의 원인이 되는 파일을 생성했음에도 불구하고 타입스크립트는 에러가 포함된 파일을 컴파일해 자바스크립로된 파일을 내보낸다. 즉 기본적으로 타입스크립트는 error에 대해 컴파일을 차단하지 않도, 실수에 대해 지적하고 알려주기만 한다.

 

 

 

 

 

[ 출처 - https://www.udemy.com/course/best-typescript-21/ ]