타입스크립트 - tsconfig.json, 변수, 함수에 타입 지정하기

TS 공부 한다고 해놓고 계속 미루고 미루다 이제야 한다..ㅋㅋㅋㅠㅠ 귀찮아서 언젠가부터 미루던 썸네일도 오랜만에 적용해보았다.

tsconfig.json 파일 만들기

tsconfig.json 파일이 있는 경우 해당 디렉토리가 타입스크립트 프로젝트의 루트가 된다.
tsconfig.json 파일에 자바스크립트로 컴파일할 때 필요한 옵션을 작성해주면 된다.
브라우저는 타입 스크립트를 읽을 수 없기 때문에 자바스크립트로 변환하는 과정이 필요하다.

{   
  "compilerOptions" : {     
    "target": "es5",     
    "module": "commonjs",  
  } 
}

tsconfig.json 파일에 옵션은 뭘 넣어야 할지 몰라서 코딩애플님 영상을 참고하여 따라 적어보았다.

타입 지정하기 💌

변수 타입은 변수 이름 다음에 :type 형태로 작성해주기!

바닐라 자바스크립트는 다이나믹 타이핑을 지원하기 때문에 타입을 특별히 상관하지 않아도 되는 편리하면서도 불편한(?)언어이다.
하지만 규모가 큰 프로젝트의 경우 이러한 다이나믹 타이핑이 더 큰 단점으로 예기치 못한 오류를 발생 시킬 수 있는데 타입스크립트에서는 타입을 지정하기 때문에 타입 에러를 쉽게 찾을 수 있다.

1. 일반 변수

let user: string = "아이유";
console.log(user);

일반 변수를 사용한다면 위와 같이 변수명 : 타입 형태로 작성해주면 된다.
: 는 자바스크립트 코드에 타입을 부여한다는 의미이다. (Type Annotation)

2. 배열

const user: string[] = ["아이유", "이지은", "징짱"];
console.log(user);

배열로 정의하는 경우 변수명 :타입[] 형태로 작성해주면 된다.
또는 제네릭을 사용해서 정의도 가능하다.

const user : Array<string> = ["아이유", "이지은", "징짱"];
console.log(user);

제네릭을 사용할 때도 마찬가지로 변수명 : 제네릭<타입> 형태로 작성해주면 된다.

3. 튜플

타입스크립트는 배열과 비슷한 튜플 이라는 것도 있다.
배열과 다른 점은 배열은 길이, 타입이 고정되어있지 않지만 튜플은 길이와 타입이 고정되어 있다.

const user : [string, string, string]  = ["아이유", "이지은", "징짱"];
console.log(user);

길이가 고정되어 있기 때문에 만약 타입 부분을 :[string, string] 처럼 3개의 요소를 넣고자 하는데 2개만 작성했다면 다음과 같은 에러가 발생한다.

Type '[string, string, string]' is not assignable to type '[string, string]'.
  Source has 3 element(s) but target allows only 2.ts(2322)

심지어 에러 메시지가 요소가 3개 넣지 말라고 친절하게 알려준다. ㅎㅎ..

4. 객체

오브젝트를 타입 지정할 때도 마찬가지로 변수 다음에 : { key : value타입 } 을 작성해주면 된다.

const user : { name : string } = {
  name : "아이유"
};
console.log(user);

name이라는 key의 value로 string 타입이 들어올 것이라고 작성했는데 엉뚱하게 age를 작성해보았다.

/* 에러 코드 */
const user : { name : string } = {
  age : 20
};
/* 에러 메시지
Type '{ age: number; }' is not assignable to type '{ name: string; }'.
  Object literal may only specify known properties, and 'age' does not exist in type '{ name: string; }'
*/

타입스크립트에서는 age를 할당할 수 없다고 에러를 뿜어냈다. name : string을 넣으라고 뭐라 하는중 😑

/* 에러 코드 */
const user : { name : string, age : number } = {
  age : 20
};
console.log(user);

이번에는 age라는 키와 그 value 타입은 number일 것이라고 작성해주고 name은 넣지 않아보았다.
역시나 에러를 뱉는다.

/* 에러 메시지 */
Property 'name' is missing in type '{ age: number; }' but required in type '{ name: string; age: number; }'

name 넣는다면서 왜 안넣었어? 라고 ...
이렇게 반드시 넣어야 하는 것이 아니고 넣어도 되고 안넣어도 되는 선택 사항이라면 ? 를 추가로 붙여주어야 한다.

const user : { name? : string, age : number } = {
  age : 20
};
console.log(user);

name옆에 ? 를 써주면 에러 메시지가 사라진다.
?는 이 속성은 선택사항이라는 의미를 가지고 있기 때문이다.

const user : {  [key :string] : string } = {
  name : '아이유'
};
console.log(user);

오브젝트를 사용할 때 key값에도 타입을 지정해줄 수 있다.
키 값에도 타입을 지정해버리니 코드가 난잡해지는 것 같다. 아래 7번에 작성해놓은 것처럼 타입을 변수에 저장해서 사용하는 편이 깔끔해질 것 같다.

5. 다양한 타입을 지정하고 싶을 때

string도 되고 number도 되고 여러가지 타입을 넣고 싶을 때는 Union type을 이용할 수 있다.

const user : { name? : string, age : number, birthDay : string | number } = {
  age : 20,
  birthDay : 1023 // "1023" 으로 작성해도 됨
};
console.log(user);

버티컬 라인| 을 사용하면 or 처럼 사용할 수 있다.
지금 오브젝트의 birthDay의 타입으로 string 이나 number가 올 수 있다고 작성한 것과 같다.

const N : number[] | number = 1;
console.log(N);

버티컬 라인을 사용해서 배열 또는 일반 숫자 변수 가 올 수 있다! 와 같은 형태로도 사용할 수 있다.

6. boolean

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

bool 타입도 지정해줄 수 있다.
그런데 문득 드는 궁금증, falsy(예를 들면 0)한 것과 truthy(예를 들면 1)한 값을 넣으면 어떻게 될까?

/* 에러코드 */
const trueOrFalse: boolean = 0;
console.log(trueOrFalse);

/* 에러메시지 */
Type 'number' is not assignable to type 'boolean'.

응~ 어림도 없지. 안돼 돌아가ㅋㅋ 입구컷 당하는 것을 보니 falsy, truthy 같은 건 허용되지 않는 것 같다. 😶
짝퉁 타입은 취급도 안하겠다는 타입 스크립트쨩.

7. 변수에 타입 저장하기

타입도 너무 길다면 가독성, 재사용을 위해 변수처럼 사용할 수 있다.

type MyType = string;

const typeVariable : MyType = "문자열";
console.log(typeVariable);

type 이라는 키워드를 넣고 변수에 값 할당하듯이 이름 작명하고 타입 작성해주면 된다.
사용할 때도 변수 가져다 쓰듯이 타입 자리에 작명했던 타입 이름을 작성해주면 된다!

일반 변수와 타입 변수를 구분하기 위해 타입 변수는 작명할 때 맨 첫글자를 대문자로 시작하는 관습이 있다.

8. 함수에 타입 지정하기

function fx(v: void) {
  console.log(v);
}

fx(undefined);

진짜 의미 없는 함수 ㅋㅋㅋ이지만 void라는 타입도 있다. 함수도 마찬가지로 파라미터 넣는 부분에 변수 : 타입 형태로 작성해주면 된다.

지금은 인수에 들어오는 변수 타입만 작성해주었는데 함수는 반환값이 있는 애들도 있기 때문에 리턴 값 타입도 작성해줄 수 있다.

function fx(v: number) :number {
  return v + v;
}

console.log(fx(123)); // 246

처음 보자마자 아니 점점 뭔가 기괴하게 생긴 코드가 되는 것 같아서 낯설다...ㅜㅜ
많이 써보면 익숙해지겠지(?)

함수의 리턴 타입 설정은 독특하게도 파라미터 괄호 다음에 :타입 형태로 작성해주면 된다.

리턴타입 설정을 해주지 않아도 에러는 발생하지 않았다.

function fx(v: number) {
  return v + v;
}

console.log(fx(11)); // 246

리턴 타입 값을 지워봤는데 에러가 발생하지 않는 것을 보니 리턴 타입은 필수로 작성할 필요는 없는가보다.

함수의 리턴 타입을 반드시 맞춰줘야 하는 경우에 작성해주는 것이 좋을듯하다.

그래도 한번 더 확인해봐야 될 것 같아서 리턴 타입과 다른 이상한 것을 넣어보기로 했다.

/* 에러 코드 */
function fx(v: number) :number {
  return String(v);
}

console.log(fx(11));

이 함수의 리턴 타입은 number라고 명시했는데 함수는 string 타입을 반환하고 있어서 그런지 바로 에러를 뱉어냈다. (갱장해 엄청나)

/* 에러 메시지 */
Type 'string' is not assignable to type 'number'.

굉장히 깐깐해지는 것을 확인할 수 있었다. ㅎㅎ
아무튼 함수 반환 타입을 반드시 맞춰야 할 때는 반환 값 타입을 넣어주는 걸로!

---

참고 자료
타입스크립트 What is a tsconfig.json
타입스크립트 핸드북
타입스크립트 쓰는 이유 & 필수 문법 10분 정리