[TS] React Typescript 변환하기

TypeScript

TypeScript는 JavaScript의 변수에 형식을 지정한 파생 언어이다.

아래를 참고해 기본 구조를 먼저 익히자.

TypeScript 가이드북 - TypeScript Guidebook

 

설치하기

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

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

Tsconfig 파일 생성하기

{
  "compilerOptions": {
    "allowJs": true,
    "target": "ES5",
    "outDir": "./dist",
    "moduleResolution": "Node",
    "lib": ["ES2015", "DOM", "DOM.Iterable"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Typescript가 적용되는 세세한 부분을 설정할 수 있다.

 

패키지 재설치

yarn 혹은 npm 사이트에서 기존에 설치되어 있던 패키지들을 Typescript를 지원하는 패키지로 재설치하자.

3번째에 보여지는 ts를 지원하는 패키지

 

코드 변환하기

많은 자료들을 찾아보았을 때, JS에서 TS로 변환 시에 여러가지 방법이 존재한다.

모든 변수를 일단 any로 한 후 서서히 프로젝트를 변경하는 방법, 파일 하나씩 변경하는 방법, strict 모드를 false로 설정 후 변경하는 방법 등이 있다. 기호와 상황에 맞게 선택하고 주요 부분만 지키며 진행하자.

• js, jsx를 tsx 파일로 변경
• 기존 설치된 패키지의 충돌을 확인하고 TS를 지원하는 패키지로 재 설치하자
• Any 타입의 사용을 최대한 지양하고, 타입을 지정할 수 있는 모든 곳에 타입을 지정하자
• As를 최대한 사용하지 않도록 타입을 정확히 명시하자

 

 

TypeScript 기본

List 타입

let a : Array<number> = [];
let b : number[] = [];

두 가지 형태로 List의 선언이 가능하다.

 

React Hook에 적용하기

//UseContext
const { cryptoListObject }: { cryptoListObject: any } =
    useContext(GlobalContext);
//UseState
const [recommandedKeyword, setRecommendedKeyword] = useState<Array<any>>([]);

Hook도 일종의 변수이므로 타입을 명시해주어야한다.

 

비구조화 할당

  function onChangeInput({ target: { value } }: { target: { value: string } })
  
  const CryptoSearchBox = ({ onSelected }: { onSelected: Function }) =>

비구조화 할당의 경우는 이와 같이 이중으로 작성한다.

 

Interface

interface student {
  name?: string;
  readonly index?: number; //변경 불가
}

구조체를 interface라는 이름으로 선언 가능하다.

 

Enum

enum Color {Red, Green, Blue}
let color: Color = Color.Green;

Enum을 드디어 TypeScript에서는 사용할 수 있다!

 

Event 프로퍼티

  function onClickHandler(e) {
    setShowLoginModal(true);
  }
  
  <Button onClick={onClickHandler}/>

onClick과 같은 기본으로 제공되는 함수의 프로퍼티의 경우 고유의 Event 객체 타입이 존재한다.

우리가 잘알고 있는 e.target.value와 같은 속성들이 고유 Event 객체 타입의 속성이다.

TypeScript에서는 고유 객체 타입을 찾아서 타입을 지정해주거나 any로 선언하면 된다.

  function onClickHandler(e : any) //or
  function onClickHandler(e: React.MouseEvent<HTMLButtonElement, MouseEvent>)

프로퍼티 속성을 찾아 표기해주거나 any로 간단하게 나타낼 수 있다.

기본 형태로 작성하면 type을 확인할 수 있다.

 

 

에러 해결

> expected 에러

Operator '<' cannot be applied to types 'boolean' and 'RegExp'.ts

해결

ts가 아닌 React 파일인 tsx파일로 변경해주면 해결된다.

 

 

Overload 에러

function add(a: number, b: number): void;
function add(a: string, b: string): void;

overload란 동일한 함수 이름으로 프로퍼티에 따라 내용과 출력값이 여러가지인 함수를 의미한다.

기존 프로젝트에서 사용하던 다국적 언어 지원 라이브러리인 i18n에서 사용하던 t라는 함수가 overload 되어 있었고, string 출력 값만을 받아 사용해야하므로 아래와 같이 해결했다.

해결

<div>

    {t(e.name)}

    //아래와 같이 반환값을 string으로 정확히 명시했다.
    {t<string>(e.name)}
    //혹은 `$`로 감싸 html 문자 태그임을 확실히 할 수 있다.
    {`${t{e.name)}`}

</div>

 

 

Object is possibly 'null' 에러

객체에서 발생하는 문제로 interface가 선언되어 있지만 실제 객체의 내용이 비어있을 때 참조시 발생한다.

?(Optional Chaining) 혹은 삼항 연산자, if문을 사용해 예외처리 할 수 있다.

Optional Chaining은 필수적이지 않은 변수를 표현할 때 사용하는 것으로 값이 null이나 undefined 이어도 됨을 선언한다.

{authService.currentUser.displayName}

//옵셔널 체이닝 사용
{authService.currentUser?.displayName}

TypeScript에서 객체는 non-nullable이지만, Optional Chaining으로 null이어도 됨을 선언하고, 없다면 공백을 출력한다.

 

 

Definite Assignment Assertions

?가 nullable이어도 되는 경우라면 !는 null이 될 수 없는 변수를 표현할 때 사용한다.

다만, 다른 언어들과는 다르게 기본적으로 JavaScript의 성질을 따라 모든 변수가 null을 가질 수 있어 아래처럼 속성 편집을 통해 null을 방지하자.

tsconfig.json

strictNullChecks": true

TypeScript 설정을 위와 같이 하는 경우, 일반 데이터 타입은 nullable이 될 수 없고, union(|)이나 any, null, undefined 타입을 직접 사용해야 nullable한 변수를 생성할 수 있다. 

 

let name : string | null;

createStudent(name!);

function createStudent(name : string) : void {} //여기서는 name이 nullable이 아님

TypeScript에서는 nullable 변수를 선언시 optional chaining이 아닌 union으로 null이 가능함을 직접적으로 명시하는게 일반적이다.

그리고, ! (Definite Assignment Assertions)를 필요에 따라 사용하여 nullable 변수가 null이 아님을 확정짓고 non-nullable로 변환할 수 있다. 이 때, null이라면 에러가 발생한다. 이 부분은 다른 언어들과 동일하다.