CODE STATES 44

Typescript 맛봄 (1)

꼬드리 2023. 5. 30. 16:47

- Typescript 환경 구성하기

- tsconfig.json 파일의 세부 내용

- Typescript 문법(타입, 함수, 연산자 활용)

 

 

 

간단하게 배운 걸 정리하기 위한 포스팅입니다. 사실 자세한 건 이미 주말에 쓴 포스팅에 담아둬서 ...

복습 개념으로 짧게 중요한 점만 짚고 넘어가겠습니다. 

 

 

🚩1) Typescript 환경 구성하기

타입 스크립트는 브라우저에서 읽히기 어렵습니다. 브라우저는 js파일만 읽거든요. typescript는 개발자들이 여러모로 편해서 사용하는 부가적인 언어라는 점! 따라서 ts.파일을 js.파일로 바꿔주는 컴파일 과정이 반드시 필요합니다. 예전에 scss로 작성한 파일도 css로 바꿔주는 과정이 필요했다는 게 기억나네요. 

 

여하튼 타입 스크립트 파일 환경을 구성하는 절차는 다음과 같습니다.

 

1. mkdir 폴더명, cd 폴더명으로 새 프로젝트의 폴더를 생성한 뒤 접근한다.

2. 터미널에서 npm init -y 명령어를 사용해서 새로운 프로젝트를 초기화 해준다. (package.json이 생김)

3.아래와 같이 타입 스크립트 명령어를 써서 생성한다. 

npm install typescript --save-dev

4. 프로젝트의 루트 디렉토리(중요)에 tsconfig.json파일을 생성한 뒤 아래의 내용을 넣는다. 이 파일에서 여러 설정들을 자신이 원하는대로 커스텀 가능하다. 컴파일 해서 보낼 모양이나 버전 등을 적어준다.

//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다.
{
  "compilerOptions": {
    "target": "es6", //컴파일 시 es6를 쓰겠음
    "module": "commonjs", //보통 쓰는 js로 바꿔줌
    "sourceMap": true, //보통 디버깅 할 때 편해서 쓴다고 함
    "outDir": "./dist" //dist라는 폴더 내부에 파일들이 생성됨
  },
  "include": [
    "src/**/*"
  ]
}

5. 이제 src 폴더 아래에 typescript로 된 파일을 작성할 수 있다. 

 

 

+) 번외: typescript에서는 2020년까지 TSLint를 지원하고, 이제 typescript-eslint라는 걸 사용해야 합니다. 타입 스크립트 프로젝트에서도 Prettier이나 ESLint를 쓰고 싶다면 확장 프로그램을 설치하면 됩니다. 확장 프로그램을 깐 뒤에는 부가적인 설정을 조금 해줘야 하는데요. 

 

1. ctrl + shift + p를 눌러 Preferences: Open User Settings에 들어간 뒤 아래 코드를 추가합니다. 만약 이전에 다른 확장 프로그램들이 깔려 있다면 이것저것 적혀 있을 텐데 맨 밑에 넣어주면 됩니다.

{
  // ... 
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],
}

2. 이제 설정에 들어갑니다. Settings란에서 format을 검색한 뒤, format on save 체크를 해제해줍니다. 가끔 세이브가 충돌하면서 오류가 나는 경우가 있다고 하네요.

 

3. Prettier까지 설치가 끝난 뒤 몇 가지 프리셋과 라이브러리를 설치합니다. 

npm i -D @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier

 

4. 프로젝트 폴더 밑에 .eslintrc.js파일을 만든 뒤 아래 내용을 붙여 넣습니다. 이 파일에는 prettier과 eslint관련된 설정이 있고, 리액트를 위한 설정도 첨가되어 있습니다. 특히 rules 안의 내용은 개발자의 취향대로 작성 가능합니다. 

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    jest: true,
  },
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true, //""를 ''로 바꿔줌
        tabWidth: 2, //탭 크기
        printWidth: 80, 
        bracketSpacing: true, 
        arrowParens: 'avoid',
      },
    ],
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    'prefer-const': 'off',
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

 

 

🚩2) Typescript 문법(타입, 함수, 연산자 활용)

TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어라고 합니다. JS에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어인데, 어쨌거나 JS의 단점(과하게 유연해서 에러를 발견하기 어려움!)을 개발자들이 어떻게든 보완해보려고 개선한 언어라고 하면 될 것 같습니다.

이런 고로 TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여줍니다. 또한 인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와준다고 해요.

 

 

타입

타입 스크립트는 기본적으로 js에서 쓰는 여러 타입들을 지원합니다. (boolean, number, string, array)

특히 Array는 두 가지 방법으로 배열을 선언할 수 있습니다.

let items: string[] = ["Apple", "Banana", "Grape"];

let nuberList : Array<number> = [4, 7, 1090];
//아래 방법은 제네릭이라고 부른다. <> 제네릭 안에는 하나의 인자만 들어갈 수 있다.

 

여기에 더해서 Tuple 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다.

let user: [string, number, boolean] = ["kimcoding", 20, true];

 

또 TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로 어떤 프로퍼티라도 추가할 수 있답니다. 하지만 이왕 타입 스크립트를 쓰는 거 아래처럼 타입을 각기 명시해 주는 것이 훨씬 좋습니다.

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

 

마지막으로 any타입이 있는데, 말그대로 뭐가 들어오든 오류가 나지 않는다는 뜻입니다. 하지만 이런 any를 남발하면 타입 스크립트를 쓰는 장점이 없겠죠. 아직 무엇이 들어올지 정확하지 않은 단계에서만 쓸 수 있는 타입입니다.

 

 

함수

TypeScript에도 함수는 JavaScript와 마찬가지로 기명 함수(named function)와 화살표 함수(arrow function) 둘다 사용 가능합니다. 대신, 아래와 같은 차이점이 있습니다.

기존까지 JS에서 함수를 아래처럼 작성했다면,

//named function
function add(x, y){
	return x + y;
}

//arrow function
let add = (x, y) => {
	return x + y;
}

TS에서는 아래와 같이 작성해야 합니다.

//named function
function add(x: number, y: number):number {
	return x + y;
}

//arrow function
let add = (x: number, y: number): number => {
	return x + y;
}