Typescript 기초 정리

Typescript란 무엇인가?

Microsoft에 의해 개발 / 관리되고 있는 오픈소스 프로그래밍 언어이다.

Typescript는 정적 타입 언어이기 때문에 컴파일 시간이 조금 걸리더라도 안정성을 보장하지만,

기존 Javascript는 동적 타입 언어이기 때문에 속도는 빠르지만 타입의 안정성이 보장되지 않았다.

Typescript는 이러한 자바스크립트의 단점을 보완하기 위해 만들어졌다.

기존 Javascript에서 타입 없이 편하게 작성할 수 있는 장점이 프로젝트가 커질수록 단점이된다.

간단한 예시를 통해 알아보자.

// js

5 - '3' // 2

// ts

5 - '3' // Uncaught SyntaxError: Unexpected number
// error 산술 연산 오른쪽은 'any', 'number', 'bigint' 또는 열거형 형식이어야 합니다.

기존 Javascript에서는 number - string이 가능했지만 Typescript에서는 불가능하기에 에러가 나온다.

지금은 간단한 예시로 코드도 짧고 간단하지만 실제 프로젝트때 코드량이 많아지고 다른 사람의 코드를 수정해야한다면?

시간이 조금 더 걸릴지언정 안정성 높고 에러를 잡아주는 Typescript가 사용하고싶어질것이다.

Typescript 사용 방법

일반 HTML CSS JS 웹 개발시 적용 방법과 React 프로젝트에서 적용하는 방법에 대해 알아보자

1. HTML CSS JS 웹 개발시 적용 방법

npm install -g typescript

사용자 로컬에 타입스크립트 컴파일러를 설치한다.
작업할 폴더를 골라 에디터로 오픈한다.
작업 폴더에 .ts로 끝나는 파일을 생성 후 타입스크립트 사용을 시작하면 된다.
주의사항으로 웹브라우저는 ts파일을 알아볼 수 없기에 js파일로 변환 작업을 해야한다.

//터미널에 아래와 같이 입력하면 ts파일이 자동으로 js 파일로 변환된다.

tsc -w

HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면 변환된 js파일을 사용해야한다.

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

2. React 프로젝트에서 적용 방법

2-1. 이미 만들어둔 프로젝트 안에서 설치 할 경우 작업 폴더 경로에서 터미널을 오픈한 뒤 아래와 같이 입력하자.

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

설치가 끝나면 js 변환 작업을 위해 tsc -w를 터미널에 입력해준다.

tsc -w

2-2. React 프로젝트를 새로 만드는 경우에는 작업할 폴더를 만든 뒤 에디터와 터미널을 오픈하고 아래와 같이 입력하자.

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

역시나 js 변환 작업을 위해 tsc -w 입력을 잊지말자.

Typescript 컴파일시 세부 설정하기

프로젝트 폴더 안에 tsconfig.json 파일이 있다면(React 사용 시) 오픈 없다면(일반 웹 개발 시) 새로 생성 후 json 파일 안에 아래와 같이 코드를 작성한다.

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

target은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다.
module은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 사용할지 정하는 부분이다.
아래는 tsconfig에 들어갈 기타 항목들이다. 더 자세한 내용은 https://www.typescriptlang.org/tsconfig 에서 확인할 수 있다.

{
 "compilerOptions": {

  "target": "es5", // '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 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "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문 이상하면 에러내기 
 }
}

참고한 곳 : https://codingapple.com/course/typescript-crash-course/