[TypeScript] 시작하기 - 설치 및 환경 설정

Typescript 란?

• JavaScript + Type 문법
• 큰 프로젝트에서 주로 쓰인다
• 자바스크립트는 dynamic typing이 가능하지만, 코드가 길어지고 프로젝트가 커지면 별로 좋지 않다
• TypeScript는 타입을 엄격하게 지켜주고 에러 메세지가 더 정확하다

 

 

 

 

 

 

설치하기

1. node.js 가 우선 설치되어 있는지 확인한다

$ node -v   // node version 확인

설치 되어 있지 않다면? 

https://nodejs.org/ko/download/

다운로드 | Node.js

 

2. 터미널에서 설치하기

$ npm install -g typescript  // global 설치
$ npm install typescript  // 해당 폴더에서만 설치

 

 

 

 

 

 

 

환경 설정

1. tsconfig.json 파일 생성

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

• 파일 생성 후 위의 코드를 그대로 복사해서 붙여 넣는다.
• tsconfig.json 파일은 타입스크립트가 컴파일 될 때 필요한 옵션을 지정해준다.
• 터미널을 통해 자동으로 생성할 수도 있다.

$ tsc --init

• 자동으로 생성 하면 어떤 컴파일 옵션들이 있는지 주석으로 설명되어 있는걸 볼 수 있다.
• 컴파일러 옵션("compilerOptions")만 추가되어 있으며, 컴파일러 기본값을 사용할 경우, 각 항목을 주석처리한다.
• 컴파일 설정 가능한 모든 옵션은 Compiler Options에서 자세히 볼 수 있다.
• (출처: https://yamoo9.gitbook.io/typescript/cli-env/tsconfig)

{
  "compilerOptions": {
  
    /* 기본 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    // "incremental": true,                   /* 증분 컴파일 활성화 */ 
    "target": "es5",                          /* ECMAScript 목표 버전 설정: 'ES3'(기본), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "esnext",                       /* 생성될 모듈 코드 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": ["dom", "dom.iterable", "esnext"], /* 컴파일 과정에 사용될 라이브러리 파일 설정 */
    "allowJs": true,                          /* JavaScript 파일 컴파일 허용 */
    // "checkJs": true,                       /* .js 파일 오류 리포트 설정 */
    "jsx": "react",                           /* 생성될 JSX 코드 설정: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* '.d.ts' 파일 생성 설정 */
    // "declarationMap": true,                /* 해당하는 각 '.d.ts'파일에 대한 소스 맵 생성 */
    // "sourceMap": true,                     /* 소스맵 '.map' 파일 생성 설정 */
    // "outFile": "./",                       /* 복수 파일을 묶어 하나의 파일로 출력 설정 */
    // "outDir": "./dist",                    /* 출력될 디렉토리 설정 */
    // "rootDir": "./",                       /* 입력 파일들의 루트 디렉토리 설정. --outDir 옵션을 사용해 출력 디렉토리 설정이 가능 */
    // "composite": true,                     /* 프로젝트 컴파일 활성화 */
    // "tsBuildInfoFile": "./",               /* 증분 컴파일 정보를 저장할 파일 지정 */
    // "removeComments": true,                /* 출력 시, 주석 제거 설정 */
    "noEmit": true,                           /* 출력 방출(emit) 유무 설정 */
    // "importHelpers": true,                 /* 'tslib'로부터 헬퍼를 호출할 지 설정 */
    // "downlevelIteration": true,            /* 'ES5' 혹은 'ES3' 타겟 설정 시 Iterables 'for-of', 'spread', 'destructuring' 완벽 지원 설정 */
    "isolatedModules": true,                  /* 각 파일을 별도 모듈로 변환 ('ts.transpileModule'과 유사) */

    /* 엄격한 유형 검사 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "strict": true,                           /* 모든 엄격한 유형 검사 옵션 활성화 */
    // "noImplicitAny": true,                 /* 명시적이지 않은 'any' 유형으로 표현식 및 선언 사용 시 오류 발생 */
    // "strictNullChecks": true,              /* 엄격한 null 검사 사용 */
    // "strictFunctionTypes": true,           /* 엄격한 함수 유형 검사 사용 */
    // "strictBindCallApply": true,           /* 엄격한 'bind', 'call', 'apply' 함수 메서드 사용 */
    // "strictPropertyInitialization": true,  /* 클래스에서 속성 초기화 엄격 검사 사용 */
    // "noImplicitThis": true,                /* 명시적이지 않은 'any'유형으로 'this' 표현식 사용 시 오류 발생 */
    // "alwaysStrict": true,                  /* 엄격모드에서 구문 분석 후, 각 소스 파일에 "use strict" 코드를 출력 */

    /* 추가 검사 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    // "noUnusedLocals": true,                /* 사용되지 않은 로컬이 있을 경우, 오류로 보고 */
    // "noUnusedParameters": true,            /* 사용되지 않은 매개변수가 있을 경우, 오류로 보고 */
    // "noImplicitReturns": true,             /* 함수가 값을 반환하지 않을 경우, 오류로 보고 */
    "noFallthroughCasesInSwitch": true,       /* switch 문 오류 유형에 대한 오류 보고 */
    // "noUncheckedIndexedAccess": true,      /* 인덱스 시그니처 결과에 'undefined' 포함 */

    /* 모듈 분석 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "moduleResolution": "node",               /* 모듈 분석 방법 설정: 'node' (Node.js) 또는 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* 절대 경로 모듈이 아닌, 모듈이 기본적으로 위치한 디렉토리 설정 (예: './modules-name') */
    // "paths": {},                           /* 'baseUrl'을 기준으로 상대 위치로 가져오기를 다시 매핑하는 항목 설정 */
    // "rootDirs": [],                        /* 런타임 시 프로젝트 구조를 나타내는 로트 디렉토리 목록 */
    // "typeRoots": [],                       /* 유형 정의를 포함할 디렉토리 목록 */
    // "types": [],                           /* 컴파일 시 포함될 유형 선언 파일 입력 */
    "allowSyntheticDefaultImports": true,     /* 기본 출력(default export)이 없는 모듈로부터 기본 호출을 허용 (이 코드는 단지 유형 검사만 수행) */
    "esModuleInterop": true                   /* 모든 가져오기에 대한 네임스페이스 객체 생성을 통해 CommonJS와 ES 모듈 간의 상호 운용성을 제공. 'allowSyntheticDefaultImports' 암시 */
    // "preserveSymlinks": true,              /* symlinks 실제 경로로 결정하지 않음 */
    // "allowUmdGlobalAccess": true,          /* 모듈에서 UMD 글로벌에 접근 허용 */

    /* 소스맵 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    // "sourceRoot": "./",                    /* 디버거(debugger)가 소스 위치 대신 TypeScript 파일을 찾을 위치 설정 */
    // "mapRoot": "./",                       /* 디버거가 생성된 위치 대신 맵 파일을 찾을 위치 설정 */
    // "inlineSourceMap": true,               /* 하나의 인라인 소스맵을 내보내도록 설정 */
    // "inlineSources": true,                 /* 하나의 파일 안에 소스와 소스 코드를 함께 내보내도록 설정. '--inlineSourceMap' 또는 '--sourceMap' 설정이 필요 */

    /* 실험적인 기능 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    // "experimentalDecorators": true,        /* ES7 데코레이터(decorators) 실험 기능 지원 설정 */
    // "emitDecoratorMetadata": true,         /* 데코레이터를 위한 유형 메타데이터 방출 실험 기능 지원 설정 */
    
    /* 고급 옵션
     * ------------------------------------------------------------------------------------------------------------------------------------------------ */
    "skipLibCheck": true,                     /* 선언 파일 유형 검사 스킵 */
    "forceConsistentCasingInFileNames": true  /* 동일한 파일에 대한 일관되지 않은 케이스 참조를 허용하지 않음 */
    
  }
}

 

2. 타입스크립트 파일 생성

• *.ts 확장자를 사용
• 그런데 ts 파일은 브라우저에서 바로 읽어올 수 없으므로 js 파일로 변환해야 읽어올 수가 있다.
• 터미널에서 아래 명렁어를 입력해두면 자동으로 변환된다

$ tsc -w

 

+) js로 변환하지 않고 단순하고 빠르게 결과값을 얻고 싶다면?

• ts-node
  • ts파일을 js 파일로 바꾸지 않고 자동으로 실행할 수 있게 도와주는 툴이다
  • 설치하기

$ npm install -g ts-node  // 글로벌 설치
$ npm install --save-dev ts-node  // 해당 폴더 설치

 

 

 

 

 

 

React 프로젝트에서 typescript 사용하기

• 기존의 react 프로젝트에서 사용할 경우
  • yarn add 로 typescript를 설치해도 된다
  • 터미널에서 아래 명령어를 입력하면 js 파일을 ts 파일로 바꿔서 사용해도 된다.

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

 

• 새롭게 react 프로젝트를 생성할 경우

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

 

 

 

 

 

 

 

---

유튜브 코딩애플과 기타 다른 사람들의 블로그 글을 보고 설치와 환경 설정 관련을 나름대로 정리해봤다.