[230530] Typescript찍먹 + 환경 설정 세팅

분명 작년에 프론트 엔드 공고를 볼 때는 타입스크립트는 우대사항에 있었던 것 같은데 최근에 공고들에서는 타입스크립트가 자격 요건에 들어가 있는 공고들이 많았습니다. 그래서 그런지 코스에서도 타입스크립트가 추가되었고 이왕 배우는거 제대로 배우고자 스터디도 시작했습니다. 주말마다 인터넷에 있는 다양한 무료 강의 와 자료집을 우선 훑고 '이펙티브 타입스크립트'와 함께 공부할 예정입니다. 

가능하다면 만들어두었던 프로젝트를 타입스크립트로 리펙토링 해보는 것도 좋을 것 같아요. 

 

 

기본 타입스크립트 환경 설정 

# mkdir typescript-project  을 통해 새로운 폴더에 프로젝트를 생성한 후 # npm init -y  으로 npm 초기화를 통해 package.json파일을 생성합니다. (npm init -y을 하면 해당 폴더 안에 package.json파일이 자동으로 생성됩니다. )

 

#npm install typescript --save-dev 로 타입스크립트 라이브러리를 설치합니다. 

 

타입스크립트 설정 파일인 tsconfig.json 파일을 생성 후 기본 값을 추가합니다. 

 

추가적으로 원하는 세팅은 user > setting.json에서 추가해주면 됩니다. 

 

* .eslintrc.js 파일은 새로 생성을 한 후 작성을 해주어야 하는데 이 파일에는 prettier과 같은 다운받은 plugin에 대한 설정을 할 수 있습니다.  * npm i -D ....를 통해 설치 후 파일을 생성하여 세팅을 원하는 대로 세팅해줍니다. 

 

 

enum 

컴파일 시점(해석)과 런 타임 시점(자스로 변환된 것을 사용)의 차이가 있다. 
enum 안에 요소들은 일관되게 하는 것이 좋다. 복합 이넘 낫 굳 

 

 

 

어려웠던 예제 1 : Union

function printAge(person){
  let age;
  if(typeof person.age === 'number' || typeof person.age === 'string'){
    age = person.age.toString();
  }
  console.log(`${person.name}의 나이는 ${age}살 입니다.`);
}

const kimcoding = {
  name: '김코딩',
  age: 30,
}

const parhacker = {
	name: '박해커',
    age: '서른',
}

자바스크립트로 작성 된 이 코드를 타입스크립트로 변환하면 아래와 같습니다. 

 

- 변환 1 : 인터페이스 사용X

function printAge(person: { name: string; age: string | number }): void {
  let age: string;
  if (typeof person.age === 'number' || typeof person.age === 'string') {
    age = person.age.toString();
  }
  console.log(`${person.name}의 나이는 ${age}살 입니다.`);
}

const kimcoding = {
  name: '김코딩',
  age: 30,
};

const parhacker = {
  name: '박해커',
  age: '서른',
};

 

- 변환2 : 인터페이스 사용

interface Person{
  name: string;
  age: number | string;
  
}

function printAge(person: Person): void {
  let age: string;
  if (typeof person.age === 'number' || typeof person.age === 'string') {
    age = person.age.toString();
  }
  console.log(`${person.name}의 나이는 ${age}살 입니다.`);
}

const kimcoding = {
  name: '김코딩',
  age: 30,
};

const parhacker = {
  name: '박해커',
  age: '서른',
};

printAge(kimcoding);
printAge(parhacker);

* 인터페이스는 가독성을 높일 뿐만이 아니라, 객체의 구조와 타입을 명시하여 코드를 이해하기 쉽게 만들어줍니다. 또한 변경사항이 필요할 때 인터페이스를 수정하면 됨으로써 코드의 유지보수성 향상된다는 장점이 있습니다. 

 

 

 

 

Union 타입과 Intersection 타입

 

[1] Union 타입 ( | )

- 타입을 추론할 수 있어 타입에 관련된 API를 자동완성으로 쉽게 얻을 수 있습니다. 

- Union타입은 Union타입으로 정의한 둘 이상의 타입 내의 공통 프로퍼티에만 접근할 수 있어 " 타입 가드 " 가 필요합니다. 

Union 타입 A ..{ name: string; age: number; }
Union 타입 B ..{ name:string, skill: string; }
이렇게 존재할 때, function unionType(user:A | B ) {} 로 매개변수 타입을 A 혹은 B 로 받으니까 skill:string도 사용할 수 있겠구나 라고 생각할 수 있지만 아닙니다.
   * 함수를 호출하는 시점에 A타입이 올지 B 타입이 올지 알 수 없기 때문에 타입스크립트는 오류가 안 나는 방향으로 추론하기 위해 공통된  타입만 허용합니다. ..name: string

타입가드 를 이용하여 타입의 범위를 좁힌다면 skill: string 도 사용할 수 있습니다. 
  * const emma:  A  = {name: 'emma', age: 28 } 
  * const kim: B = { name: 'kim', skill: 'language' }
 이렇게 하면 function uionType(user: A | B) {}   //무리 없이 user.name / user.age / user.skill 사용 가능합니다. 

 

- 인자를 보낼 때 프로퍼티 중 어떤 것을 보낼 지 선택할 수 있습니다. 

 

[2] Intersection타입 ( & )

- 여러 타입을 모두 만족하는 하나의 타입을 의미합니다.

- 둘 이상의 타입을 결합해 새로운 타입을 만들어 내는 방법으로 "타입 가드 " 가 필요하지 않습니다. 

- 인자를 보낼 때 프로퍼티 전부를 보내주어야 합니다.