TypeScript 시작하기 & React에서 Typescript 정리

C언어나 자바를 사용했었던 나에게 파이썬이나 자바스크립트는 어색한 부분이 있었다.

시간이 지나 이제는 익숙해졌지만, 여전히 자바스크립트를 사용하며 마주하는 문제가 있다.

바로, 자바나 C언어와는 다르게 변수에 type을 지정하지 않는 자바스크립트의 특성 때문에 가끔 예상치 못한 오류가 발생하는 것이다.

이러한 문제를 해결 해주는 TypeScript(타입스크립트)의 편리함을 알아가보고자 간단하게나마 타입스크립트를 사용해보기로 하였다.

설치

• npm install typescript --save-dev

또는 글로벌 설치

• npm i -g typescript

타입스크립트의 확장자

🥥 타입스크립트의 확장자는 .ts이다

🥥 리액트에서 컴포넌트를 표현할 땐, .jsx 대신 .tsx를 사용할 수 있다.

간단한 사용 예

• 변수를 선언할 때 : type으로 타입을 미리 선언한다.

for (let i: number = 0; i < 5; ++i) {
  console.log(i, typeof i);
}

/* 출력 값

0 number
1 number
2 number
3 number
4 number

*/

• 배열은 type 옆에 []를 작성함으로써 선언한다.

let names: string[] = ["AA", "CAT", "Zombie"];
names.push("HA HA HA");

for(let str of names){
  console.log(str);
}

/* 출력 값

AA
CAT
Zombie
HA HA HA

*/

• 그 이외의 다른 타입의 변수들

const float: number = 3.1415921;
console.log(float);

const same: boolean = false;
console.log(same);

const obj: object = {"hi": 1, "bye": -1}
console.log(obj);

/* 출력 값

3.1415921
false
{ hi: 1, bye: -1 }

*/

• 함수의 인자

const double = (num1: number, num2: string) => {
  return num1 + parseInt(num2);
}

console.log(double(100, "-260")); // -160

• 함수의 리턴값의 타입 역시 정해둘 수 있다.

const minus = (num1: number, num2: number): number => {
  return num1 - num2;
}

console.log(minus(100, -260)); // 360

• 배열을 제네릭 타입으로 선언할 수 있고, 여러 타입을 가질 수 있는 배열을 사용할 수도 있다.

const getArray = (num: number, str: string): Array<number | string> => {
  return [num , str];
}

console.log(getArray(-2, "안녕하세요!")); // [ -2, '안녕하세요!' ]

🍍 또한, class를 사용할 때 마치 java처럼 변수에 private나 public을 사용할 수 있다.

참고한 공식문서

🍊 타입스크립트 공식문서 : https://www.typescriptlang.org/docs/

• 한글 : https://www.typescriptlang.org/ko/

🍋 위의 사이트의 번역 프로젝트 : https://typescript-kr.github.io/

리액트에서 타입스크립트를 사용하며 기존의 자바스크립트에서 사용했던 문법과 달랐던 점을 정리하기로 했다.

• 이 포스트에서는 interface, React.FC, declare와 같은 키워드에 대해서 정리한다.
  🍄 CRA에서 타입스크립트 탬플릿으로 타입스크립트가 적용된 리액트 프로젝트를 시작할 수 있다.
  🍄 npx create-react-app my-app --template typescriptinterface

• interface는 객체 내부의 어떤 이름의 프로퍼티가 있으며 이 프로퍼티의 타입이 무엇인지 나타내기 위해서 사용한다.
• 변수, 함수, 클래스에 사용되어 어떤 프로퍼티를 가지는 객체를 인자로 사용하는지 알려주는 역할을 한다.

interface dataProp {
    name: string;
    age: number;
    family: Array<string>;
}

interface ComponentProps {
    data: dataProp; // 위의 선언된 객체
    onClick: () => void;
}

🧀 type은 interface와 유사하게 사용될 수 있다.

🧀 다만, 확장하는 방법이 다르고 interface는 객체에만 사용할 수 있지만 type은 객체와 더불어 변수, 함수를 선언하는 데 사용할 수도 있다.

🧀 interface는 extends나 새로 선언하는 것으로 확장할 수 있고, type은 확장하기 위해서 &를 사용한다.

🧀 그러나 interface를 사용하는 것이 더 성능이 좋다고 하여 interface를 주로 사용했다.

🥓 사실 타입스크립트를 사용하며 객체를 써야 했을 땐 편리한 {} as any 를 많이 사용하게 되었던 것 같다.

🥓 useState에 들어가는 값이 객체이고, 이를 초기화 할 땐 다음과 같이 사용할 수 있다.

    const [person, setPerson] = useState<dataProp>({
    	name: "Lee",
        age: 35,
        family: ["Park", "Kim"],
    });

React.FC

• 리액트에서 상태를 하위 컴포넌트에 내려보내기 위해서 props를 사용한다.
• 당신이 만약 타입스크립트를 사용하면, 기존의 리액트에서 사용했던 방식으로 props를 사용했을 때 오류가 발생하는 것을 알 수 있다.
• 타입스크립트를 사용한 리액트에서 컴포넌트의 타입을 지정해주고 props의 정보도 전달해줄 필요가 있다.
• 함수형 컴포넌트를 사용한다면 컴포넌트의 타입은 React.FC이 된다.

interface dataProp {
    name: string;
    age: number;
    family: Array<string>;
}

interface ComponentProps {
    data: dataProp; // 위의 선언된 객체
    onClick: () => void;
}

const Home: React.FC<ComponentProps> = ({data, onClick}) => {
    return (
        <div onClick={onClick}>
            <h1>이름: {data.name}</h1>
            <h2>나이: {data.age}</h2>
            {data.family.map(el => {
	            return <p>가족: {el}</p>
            })}
        </div>
    );
}

export default Home;

🥩 React.FC는 암묵적으로 children props를 항상 포함하고 제네릭 문법이 지원이 안되는 등의 문제가 있기에, props에 타입을 지정해주는 방법을 사용할 수도 있다.

🥩 다음과 같이 props의 타입을 직접 지정해줄 수 있다.

interface HomeProps {
	name: string;
}

const Home = (props: HomeProps) => {
	return <p>{props.name}</p>;
};

export default Home;

declare

• declare를 통해서 타입이 정해져있지 않으며 이미 존재하는 함수나 변수를 컴퍼일러에게 알려줄 수 있다. (이 코드는 자바스크립트로 컴파일되지 않는다)
• 이 변수나 함수의 타입역시 컴파일러에게 알려줄 수 있다. 타입을 설정해두어 타입스크립트 컴파일러가 컴파일할 수 있도록 한다.
• 카카오 API SDK를 사용하면서 window 객체에 접근할 필요가 있었는데 이 부분에서 오류가 있었고(존재하지만, 타입이 지정되어 있지 않음), 이를 해결하기 위해서 declare를 사용하였다.

declare global { // 현재 파일에서 글로벌 변수로 선언
  interface Window { // Window 객체 재선언으로 확장
    kakao: any;
  }
}

🥝 tsconfig.json 파일에서 타입스크립트와 관련된 설정을 변경할 수 있다.