[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 5일차 후기

 

 

타입스크립트란?

 

타입스크립트는 자바스크립트의 슈퍼셋이다. 타입을 지정해줌으로써 에러를 사전에 방지할 수 있고 vsCode가 타입을 통해 추론하여 자동완성 기능을 제공하니 개발 생산성이 향상된다. 그리고 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다.

 

1. 타입추론 : 타입스크립트가 해당 변수의 타입을 추론하는 방법. 변수 선언시 명시하지 않아도 할당된 값을 통해 타입을 추론해준다.

 

2. 타입명시 : 변수 선언시 타입을 명시하는 방법. 변수명 뒤에 콜론(:)을 붙여 명시

  const num: number = 10;
  const arr: number[] = [1, 2, 3];
  const arr2: [number, string, number] = [1, "A", 3]; // 튜플(tuple) : 길이가 고정된 배열.
  const arr3: (string | number)[] = [1, "A", 3];
  const obj: {} = {};
  const obj2: { name: string; age: number } = { name: "kim", age: 20 };

 

3. 리터럴 : string이나 number을 명확하게 지정하는 방법. 선언한 값만 써야함.

  let num: 10 | 20 = 10;
  let str: "A" | "B" = "A";
  let obj: { name: "kim" } = {
    name: "kim",
  };

 

4. 타입 연산자(Type Operator) : 타입을 조작하는 연산자. 

1) 유니온 타입 : OR 연산자(|)를 이용해 여러 타입 중 하나를 선택

2) 인터섹션 타입 : AND 연산자(&)를 이용해 여러 타입을 조합할 수 있음

 

5. 인터페이스 : 객체의 타입을 정의하는 방법

  interface IUser {
    name: string;
    readonly age: number; // 리드온리 : 정의된 타입 변경불가
    height?: number; // 옵셔널 프로퍼티
    gender: string;
  }
  
  // 상속
    interface IJob extends IUser {
    title: string; // 직업의 이름
  }

 

 

6. 타입별칭(Type Alias) : 새로운 타입을 정의하는 방법. 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같습니다. 

7. 제네릭 : 타입을 미리 지정하지 않고 사용하는 시첨에 타입을 정의해서 쓸수 있는 문법. 그 자리에 치환된다고 생각하면 됨.

  const firstElements = <T>(elements: T[]): T => {
    return elements[0];
  };
  console.log(firstElements<number>([1, 2, 3]));
  console.log(firstElements<string>(["a", "b", "c"]));
  console.log(firstElements<boolean>([true, false]));

 

 

 

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 과정(B-log) 리뷰로 작성 되었습니다.