[TypeScript] 타입스크립트 사용을 위한 초기 세팅

2024. 8. 1. 11:19·웹개발/TypeScript
728x90

TypeScripte(타입스크립트)는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 더 안정적이고 유지보수가 쉬운 코드를 작성할 수 있도록 도와주는 문법입니다.

타입스크립트 작성을 위한 초기세팅을 알려드리도록 하겠습니다.


1. Node.js와 npm 설치

타입스크립트 사용을 위해서는 최신 버전의 Node.js와 npm이 설치되어야 합니다.

설치는 및에 공식 사이트에 접속하여 다운받으실 수 있습니다.

Node.js — Run JavaScript Everywhere (nodejs.org)

 

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

2. 프로젝트 초기화

프로젝트 디렉터리에서 다음 명령어를 실행하여 package.json 파일을 생성합니다.

더보기
더보기

package.json 파일은 Node.js 프로젝트의 설정 및 종속성을 관리하는 데 사용되는 중요한 파일입니다.
이 파일은 프로젝트의 메타데이터(프로젝트 이름, 버전, 의존성 등)를 포함하고 있습니다.

npm init -y

 

3. TypeScript와 ts-node 설치

프로젝트에서 타입스크립트를 사용하려면 다음 명령어를 실행하여 typescript와 ts-node를 설치해야 합니다.

더보기
더보기

ts-node는 TypeScript로 작성된 코드를 실행할 수 있도록 도와주는 도구입니다.

TypeScript를 컴파일하고 실행할때 사용됩니다.

npm install typescript ts-node

 

4. tsconfig.json 생성

타입스크립트 설정 파일인 tsconfig.json을 생성하여 프로젝트 설정을 구성합니다. 이 파일은 컴파일 옵션을 설정하는 데 사용됩니다. 다음 명령어를 사용하여 기본 설정 파일을 생성할 수 있습니다.

더보기
더보기

tsconfig.json파일은 타입스크립트 코드가 어떻게 컴파일 될지 설정합니다. json파일이랑 비슷한 형태의 타입스크립트 파일이라 생각하시면 됩니다.

npx tsc --init

 

이를 통해 생성된 tsconfig.json파일은 다음과 같은 기본 구성을 포함합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

 

이후 VsCode에서 단축키 Crtl+Alt+N을 이용해서 코드를 실행할 수 있습니다.

// index.ts
console.log("Hello, TypeScript!");
//출력결과 Hello, TypeScript!
728x90

'웹개발 > TypeScript' 카테고리의 다른 글

[타입스크립트] interface와 type의 차이  (0) 2024.08.01
[TypeScript] Interface: 타입 지정하기  (0) 2024.08.01
타입스크립트, 너 뭔데 요즘 유행하냐?  (3) 2024.07.20
윈도우에서 타입스크립트(typescript)와 Code Runner 설정하기  (4) 2024.07.20
'웹개발/TypeScript' 카테고리의 다른 글
  • [타입스크립트] interface와 type의 차이
  • [TypeScript] Interface: 타입 지정하기
  • 타입스크립트, 너 뭔데 요즘 유행하냐?
  • 윈도우에서 타입스크립트(typescript)와 Code Runner 설정하기
튼튼발자
튼튼발자
프론트엔드 개발자입니다. 헬스를 가끔해서인지 몸이 튼튼한거 같습니다. 그래서 튼튼한 개발자 => 튼튼발자입니다. 프론트엔드 및 관련 개발 내용 블로그 글로 정리해서 올려둡니다.
    250x250
  • 튼튼발자
    튼튼발자
    튼튼발자
  • 전체
    오늘
    어제
    • 분류 전체보기 (192)
      • 튼튼발자의 끄적끄적 (10)
      • 웹개발 (94)
        • HTML (5)
        • CSS (2)
        • JavaScript (40)
        • TypeScript (5)
        • REACT (22)
        • Next.js (13)
        • GIt (7)
      • 기타 (3)
        • 일상 (3)
      • 프로젝트 (27)
        • Componique: UI 컴포넌트 라이브러리 (18)
        • GitHub Profile Viewer (8)
        • 잇핏 (1)
      • 프론트엔드 개발자로 취업준비 (1)
        • 기술 면접 (7)
        • 코딩 테스트 준비하기 (0)
        • 자기소개서&지원서&이력서 (0)
      • 컴퓨터과학 (12)
        • 운영체제 (6)
        • 알고리즘 (6)
      • 전공 공부 (37)
        • AI(인공지능) (2)
        • 컴퓨터네트워크 (19)
        • 네트워크프로그래밍 (3)
        • SW소프트웨어응용설계 (7)
        • 클라우드컴퓨팅 (3)
        • 웹서비스프로그래밍 (3)
      • PT (0)
      • 취준일기 (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    자바스크립트
    JavaScript
    github
    네트워크
    ui컴포넌트
    트랜스포트계층
    웹개발
    NextJs
    프론트엔드
    데이터전송
    componique
    TCP
    코딩
    리액트
    JS
    상태관리
    프론트엔드개발
    프로그래밍
    react
    tailwind
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
튼튼발자
[TypeScript] 타입스크립트 사용을 위한 초기 세팅
상단으로

티스토리툴바