vue 3 프로젝트 typescript 사용해보기

typescript를 사용해보기 위해 기존 vue 3로 만든 프로젝트를 변경한 내용에 대한 기록입니다.

공부하는 과정에 대한 기록이기 때문에 전문적인 지식을 정리한 글이 아닙니다.

---

TypeScript 소개

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

TypeScript는 microsoft에서 개발하고 유지하고 있는 오픈소스 프로그래밍 언어이다.

2012년 말 처음 공개되었는데 JavaScript가 암묵적 타입 변환이 가능한 반면 TypeScript는 개발 과정에 명시적인 타입을 지정하도록 도와준다.

빌드 시점에 타입을 체크하여 선행적으로 문제를 발견할 수 있기 때문에 코드의 유지 보수에 좀 더 효율적이게 된다.

또한 class, interface, 상속, 모듈과 같은 객체 지향형 프로그래밍을 지원하고 JSDoc을 통한 문서화도 지원한다.

TypeScript는 .ts 확장자 파일로 작성하고 빌드 시 해당 파일이 .js 파일로 컴파일된다.

이로 인해 빌드 시 컴파일 과정이 추가되기 때문에 빌드 시간이 증가하게 되지만 좀 더 규모가 큰 개발 관리를 할 수 있게 된다.

결과적으로 TypeScript는 javascript의 작성을 도와주기만 할 뿐 실제 동작은 javascript이기 때문에 javascript를 기본적으로 알고 있어야 한다.

다른 언어에 익숙한 경우 해당 언어에 비해 TypeScrpt가 어떤지 도움이 되는 글을 참고하면 좋다.

https://www.typescriptlang.org/ko/docs/handbook/typescript-in-5-minutes-oop.html

Documentation - TypeScript for Java/C# Programmers

설정 추가

최초 vue create 시 매뉴얼 설정으로 할 수도 있지만 기본적인 설치로 진행한 경우 이후 vue ui의 plugin 메뉴에서 cli-plugin-typescript를 추가하면 된다.

또는 command로 다음과 같이 추가한다.

vue add typescript

내 경우 vue ui에서 cli-plugin-typescript를 추가하였고 설치를 진행하면 다음처럼 각 설정을 활성화할 것인지를 물어보는 메뉴가 뜨고 기본값을 그대로 두고 설치 완료하였다.

생성이 완료되면 tsconfig.json 파일이 생성되고 다음과 같은 설정이 추가되었다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

cli-plugin-typescript를 추가 시 "convert all .js files to .ts" 옵션으로 인해 알아서 ts 파일로 컴파일이 변경되었다.

이렇게 추가하고 나서 실행해보면 기존과 다르게 .ts 파일을 빌드하는 과정이 추가되고 무수한 에러들이 발생했다.

에러 처리

"Module '...' was resolved to '...', but '--resolveJsonModule' is not used." 에러

.json 파일을 import 해서 사용하려는 경우 발생한 오류로 tsconfig.json에 아래와 같이 resolveJsonModule: true 항목을 추가한다.

{
  "compilerOptions": {
    // ...
    "resolveJsonModule" : true,
    // ...
  },
  // ...
}

"Parameter '...' implicitly has an 'any' type." 에러

javascript의 느슨한 형 변환을 방지하기 위해 type을 체크하면서 명시적 선언을 하기 위한 에러 메시지이다.

대략 다음과 같이 기존 코드에 대해 에러가 발생한다.

이 코드는 다음과 같이 형 선언을 추가하여 에러를 방지할 수 있다.

명확한 type이 지정되어야 하므로 다음과 같이 수정한다.

const getters = {
  getItemCategoryByName: (state : any) => (name: string) => {
    for (let i = 0; i < state.itemCategoryList.length; i++) {
      if (state.itemCategoryList[i].name === name) {
        return state.itemCategoryList[i];
      }
    }
    return null;
  },
};

TypeScript의 type은 아래 문서를 참고하면 된다.

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html

위에서는 any로 명시하였지만 interface를 따로 구축한 후엔 해당 type으로 명시를 변경해준다.

규모가 작은 프로젝트를 변경하면서 위 2가지 경우 외에 별다른 에러는 없었다.