[typescript/m1] Typescript 설치, 연결

현재 나도 typexcript를 공부하면서 작성하는 거라 맞지 않을 수 있다.
공부하며 수정해야할 부분 수정 예정

 

과정

TypeScript를 사용하려면 먼저 Node.js가 설치되어있어야 하며, npm도 필요하다.

node, npm 설치가 되어있는지 확인

node -v
npm -v

 

폴더 생성 > 이동

mkdir [프로젝트명]
cd [프로젝트명]

 

pakage.json 에 자동으로 필요한 의존성 추가

npm init -y

 

TypeScript 전역 설치

ts-node : TypeScript 파일을 컴파일하지 않고, 바로 실행할 수 있게 된다.

npm install -g typescript ts-node 방식도 있는데, 이상하게 나는 pakage.json에 자동으로 올라가지지 않아서 아래 코드로 작성했다,

 npm install --sev-dev typescript ts-node

 

pakage.json 에 추가

  "scripts": {
    "build": "tsc", // TypeScript 컴파일
    "start": "ts-node src.app.ts", // TypeScript 파일 실행

 

tsconfig.json 생성 : TypeScript의 기본 설정

전역으로 설치 했다면 명령어 앞에 npx 는 생략해도 상관없다.

tsc --init

 

src 폴더 생성 > 안에 사용 파일 생성.

나는 app.ts 를 src 폴더 안에 생성했다.

 

express 와 그 외 필요한 패키지 설치

npm install express @types/node @types/express

@types/node, @types/express : TypeScript에서 타입 지원을 제공하기 위한 패키지
TypeScript는 기본적으로 JavaScript의 타입을 알지 못하기 때문에 타입 정보를 제공하는 별도의 패키지가 필요하다.

 

만약 이미 init을 했다면, tsconfig.json 설정은 아래와 같이 설정

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "strict": true,
    "target": "ES6",
    "module": "commonjs"
  }
}

 

moduleResolution : 여러 파일과 import가 어떻게 상호작용하는지 타입스크립트에 알려준다.
outDir : 컴파일 된 js파일이 저장될 곳
rootDir : 개발하면서 작성할 ts 파일이 위치할 곳 

구조는 아래와 같다.

typescript/
├── src/
│   └── app.ts                # 서버 코드 작성
├── dist/                     # 컴파일된 파일이 생성될 폴더
├── package.json
├── tsconfig.json

 

dist 폴더는 TypeScript 컴파일하면 자동으로 생성되며,
폴더 안에는 src 내 ts 파일과 이름이 동일한 js 파일이 만들어진다.

 

TypeScript 컴파일

npx tsc

 

컴파일된 파일 실행 방법

node dist/app.js

ts-node 실행 방법

npx ts-node src/app.ts

 

 

가장 간단한 방법 : cra 로 프로젝트 생성하기

npx create-react-app [프로젝트명] --template typescript

나는 이렇게 만들고 폴더 안에 프로젝트를 다시 만들고 싶진 않아,
프로젝트 내 내부 페이지를 가져와서 pakage.json 과 pakage-lok.json 의 이름만 변경해주었다.

 

그리고 나처럼 가져오신 분들은 이렇게 삭제하면 된다.

rm -rf [프로젝트명]

 

연결 테스트

app.ts 

test 코드

let test:string = 'Welcome to the TypeScript!';
console.log(test);

ts-node 실행 및 콘솔 결과

 

현재 React Project 에 TypeScript 만 추가하고 싶다면?

react 공홈에 방법 나와있으니 따라하면 될 것 같다.

 

tsc 명령어

• tsc --init : 기본 설정파일인 tsconfig.json 파일을 생성할때 사용
• tsc -w / tsc --watch : 코드 파일을 변경할때마다 자동으로 컴파일하는 watch 모드
•