[TypeScript] 타입스크립트의 기본 개념

 

 

TypeScript란?

JavaScript의 "슈퍼셋" 언어

자바스크립트의 확장 언어라고 생각하면 되는데, 이게 굉장히 처음 시작하는데 있어서 중요한 개념입니다.

왜일까요? 자바스크립트를 기반으로 하기 때문인데요, 즉, 뿌리가 자바 스크립트이다 라고 생각하시면 됩니다.

 

문법이나 for문 등 기본적인 것들은 사용법을 그대로 사용합니다.

js문법 + 몇가지 기능들 추가 

 

TypeScript의 특징들은?

1. 정적 타입이다

변수의 타입을 명시적으로 지정해서 사용합니다.

컴파일 단계에서 타입체크를 하기 때문에 코드  중 타입 오류를 방지하는 타입 체킹 기능인 '타입 어노테이션'을 활용하여 에러를 빠르게 발견할 수 있게 도와줍니다.

 

2. 컴파일 언어이다

 

소스코드 전체를 컴퓨터가 이해할 수 있는 기계어로 변환하는 언어입니다.

런타입 상황에서 모든 소스코드가 변환되어 있기에 빠르게 실행할 수 있습니다.

 

3. 초기 세팅이 어렵다

타입스크립트는 독자적인 언어가 아니기 때문에 기존의 자바스크립트 엔진에서 실행됩니다.

이를 위해 기본적으로 설치해야 하는 모듈들이 있고, 컴파일을 하기 위한 옵션들도 설정해야 합니다. 

 

이를 보완하기 위해 ‘Create React App’, ‘Vue CLI’, ‘Angualr CLI’ 초기 세팅 도구를 활용할 수 있는데요.

이 도구들은 TypeScript를 기본적으로 지원하고, 프로젝트 구조와 컴파일 옵션을 자동으로 설정해 주어 보다 편리하게 

사용할 수 있습니다.

TypeScript 설치 명령어

npm init -y    // package.json생성

npm install typescript

이렇게 두 가지 명령어를 터미널에 입력하게 되면, 타입스크립트의 설치는 끝납니다.

 

브라우저에서 타입스크립트르 실행하려고 해도 되지 않을텐데요, 자바스크립트의 형태로 실행해야 결과물을 볼 수 있습니다.

TypeScript 기본 개념

간단하게 기본 개념들을 적어보도록 하겠습니다. 

기본형 : 숫자, 문자열, boolean, null, undefined

뒤에 타입을 표시해 나타냅니다.

let age:number;

다른 타입을 하면 에러가 납니다. 

값을 할당하지 않고도 선언 가능합니다

 

배열

strng에서 끝나지 않고 대괄호를 쓰면 알게 됩니다 알아서

아무거나 다 가능하고, boolean string등 가능합니다.

 

배열 값 안에 다른 타입의 값을 쓰면 에러 발생

 

타입 추론

설명을 위해 변수를 하나 만들어 보겠습니다

let course='react-the complete guide';
course=12341;

이렇게 하면 에러가 발생하는데요, 왜 에러가 발생할까요?전혀 타입을 지정하지 않았는데?

기본적으로 타입스크립트는 추론하려고 합니다. 명시적인 타입 표기가 없어도

이 말은 즉,

저희가 쓸 코드가 적어진다는 얘기죠.

 

타입을 적어도 되지만 적어도 타입추론을 사용하는게 좋습니다.

 

유니온 타입(Union Type)

여러개의 타입을 지정할떄 사용(값과 타입을 좀 더 유연하게 적용할 수 있도록 함)

 

방법은 무엇일까요?

첫번째 타입 뒤에 파이프 문자( | ) 를 넣고 뒤에 다른 타입을 적으면 됩니다.

 

let course:string|number

이런식으로 적고자 하는 타입을 뒤에 파이프 문자( | ) 를 적은 뒤에 계속 늘려가면 됩니다. 

그러면 여러 타입을 지정할 수 있고, 에러도 안나게 됩니다.

 

타입 별칭

타입스크립트를 계속 타입을 지정해서 코딩을 하다보면, 타입을 지정한 코드가 여러 번 있게 될것입니다.

본 타입을 만들어 거기에 복잡한 타입을 만들고 그 타입 별칭을 사용함

리액트로 예를 들자면, 컴포넌트를 사용하는 것과 비슷하고 생각하면 됩니다.

 

예시의 코드를 보도록 하겠습니다.

type Person={
name:string;
age:number;
};

이렇게 선언을 한 뒤, person이라는 타입에 지정해놓은 같은 타입을 사용하고 싶다면, 타입 지정 대신 Person  이라고 타입이 들어갈 자리에 넣으면 됩니다. 

 

let person:타입 지정 대신 Person

 

필요한 모든 곳에 반복해서 사용하고 단독으로 사용해도 됩니다.

또한 배열로도 바꿔서 사용할 수 있죠

코드가 간결해지고 코드 바꾸기도 수월해진다는 장점이 있습니다.

 

Function & Types

변수 타입에도 타입을 지정할 수 있습니다.

function add(a:number,b:number){
return a+b;
}

알아서 반환되는 값을 스스로 갖고 있고 추론합니다. 

명시적으로 지정할 수도 있습니다.

 

 

이렇게 지금까지 타입스크립트를 시작하면서 알아야 하는 기본 개념들을 정리해 보았습니다.

다음에는 TypeScript + React와 함께 하는 블로그를 들고오겠습니다. 긴 글 읽어주셔서 감사합니다!