/ TYPESCRIPT

TypeScript란?

TypeScript은 다음과 같이 구성되어 있습니다.

1. 타입스크립트(TypeScript)란?

타입스크립트(TypeScript)란 자바스크립트(JavaScript)에 타입을 적용한 언어로, 자바스크립트의 확장버전이라고 말할 수도 있을 것입니다.

2. 타입스크립트를 쓰는 이유?

제가 예시를 들어보겠습니다. 문자와 숫자의 연산은 자바스크립트에서 가능합니다.자바스크립트가 알아서 문자를 숫자로 바꿔주기 때문입니다. 물론 이러한 자바스크립트의 유연성이 편리할 때도 있습니다. 하지만 코드가 길어져 규모가 커지고 협업을 하는 경우 단점이 됩니다. 이러한 경우 타입스크립트를 쓰면 문자와 숫자를 연산할 수 없다는 에러를 띄워줍니다.

또한 타입스크립트의 에러메세지는 자바스크립트에 비해서 엄격하게 타입을 체크해주기 때문에 정확하고 추적 하기 쉬운 에러메세지를 띄워줍니다. 또한 오타 교정도 해줍니다.

3. 타입스크립트 설치

기본적인 html,css,js를 가지고 웹 개발을 한다고 가정할 경우


  1. node.js를 설치합니다.(최신버전으로)
  2. 에디터 터미널에 npm install -g typescript 입력하여 설치합니다.
  3. .ts로 끝나는 타입스크립트 파일을 생성합니다.
  4. tsconfig.json 파일을 하나 만들어 줍니다.
  5. tsconfig.json 파일안에 다음 코드를 입력합니다.
{
    "compilerOptions" : {
        "target" : "es5",
        "module" : "commonjs",
    }
}

React 프로젝트에서 Typescript 사용할 경우

이미 존재하는 React 프로젝트에 설치할 경우에는 프로젝트 터미널에서 다음 명령을 입력해주면 됩니다.

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

그냥 React 프로젝트를 새로만든다면 새 프로젝트 폴더를 만들고 에디터 터미널을 열고 다음처럼 입력해주면 됩니다.

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

3. 타입스크립트 컴파일하기

타입스크립트 자체는 브라우저가 읽지 못합니다. 따라서 ts파일을 js로 변환해주어야합니다. 컴파일을 하는 것이죠.
터미널에

tsc -w

라는 명령어를 입력하고 켜놓으면

코드를 저장할때마다 js파일로 변환됩니다. 파일을 사용할때는 변환된 js파일을 사용합니다.

tsconfig.json 파일은 ts에서 js로 컴파일 시에 옵션을 설정할 수 있습니다.