9. 적용 및 배포 테스트 + typescript 연습

현재까지 적용한 (craco, typescript, firebase, .. 등) 것들을 배포한 후, 정상작동하는지 확인 후, TypeScript 작성 방법을 학습했다.

1. 배포 테스트

• npm run build

🟥 에러 발생 :
[Craco-Alias Error] Cannot parse tsconfig.paths.json. Please validate it on https://jsonformatter.curiousconcept.com.

-> 해당 소스코드 끝의 컴마를 제거 후 다시 빌드 -> 성공

-> firebase deploy -> 적용 성공

2. TypeScript 학습

• 링크를 참조하여 연습해보았다.

1. 에러 해결

🟥 'practice.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. TS1208

-> tsconfig.json에 설정된 isolatedModules 설정은 모든 소스코드 파일을 모듈화시킨다.
모듈화 시키기 위해서는 소스코드 파일에서 import 또는 export 를 사용해야 하며, 해당 사항이 적용되어있지 않으면 에러를 출력한다.

-> practice.ts 하단에 export {}를 넣어서 에러를 제거했다.

2. 학습한 점

1) 기본

• TypeScript는 미리 지정한 타입 (number, number[], undefined 등)을 벗어나면 바로 에러를 띄우며, 컴파일되지 않게 한다.
• ts파일에서 명시된 타입은 컴파일 과정에서 사라진다.
• 함수에서 만약 아무것도 반환하지 않아야 한다면 반환 타입을 void로 설정한다.
• 타입 이외에도 체크해서 에러 출력하는 항목이 많다.
  - Property 'getArea' is missing in type 'Circle' but required in type 'Shape'
  • Property 'radius' has no initializer and is not definitely assigned in the constructor.
  • constructor에 public이나 private를 사용시 일일이 타입 지정 안해도 된다.

2) interface : 타입 지정시 사용되는 문법

• 일반 객체를 타입 지정하려면 다음과 같이 한다.
• interface도 상속이 가능하다 (extends).

interface Developer {
  name: string; 
  age?: number; //물음표-> 설정을 해도, 안해도 되는 값
  skills: string[];
}

const expert: Developer = {
  name: '김개발',
  skills: ['javascript', 'react']
};

3) type alias(별칭) : 특정 타입에 별칭을 붙일 때 사용

• type : 특정 타입에 별칭을 붙일 때 사용
• & : 두 개 이상의 타입들을 합쳐서 사용

type Person = {
  name: string;
  age?: number;
};


type Developer = Person & {
  skills: string[];
};

const person: Person = {
  name: '김사람'
};

const expert: Developer = {
  name: '김개발',
  skills: ['javascript', 'react']
};

type People = Person[]; 
const people: People = [person, expert];

type Color = 'red' | 'orange' | 'yellow';
const color: Color = 'red';
const colors: Color[] = ['red', 'orange'];

4) Generics : 여러 종류의 타입에 대해 호환을 맞춰야될 때

function merge<A, B>(a: A, b: B): A & B {
  return {
    ...a,
    ...b
  };
}

const merged = merge({ foo: 1 }, { bar: 1 });

function wrap<T>(param: T) {
  return {
    param
  }
}

const wrapped = wrap(10);

• 파라미터로 다양한 타입을 넣거나 타입 지원을 지킬 수 있다.

4-1) interface + Generics

interface Items<T> {
  list: T[];
}

const items: Items<string> = {
  list: ['a', 'b', 'c']
};

4-2) type + Generics

type Items<T> = {
  list: T[];
};

const items: Items<string> = {
  list: ['a', 'b', 'c']
};

4-3) class + Generics

class Queue<T> {
  list: T[] = [];
  get length() {
    return this.list.length;
  }
  enqueue(item: T) {
    this.list.push(item);
  }
  dequeue() {
    return this.list.shift();
  }
}

const queue = new Queue<number>();
queue.enqueue(0);
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
queue.enqueue(4);