[ 타입스크립트 3 ] 설치

안녕하세요! 타입스크립트를 사용하기 위한 환경 설정은 중요한 단계입니다. 이 과정에서는 타입스크립트를 설치하고, 개발 환경을 구성하는 방법을 다룹니다.

1. Node.js 설치

타입스크립트를 사용하기 전에 Node.js가 설치되어 있어야 합니다. Node.js는 타입스크립트 컴파일러를 실행하는 데 필요한 런타임 환경을 제공합니다.

• Node.js 설치: Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치합니다.

2. 타입스크립트 설치

Node.js가 설치되면, NPM(Node Package Manager)을 사용하여 타입스크립트를 설치할 수 있습니다. 일반적으로 타입스크립트는 전역적(global) 또는 프로젝트별(local)로 설치할 수 있습니다.

• 전역 설치: 모든 프로젝트에서 타입스크립트를 사용할 수 있습니다.

  npm install -g typescript

• 프로젝트별 설치: 특정 프로젝트에만 타입스크립트를 적용합니다.

  npm init -y # 프로젝트 초기화 (package.json 생성)
  npm install --save-dev typescript

3. IDE 설정

Visual Studio Code(VS Code)와 같은 IDE를 사용하면 타입스크립트 개발이 훨씬 수월해집니다. VS Code는 타입스크립트를 지원하며, 여러 편리한 기능을 제공합니다.

• VS Code 설치: VS Code 공식 웹사이트에서 다운로드하여 설치합니다.
• 타입스크립트 지원: VS Code는 기본적으로 타입스크립트를 지원합니다. 추가적인 설정이 필요하지 않습니다.

4. tsconfig.json 설정

타입스크립트 프로젝트를 구성할 때는 tsconfig.json 파일을 생성하여 타입스크립트 컴파일러 옵션을 설정합니다. 이 파일은 타입스크립트 코드를 어떻게 컴파일할지를 정의합니다.

• tsconfig.json 생성: 프로젝트 루트 디렉토리에서 다음 명령어를 실행합니다.

  tsc --init

• 중요 설정 옵션:
  • target: 컴파일된 JavaScript 코드가 어떤 ECMAScript 버전을 따를지 지정합니다.
  • module: 모듈 시스템을 지정합니다 (예: commonjs, es2015 등).
  • strict: 모든 엄격한 타입 검사 옵션을 활성화합니다.
  • outDir: 컴파일된 파일이 저장될 디렉토리를 지정합니다.

5. 첫 번째 타입스크립트 파일 컴파일

• 타입스크립트 파일 작성: 간단한 타입스크립트 파일(example.ts)을 작성합니다.
• 컴파일 명령어 실행:

  tsc example.ts

  이 명령어는 example.ts 파일을 JavaScript 파일(example.js)로 컴파일합니다.

이제 타입스크립트 환경 설정이 완료되었습니다. 위 단계들을 따라 타입스크립트를 설치하고 기본적인 프로젝트 설정을 할 수 있습니다. 이후에는 실제 코드 작성과 함께 타입스크립트

 

// 타입스크립트 를 뭐 어쩌라고... 암튼 이렇게 쓰면 된다고 함... 선생님이 실수할 수도 있죠...

//html 에서는 당연 컴파일 된 .js 를 연결해야함...

 

 

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

 

 

 

// 프레임워크에서는 그냥 쓰면됨..

 

네, 맞습니다. Next.js와 같은 프레임워크에서 타입스크립트를 사용할 경우, `tsc` 명령어를 별도로 실행할 필요가 없습니다. Next.js는 내부적으로 타입스크립트 파일을 자동으로 처리하고 컴파일하는 기능을 갖추고 있기 때문입니다.

Next.js 프로젝트에서 타입스크립트를 사용하는 경우의 주요 특징은 다음과 같습니다:

1. 자동 타입스크립트 설정: `npx create-next-app` 같은 명령어로 프로젝트를 시작하고, 타입스크립트 설정을 선택하면 Next.js는 필요한 타입스크립트 설정과 의존성을 자동으로 설정합니다.

2. 자동 컴파일과 타입 체킹: `npm run dev` 또는 `next dev` 명령어로 개발 서버를 시작하면, Next.js는 `.ts` 또는 `.tsx` 파일을 자동으로 컴파일합니다. 이 과정에서 타입 오류가 있으면 콘솔에 오류 메시지가 표시됩니다.

3. 내장된 타입스크립트 설정: Next.js는 `tsconfig.json` 파일을 자동으로 생성하고 관리합니다. 이 파일에는 Next.js에 최적화된 기본 설정이 포함되어 있으며, 필요에 따라 수정할 수도 있습니다.

4. 통합 개발 환경: Next.js는 타입스크립트를 완벽하게 지원하여, 개발자가 타입스크립트의 모든 장점을 쉽게 활용할 수 있도록 해줍니다.

따라서 별도로 `tsc`를 실행할 필요 없이, Next.js의 개발 서버를 시작하는 것만으로 타입스크립트 코드의 컴파일과 타입 체킹이 자동으로 이루어집니다. 이는 개발 과정을 훨씬 편리하게 만들어줍니다.