[Typescript] 기존 React + js 프로젝트 ts로 바꾸기

Typescript

참고 : https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html (Typescript 공식 사이트)

 

1. 배우는 이유

JS에서는 Type이 계속 체크되지 않는다.

 

1. 이는 암묵적 형변환, hoisting, 복잡성 문제를 일으킬 수 있다. 이러한 코드 상의 예상치 못한 버그를 없애기 위해 typescript를 주로 사용한다.

hoisting : 끌어올린다는 뜻. javascript에서 선언문을 끌어올려 코드에서 사용할 때 순서에 상관없이 사용 가능하도록 하는 기술.

typescript는 복잡한 예외처리 코드 없이 이를 수행한다.

 

2. 협업 시에나 추후에 본인이 짠 코드를 보았을 때 타입이 정의되어 있지 않다면 하나씩 변수를 찍어보는 수밖에 없다. 이러한 불편을 막고 개발 생산성을 높이기 위햇 typescript를 사용한다.

 

2. 기초

interface User {
  name: string;
  id: number;
}

const user: User = {
  name: "Hayes",
  id: 0,
};

위와 같이 구현하면, user라는 변수는 User라는 인터페이스와 타입이 동일해야함을 알 수 있다.

typescript는 기존의 javascript 타입에서 추가적으로 몇가지 타입을 더 갖는다. 그것은 any(뭐든지 가능), unknown(타입을 정하라고 명시), never(이 타입은 절대 안됨), void(undefined를 반환하거나 반환하는 값이 없는 함수)

 

2.1. Composing

복잡한 타입을 만드는 방법에는 두가지가 있다.

• Unions
• Generics

 

2.1.1. Unions

string이나 number 들의 세트를 한 번에 정의할 수 있다.

type WindowStates = "open" | "closed" | "minimized";

뿐만 아니라 서로 다른 type을 합칠 수도 있다.

 

2.1.2. Generics

다른 언어에서의 제네릭과 같은 의미이다.

interface Backpack<Type>{
    add: (obj: Type) => void;
    get: () => Type;
}

declare const backpack: BackPack<string>;

 

2.2. Structural Type System

typescript의 기초 원리는 type check 시 해당 변수가 가지고 있는 모양에 집중하는 것이다. 이것을 duck typing 또는 structural typing이라고 부른다.

예를 들어 dictionary 또는 map이라고 불리는 structure는 안에 key, value가 몇 쌍이 있던 똑같은 모양으로 보는 것이다.

 

3. js파일을 ts파일로 바꾸기

js파일을 ts파일로 바꾸니까 생기는 무수히 많은 에러...

아래의 과정을 거쳐서 해결하였다.

 

• https://velog.io/@kyusung/eslint-tslint-config
• https://flamingotiger.github.io/javascript/eslint-setup/#2-1-eslint-config-airbnb-%EB%A1%9C-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

위의 블로그를 참고해서 .eslintrc 파일을 setting해주었다.

 

• https://typescript-kr.github.io/pages/tsconfig.json.html

typescript가 깔려있지 않대서, typescript를 설치해주니까 tsconfig.json 파일이 생겼다.

 

• https://github.com/facebook/create-react-app/issues/10112

갑자기 appTsConfig.compilerOptions[option] = true 에러가 나와서 해결하였다. tsconfig.json 파일을 없애고 다시 만드는 식으로 구동하면 된다.

 

• https://chinsun9.github.io/
  • f1 => select typescript version => use Workspace version

VScode에서 react-jsx가 없다고, typescript를 더 높은 버전을 쓰라해서 해결하였다. VScode에서의 typescript 사용 setting을 바꿔주면 된다.

 

• hini7.tistory.com/147

An import path cannot end with a '.tsx' extension. Consider importing './App' instead. 에러가 떠서 해결하였다. 관련 rule을 비활성화 처리해주면 된다.

 

• https://typescript-kr.github.io/pages/jsx.html

tsx로 파일 모두 변경하는 중 typescript 파일의 jsx를 인식하지 못하는 오류가 발생하여 해결하였다. 파일 이름을 .tsx 확장자로 지정하고 tsconfig.json 파일의 jsx 속성을 react-jsx로 하면 된다.