[Typescript] 타입스크립트(Typescript) 설치부터 기초 문법까지

TypeScript란?

타입스크립트(Typescript)는 JavaScript 코드를 대부분 그대로 사용할 수 있으면서도 추가적인 정적 타입 체크와 객체 지향 프로그래밍 기능을 제공합니다. 동적언어(dynamic typing)인 javascript에 정적 타입을 추가한 언어로, javascript의 확장이라고 볼 수 있습니다. 크기가 큰 프로젝트를 다루고 있는 곳이라면 Javascript가 아닌 타입스크립트(Typescript)를 많이 사용하고 있는 추세고 웹개발자 채용 공고에서도 타입스크립트(Typescript)의 요구를 어느 정도 요구하고 있습니다.

 

왜 타입스크립트(Typescript)를 사용하는가?

javascript와 같은 동적 타이핑은 편리한데 프로젝트의 규모가 커지게 되면 단점으로 적용될 수 있습니다. (코드가 길어지면 자유도와 유연성은 오히려 단점으로 적용)

1. 정적 타입

자바스크립트는 동적 타이핑은 이런 것도 가능합니다.

 console.log(5 - '3') // 2

원래는 (숫자 - 숫자)만 가능하지만 Javascript는 동적 타이핑을 제공하기 때문에 Javascript가 알아서 '3'을 숫자로 바꿔서 연산을 알아서 해줍니다.

 

하지만 타입스크립트(Typescript)를 사용하게 되면 에러로 잡아 줍니다.

 // TypeScript는 타입 엄격하게 검사 해줌
 console.log(5 - '3') // TS error: '문자랑 숫자빼는거 이상함'

 

javascript에 익숙해진 사람들은 굳이 타입스크립트(Typescript)를 써야 하는지 생각할 수 있지만 소스코드가 1000줄 이상 넘어가고, 남이 작성한 javascript 수정할 일이 생기면 그런 생각이 바뀐다네요..

2. 정확한 에러메시지 안내

type 부분을 엄격하게 집어주는 것 덕분에 에러메시지가 정확해집니다. javascript는 에러메시지가 추상적이고 추적 어려운 것들이 많은데 타입스크립트(Typescript)는 엄격하게 type을 체크해 주기 때문에 에러메시지를 정확히 짚어줍니다. (오타 체크도 해줌)

타입스크립트(Typescript)를 언어보다는 일종의 에디터 부가기능 역할(오타 잡아주는)로 봐도 될듯합니다. 왜냐하면 javascript랑 문법이 거의 동일하고 type 부분만 지정해 주면 되기 때문입니다.

---

Typescript 설치하기 (static 웹페이지(정적 페이지) 개발 시 가정)

1. Node.js 최신버전, VScode 에디터 설치

Node.js 최신 버전이 아니면 에러가 잦기 때문에 최신버전으로 설치합니다.

2. VScode 에디터에서 터미널을 오픈합니다

상단메뉴 Terminal - New Terminal ( 단축키 ctrl + ` )

3. 터미널 명령어 입력

npm install -g typescript typescript

컴파일러 설치하는 건데 컴퓨터마다 1번만 하면 됩니다.

 

에러가 난다면!!

• node.js 최신버전이 아닐 수 있기 때문에 삭제 후 최신 버전으로 재설치
• 윈도에서 에러가 뜬다면 [시작 - 검색 - pwershell - 우클릭해서 관리자 권한으로 실행] 한 다음 Set-ExecutionPolicy Unrestricted 입력 후 y 선택

• • 맥북에서 보안에러가 뜨면 앞에 sudo를 붙여 보세요.

sudo npm install -g typescript

 

4. 작업폴더 생성 후 에디터(VScode)로 오픈

5. 작업폴더에 index.ts 파일 생성 후 타입스크립트 작성

ts파일은 js랑 똑같이 사용가능합니다. ( 하지만 웹 브라우저는 ts 파일을 알아듣지 못하기 때문에 js파일로 변환작업(컴파일)을 해야 합니다. (6번))

6. .ts파일을 .js파일로 변환

VScode에서 Terminal 새로 연 다음 tsc -w 입력하면 ts파일을 js파일로 변환해 줍니다.

타입스크립트로 작성한 코드를 사용하려면. ts가 아니라 변환된. js파일을 참조해 주시면 사용할 수 있습니다.

(웹 브라우저는 ts파일을 해석할 수 없기 때문에 컴파일작업이 필요하고 변환된 js파일을 사용하면 됨)

 

 

React 프로젝트에서 타입스크립트(Typescript) 사용하기

이미 있는 React 프로젝트에 설치

작업 폴더 경로에서 터미널 오픈 후 명령어 입력

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

 

처음부터 타입스크립트(Typescript) 적용된 React 프로젝트 생성

작업폴더 생성 후 터미널에 명령어 입력

npx create-react-app my-app --template typescript

 

Vue 프로젝트에서 Typescript 사용하기

작업폴더경로에서 터미널 오픈 후 명령어 입력하여 라이브러리 설치

vue add typescript

vue 파일에서 타입스크립트 쓰려면 lang 옵션을 켜두고 쓰면 알아서 잘 됩니다.

<script lang="ts">
  
</script>

 

---

타입스크립트(Typescript) 사용하기

1. 작업 폴더에 index.ts 파일 생성 후 코드 작성

2. tsconfig.json 파일 생성하고 해당 코드 작성하여 저장

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

https://www.typescriptlang.org/tsconfig  해당사이트에서 다양한 tsconfig 속성 값들도 확인해 볼 수 있습니다. 
3.. ts파일은 브라우저가 못 읽기 때문에. js 파일로 변환

tsc -w // 타입스크립트를 자동으로 자바스크립트로 변환

명령어 입력하고 해당 터미널 끄지 않으면 자동으로 변환됩니다. ts파일에 코딩을 하고 참조는 js파일로 하시면 됩니다. ts파일을 js파일로 변환하는 과정을 컴파일이라고 하는데 tsconfig.json에서 컴파일 시 옵션 설정을 할 수 있습니다.

---

타입스크립트 문법

1. 간단한 변수 타입 지정가능

let 이름 :  string = 'kim'; // 이 변수에는 string(문자) type만 들어 올 수 있다는 문법
이름 = '123'; // ( O )
이름 = 123 // ( X ) error

type 명칭에는 string, number, boolean, null, undefined, bigint, [], {} 등이 들어갈 수 있습니다.

// 타입지정 예시

// 배열과 배열 값의 type 지정
let 이름 :string[] = ['kim', 'park'] // 이 변수에는 stiring이 담긴 array만 들어올 수 있습니다.

// 오브젝트와 속성 값의 type 지정
let 이름 :{name: string} = {name? : 'kim'}; // name 속성은 들어올 수도 있고 안들어올 수 있는 옵션이고 속성 값은 string이 들어와야함

// 다양한 타입이 들어올 수 있게 하려면 Union type
let 이름 : string | number = 'kim';

 

2. type을 변수에 담아 쓸 수 있음

타입지정하는 문법이 너무 길다면 변수에 담아 사용할 수 있습니다.

// 타입명 작성은 대문자로 많이 함
type Name = string | number;
let 이름 : Name= 123;

3. 함수를 만들 때도 type 지정 가능

function 함수 (x : number ) : number { // 이 함수는 파라미터로 number, return 값으로 number 지정
	return x * 2 
}

4. array에 쓸 수 있는 tuple 타입

tuple 이란?

javascript에서는 지원하지 않는 데이터 타입이지만, Typescript에서는 배열 타입을 보다 특수한 형태로 사용할 수 있는 tuple타입을 지원합니다.

type  Member = [number, boolean]; // tuple타입 : '무조건 첫번째는 number, 둘째는 boolean 값이 들어가야 함
let john: Member = [123,  true] // (O)

5. object에 타입지정해야 할 속성이 너무 많다면

type Member = {
	[key : string ] : string //  글자로 된 모든 object 속성의 타입은 : string
}

let john : Member = {
	name : 'kim',
	age : '123'
} // ( O )

 

마치며

타입스크립트를 자바스크립트에 타입을 정해준다 정도로만 이해하고 있었는데 자료들을 찾아 보니 타입스크립트의 사용이 편리할 것 같다는 생각이 들었다. 긴 소스코드 수정작업과 다른 사람들과의 협업에서 주석이 달려있지 않았을 때 파라미터에 타입을 분석해야하는 경우가 생겼다고 상상해보면 타입스크립트를 왜 사용하는지 알 것 같다. 타입스크립트를 처음 배울땐 타입지정이 귀찮고 피곤했었는데 익숙해지고 나면 타입스크립트 없는 개발은 상상이 안된다는 글들도 많았다. 타입스크립트를 찍먹으로 공부해봤는데 앞으로도 열심히해야겠다...

 

 

🌼 참고사이트

 

Node.js 이해와 활용 및 설치하기

 

TSConfig Reference - Docs on every TSConfig option

 

TypeScript 가이드북 - TypeScript Guidebook

🌼 참고영상