ReactNative에서 TypeScript?

ReactNative에서 하단 네비게이션 바를 구현하려고 React Navigation 알아보는데, 주로 TypeScript를 사용하는 듯 했다. 처음에는 낯선 이름과 귀찮음에 피하고자 다른 방법을 찾았었다ㅋㅋ

https://jeffgukang.github.io/react-native-tutorial/docs/router-tutorial/02-react-navigation-tab/react-navigation-tab-kr.html

react-navigation-tab

이 방법도 하단 탭 바를 구현하는데 지장은 없어보였지만 아마 리액트가 변하기 전 인듯 했다.

그래서 이내 많은 사람들이 지금 TypeScript로 React Navigation을 구현하는 데에는 이유가 있겠거니.. 하는 생각으로 다시 마음을 다잡고 TypeScript를 알아보기 시작했다. 생각보다 Js와 크게 다르지 않고 어려워보이지 않아서 간단한 강의 몇개만 들어볼 생각으로 유투브를 찾아봤다.

 

https://www.youtube.com/watch?v=xkpcNolC270

코딩애플님의 타입스크립트 쓰는 이유 & 필수 문법 10분 정리 강좌다. 13분 27초!

 

요약하자면, TypeScript는 JavaScript에 Type문법 부분을 업그레이드한 버전이라고 생각하면 된다.

규모가 큰 프로젝트에서는 자유도와 유연성이 높아 오히려 에러의 위험이 있는 JavaScript보다 TypeScript를 주로 사용한다고 한다. 또한 TypeScript는 퀄리티 좋은 에러메시지를 알려준다는 장점이 있다.

 

TypeScript를 사용한 react-native 프로젝트를 생성하는 명령은 다음과 같다 

npx react-native init 프로젝트명 --template react-native-template-typescript

 

이 강의를 들으면서 TypeScript를 연습할 때에는 

1. 윈도우에서 cmd를 열고 node -v 로 node.js가 최신버전으로 설치되어있는지 확인한다. (안되어있으면 설치한다.)

2. VScode 에디터를 연다.

3. TypeScript를 연습할 새 폴더를 생성한 후 터미널에서 npm install -g typescript

4. 폴더 안에 index.ts과 tsconfig.json 파일 생성

5. 터미널에서 tsc -w 입력해둔다. (ts파일을 js로 변환하기 위함)

기본 설정을 이정도 해두고, 강의를 따라 들으면 된다!

 

나는 주로 한 파일에 주석으로 관련 설명들을 모두 적어두는 편이다. 이렇게하면 나중에 참고하기가 편하당ㅋ

tsconfig.json

{
  "compilerOptions": {
    // es3는 예전 자바 문법
    // es5은 2010년 이후
    // esnext는 최신 자바 문법
    "target": "ES5",
    "module": "commonjs"
  }
}

index.js

// 타입은 변수에 담아 쓸 수 있음 Type Alias
type MyType = string | number; // 보통 타입 변수명은 대문자로 지정함
type MemberTuple = [number, boolean]; // 튜플 타입
type MemberObject1 = {
  // object 타입
  name: string;
};
type MemberObject2 = {
  // 글자로 된 모든 object 속성 타입 :string으로 지정
  [key: string]: string;
};

let titleArray: string[] = ["ji", "hi"];
let titleObject1: { name: string } = { name: "kim" };
let titleObject2: { name?: string } = { name: "kim" }; // name 속성은 옵션임을 표현
let title1: string = "ji";
let title2: string | number = "ji";
let title3: MyType = "ji";
title2 = 12;

let john1: MemberTuple = [123, true];
let john2: MemberObject1 = { name: "kim" };

// 파라미터 타입, 리턴 타입 지정 가능
function myFunction(x: number): number {
  return x * 2;
}

// 클래스 타입 지정 방법
class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}