Typescript란? 그리고 TypeScript 설치방법

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 집합이다. TypeScript는 JavaScript 코드에 정적 타입을 추가하여 코드의 가독성과 유지보수성을 향상시키는 것을 목표로 한다.

 

TypeScript 파일은 .ts 확장자를 사용하며, TypeScript 코드는 브라우저에서 실행되기 전에 JavaScript로 컴파일되어야 한다.

TypeScript의 정의

TypeScript는 다음과 같이 정의할 수 있다.

• 정적 타입 언어: TypeScript는 변수와 함수의 매개변수에 타입을 명시할 수 있다. 이는 컴파일 타임에 타입 오류를 검출할 수 있게 한다.
• JavaScript의 상위 집합: 모든 JavaScript 코드는 유효한 TypeScript 코드이다. TypeScript는 JavaScript의 기능을 그대로 유지하면서 추가적인 기능을 제공한다.
• 객체지향 프로그래밍: 클래스, 인터페이스, 상속과 같은 객체지향 프로그래밍 개념을 지원한다.

TypeScript를 사용하는 이유

TypeScript를 사용하는 주요 이유는 다음과 같다.

• 코드의 가독성 및 유지보수성 향상: 정적 타입을 사용함으로써 코드의 구조를 명확히 하고, 코드 작성 중 발생할 수 있는 오류를 줄일 수 있다.
• 개발자 생산성 향상: 정적 타입 시스템과 IntelliSense, 코드 자동 완성 기능을 통해 개발자들이 더 효율적으로 코드를 작성할 수 있게 도와준다.
• 대규모 프로젝트 관리 용이: 코드가 커지고 복잡해질수록 타입 시스템을 통해 더 쉽게 구조화하고 관리할 수 있다.

TypeScript의 장점

TypeScript의 주요 장점은 다음과 같다.

• 타입 안전성: 타입 오류를 컴파일 타임에 검출하여 런타임 오류를 줄일 수 있다.
• 향상된 개발 도구 지원: 대부분의 IDE와 코드 편집기가 TypeScript를 지원하며, 코드 자동 완성, 리팩토링, 네비게이션 등의 기능을 제공한다.
• 최신 JavaScript 기능 사용 가능: TypeScript는 ECMAScript의 최신 기능을 미리 사용할 수 있게 하며, 구 버전의 JavaScript로 컴파일하여 호환성을 유지할 수 있다.
• 객체지향 프로그래밍 지원: 클래스, 인터페이스, 제네릭 등의 기능을 통해 객체지향 프로그래밍을 더 쉽게 구현할 수 있다.
• 대규모 프로젝트에서의 장점: 대규모 코드베이스에서 정적 타입 시스템은 코드의 일관성과 유지보수성을 크게 향상시킨다.

즉, JavaScript 에서 1 - '1' 을 했을때, 0 이 나오지만 TypeScript에서는 그러지 않다. 타입을 엄격하게 본다.

 

또한 JavaScript에서는 에러메세지가 추상적이지만 TypeScript 에서는 에러메세지를 구체적으로 명시해준다.

 

다음은 TypeScript를 설치하는 방법이다.

 

1. React 프로젝트에 설치를 하는 경우.

 

1) 이미 존재하는 React 프로젝트에 설치할 때

작업 폴더 경로에서 터미널을 오픈 한 뒤에 아래와 같이 터미널에 명령어를 입력해준다.

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

 

2) React 프로젝트를 새로 만들 때

새로 작업폴더를 하나 만들고 아래와 같이 터미널에 명령어를 입력해준다.

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

 

2. Vue 프로젝트에 설치를 하는 경우.

 

작업 폴더 경로에서 터미널을 오픈 한 뒤에 아래와 같이 터미널에 명령어를 입력해준다.

$ vue add typescript

 

이 후, vue 파일에서 TypeScript를 쓰려면 아래와 같이 입력해준다.

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

 

Vue 프로젝트 내에서도 tsconfig.json 파일을 만들어서 설정도 자유롭게 가능하다.

 

3. React 와 vue를 쓰지않고 일반 HTML, CSS, JS 웹 개발시 TypeScript 설치를 하는 경우.

 

아래와 같이 터미널에 명령어를 입력해준다.

$ npm install -g typescript

 

에러가 난다면?

(1) nodejs 를 삭제 후, 최신 버전으로 재설치 해준다. 

(2) 윈도우인데 허가되지 않은 script 실행불가 에러가 뜨면, 시작 - 검색 - powershell - 우클릭해서 관리자 권한으로 실행한 다음 $ Set-ExecutionPolicy Unrestricted 명령어를 입력하고 y 선택하면 된다. 

(3) 맥북인데 보안에러 어쩌구가 뜨면, $ sudo npm install ~ 이렇게 sudo를 앞에 붙여보자. 

 

이 후, 작업 폴더에 확장자를 .ts로 파일을 만들고 사용을 하면 된다.

 

허나, 웹 브라우저는 ts 파일을 인식하지 못하기 때문에 js 파일로 변환 작업을 해야한다.

 

폴더구조는 아래와 같이 만들어주자.

ts-practice/
├── src/
├── dist/
├── node_modules/
└── tsconfig.json

 

tsconfig.json 파일을 하나 생성 후, 아래와 같이 내용을 작성해주자.

{
  "compilerOptions": {
 
   "target": "esnext", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
   "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
   "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
   "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
   "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
   "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
   "outDir": "./", //js파일 아웃풋 경로바꾸기
   "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
   "removeComments": true, //컴파일시 주석제거 
 
   "strict": true, //strict 관련, no implicit 관련 모드 전부 켜기
   "noImplicitAny": true, //any타입 금지 여부
   "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
   "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
   "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
   "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
   "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
 
   "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
   "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
   "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
   "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
  },
  "include": ["src/**/*"], //컴파일할 파일을 지정, 예제에서는 폴더 아래의 모든 파일을 포함하도록 설정.
  "exclude": ["node_modules", "dist"] //컴파일에서 제외할 디렉토리를 지정. 일반적으로 node_modules와 dist 디렉토리를 제.
 }

 

tsconfig.json 은 ts에서 js로 컴파일시 옵션설정을 가능하도록 한다.

전체는 https://www.typescriptlang.org/tsconfig 에서 확인할 수 있다. 

 

js 파일로 변환하기 위해 아래와 같이 터미널에 명령어를 입력해준다.

$ tsc -w

 

 

명령어를 입력하면 터미널이 위와 같은 상태로 변하는데 이 상태로 계속 두고 작업을 하면 저장을 해 줄때마다 알아서 .ts 파일을 .js파일로 변환해준다. ( 같은 이름으로 .js 파일이 생성되고 그 안에 변경사항이 계속 저장됨. )

 

이제 src 폴더에서 .ts 파일을 만들고 저장을 하면, dist 폴더에 .js 파일과 .d.ts 파일이 함께 생성된다!

 

HTML 파일 등에서 TypeScript로 작성한 코드를 사용하려면 .ts 파일이 아니라 변환된 .js 파일을 사용해야한다.

<script src="변환된파일.js"></script>

 

참조 : 코딩애플