TypeScript

타입스크립트?

타입스크립트는 자바스크립트의 타입을 강제시키는 언어이다.

자바스크립트는 파이썬처럼 따로 타입이 없어서 변수에 아무 값을 넣어줘도 문제가 없다.

 

아래 코드처럼 타입에 상관없이 number에 재할당이 가능한 것이 자바스크립트이다.

let x = 1;
x = "1";

 

 

 

타입스크립트는 변수의 타입을 강제시켜서 위와 같이 재할당할 수 없게 한다.

let x: number = 1;
x = "1"; // 재할당 안됨

 

---

 

타입스크립트를 사용하는 이유

다른 언어와 달리 파이썬, 자바스크립트는 직접 사용해 보면 타입을 작성하지 않아도 돼서 코드 작성이 아주 편하다.

하지만 여러 사람과 함께 규모가 있는 서비스를 개발할 때는 타입이 강제되지 않아서 버그가 발생할 수 있다.

 

아래 코드를 버튼을 클릭하면 count가 1씩 증가하는 시스템이라고 생각해 보자.

let count = "0"

const countUp = () => {
	count = count + 1;
}

countUp();

 

버튼을 클릭할수록 count는 01111...로 이상한 값이 된다.

이는 count의 초기값이 문자열이기 때문에 자바스크립트가 자동으로 1을 문자열로 변환하여 더했기 때문에 발생한 버그이다.

 

위 예시는 아주 간단한 초보적인 실수이지만, 규모가 크고 코드가 복잡한 상황에서 변수 하나의 타입의 버그를 찾기는 굉장히 어려울 것이다.

 

따라서 타입스크립트를 통해 변수나 함수, 함수의 인자 등의 타입을 강제해, 후에 생길 버그를 미리 예방하는 것이다.

 

---

 

타입스크립트 사용 방법

 

타입스크립트 설치 방법은 타입스크립트 홈페이지에 자세히 나와있다.

 

설치 후에는 프로젝트 안에 tsconfig.json 파일을 만들어야 한다.

 

 

next.js를 사용하고 있다면 yarn dev 명령어를 입력한다.

그러면 next.js가 자동으로 tsconfig.json 파일의 내용을 채워준다.

 

 

여기서 strict라고 하는 값을 true로 바꿔준다.

strict를 true 값으로 변경하면 더 엄격한 타입스크립트를 사용하게 된다.

 

그리고 js파일을 ts로 jsx파일을 tsx파일로 변경해줘야 한다.

 

 

타입스크립트의 사용 방법은 간단하다.

변수의 경우 변수 뒤에 콜론(:)을 붙인 뒤 타입을 정해주면 된다.

const name: string = "철용";
const age: number = 26;
const genius: boolean = true;
const hobbies: string[] = ["게임", "음악감상"];

 

 

타입을 하나만 정할 수 있는 것은 아니다.

"|" 기호로 타입을 여러 개로 정할 수 있다.

const x: string | number = "hi" // string이나 number타입인 x
const y: (string | number | boolean)[] = ["hi", 26, false]; // string, number, boolean 타입의 원소를 가지는 배열

 

 

 

함수의 경우 함수 매개변수의 타입과 반환 타입을 정해줄 수 있다.

const sum = (x: number, y: number): number => {
	return x + y
}

 

 

interface로 타입을 따로 만들 수도 있다.

interface IMyProfile {
    name: string;
    age: number;
    hobbies: string[];
}

const people: IMyProfile = {
    name: "철용",
    age: 26,
    hoobies: ["게임", "음악감상"]
}

이때 people 객체는 name, age, hoobies를 모두 가지고 있어야 한다.

 

 

interface로 타입을 만들 때, 콜론(:) 앞에 "?" 기호를 붙이면 있어도 되고, 없어도 되는 변수를 정의할 수 있다.

interface IMyProfile {
    name: string;
    age: number;
    hoobies?: string[];
}

const people: IMyProfile = {
    name: "동혁",
    age: 26
}

 

 

utility 타입을 통해 interface로 만든 타입을 다양하게 사용할 수 있다.

interface IMyProfle {
    name: string;
    age: number;
    schole: string;
    hoobies: string[];
}

// Partial 타입, IMyProfile의 모든 속성들을 있어도 되고 없어도 되는 속성으로 변경
type type1 = Partial<IMyProfile>

// Required 타입, Partial 타입과 반대
type type2 = Required<IMyProfile>

// Pick 타입, IMyProfile에서 name, age속성만 사용해서 새로운 타입을 생성
type type3 = Pick<IMyProfile, "name" | "age">

// Omit 타입, IMyProfile에서 school 속성만 뺀 새로운 타입을 생성
type type4 = Omit<IMyProfile, "school">

// Record타입, People의 원소들을 key로하고 IMyProfile을 value로 하는 객체를 생성
type People = "철용" | "희찬" | "동혁";
type type5 = Record<People, IMyProfile>

여기서 type과 interface의 차이는 선언병합이 가능한가의 차이이다.

interface는 선언 후에 다른 속성을 선언해도 오류가 발생하지 않는다.

 

 

API에서 데이터를 받아오거나, 함수 매개변수의 타입을 잘 모를 때는 any와 unknown을 사용할 수 있다.

const myFunc = (x: any) => {
    const result = x + 1;
    return result;
}

any를 사용할 경우 어떤 타입이라도 모두 허용한다는 뜻이다. 자바스크립트를 쓸 때와 같기 때문에 사용하지 않는 것이 좋다.

 

const myFunc = (x: unknown) => {
	const result = x + 1;
    return result;
}

unknown은 타입이 지정되지 않았으므로 오류가 발생할 수 있다는 것을 알리는 타입이다.

 

 

---

 

graphql-codegen

 

graphql의 경우 graphql-codegen이라는 라이브러리를 통해서 graphql API의 타입을 모두 불러올 수 있다.

프로젝트에서 graphql-codegen을 설치해야 한다. graphql-codegen 홈페이지에 install 방법이 잘 나와있다.

 

설치가 끝났으면 프로젝트에 codegen.yaml 파일을 생성해 준다.

 

 

이 파일 안에 다음과 같이 코드를 작성한다.

들여 쓰기가 어긋나면 오류가 발생하기 때문에 들여 쓰기에 주의해야 한다.

generates의 파일 경로는 본인이 원하는 경로로 설정하면 된다.

 

 

그리고 package.json 파일에 아래 코드를 추가한다.

 

 

이제 yarn generate 명령어를 실행시키면 자동으로 원하는 폴더 위치에 graphql API의 type이 불러와진다.

 

 

---

 

Generic 타입

 

generic 타입을 사용하면 함수의 인자로 들어오는 타입에 따라 반환되는 값의 타입을 결정할 수 있다.

 

괄호 앞에 generic 타입을 정의해주는 것을 제외하고 기존의 함수에 매개변수와 반환값에 타입을 적어주는 방식과 동일하다.

generic 타입의 이름은 아무렇게나 지어도 된다.

 

 

이렇게 generic 타입을 사용하면 인자의 타입과 반환값의 타입이 같은 것을 확인할 수 있다.