데브코스 26일차 ( 24.11.18 월 ) - Typescript

워니·5일 전
1

Programmers Front-end

목록 보기
25/27

< 1차 프로젝트 코드 리뷰 >

팀원들간 1차 프로젝트 코드 리뷰를 진행했다.
전체 코드를 다시 한 번 읽어보며 아쉬운 점을 찾아보고,
어떤 로직으로 작성하게 됐는지도 돌아볼 수 있었다.

코드 리뷰를 해도 어려웠던 점은
  1. api 요청 관련 코드를 작성하는 법
  2. placeholder를 활용하는 법
  3. 주소 값을 불러오는 법

몇 번을 보면서 이해를 했음에도 다시 보면 어렵고,
새로 작성을 하려고 하면 전혀 손도 대지 못한다.
아직 공부해야 할 것들이 정말 많은 것 같다..

[Section 02] Typescript 기본

< 03. 함수 타입 >

  • 매개변수와 반환 값의 타입을 지정하는 것
  // 함수 선언문
  function greet(name: string): string {
    // 매개변수의 타입을 지정해줘야 함
    // 반환값의 타입도 지정해줘야 함
    return `Hello, ${name}`;
  }

  // 함수 표현식
  const expr = function greet(name: string): string {
    // 매개변수의 타입을 지정해줘야 함
    // 반환값의 타입도 지정해줘야 함
    return `Hello, ${name}`;
  };

  // 화살표 함수
  const expr2: (name: string) => string = function greet(name) {
    // 매개변수의 타입을 지정해줘야 함
    // 반환값의 타입도 지정해줘야 함
    return `Hello, ${name}`;
  };

  greet("john");
  • 예시
      // ex 1)
  function sum(n1: number, n2: number): number {
    return n1 + n2;
  }

  sum(10, 20);

  // ex 2)
  const expr = (n1: number, n2: number): number => n1 + n2;
  // 함수의 반환 함수에 타입을 지정

  // ex 3)
  const expr2: (n1: number, n2: number) => number = (n1, n2) => n1 + n2;
  // 변수에 타입을 지정

1. void 타입

  • 함수에서만 쓸 수 있는 특별한 타입
  • 아무 것도 반환하지 않는 것
  • undefined와는 다름
  • 예시
    // ex)
  function greet(name: string): void {
    // 반환값이 없을 때 사용할 수 있음
    console.log(`Hello, ${name}`);
  }
  greet("john");

  // ex2) 매개변수가 없을 때
  function greet2(): void {
    console.log(`Hello`);
  }
  greet2();

  const expr = function greet(): void {
    console.log(`Hello`);
  };
  expr();

  const expr2: () => void = () => console.log(`Hello`);

2. 옵셔널 파라미터 (?)

  • 옵셔널 파라미터는 ? 기호로 표시
  • ? 기호로 표시하면 타입으로 지정한 매개 변수를 생략할 수 있음
 function sum(n1: number, n2?: number) {
    // 매개변수와 인자값에 대한 오류는 해결 가능
    // 반환값에 오류가 생김
    return n1 + (n2 || 0);
    // 내부에 값이 안 넘어 왔을 때를 대비하는 코드를 작성하여 해결 가능
  }
  sum(10);

  const expr = function sum(n1: number, n2?: number) {
    return n1 + (n2 || 0);
  };

  const expr2: (n1: number, n2?: number) => number 
  = function sum(n1, n2) {
    return n1 + (n2 || 0);
  };

  const expr3: (n1: number, n2?: number) => number 
  = (n1, n2) => n1 + (n2 || 0);

3. ...(전개 연산자)

  // ex)
  function sum(...rest: number[]): void {
    console.log(rest);
  }
  sum(1, 2, 3, 4);

  // ex)
  function printValue(...rest: [number, string, number, string]): void {
    console.log(rest);
  }
  printValue(1, "a", 2, "b");

  const expr = function printValue(
    ...rest: [number, string, number, string]
  ): void {
    console.log(rest);
  };

  const expr2: (...rest: [number, string, number, string]) => void = function (
    ...rest
  ) {
    console.log(rest);
  };

4. 콜백함수

// ex) 콜백함수를 매개변수로 사용할 때 예시
  function printUser(callback: (name: string) => void): void {
    callback("john");
  }
  printUser((name) => {
    console.log(name);
  });

  const expr = function printUser(callback: (name: string) => void): void {
    callback("john");
  };

  const expr2: (callback: (name: string) => void) => void = function (
    callback
  ) {
    callback("john");
  };
// ex)
  function compareNumbers(
    n1: number,
    n2: number,
    callback: (result: string) => void
  ): void {
    if (n1 === n2) {
      callback("equal");
    } else {
      callback("not equal");
    }
  }

  const expr = function compareNumbers(
    n1: number,
    n2: number,
    callback: (result: string) => void
  ): void {
    if (n1 === n2) {
      callback("equal");
    } else {
      callback("not equal");
    }
  };

  const expr2: (
    n1: number,
    n2: number,
    callback: (result: string) => void
  ) => void = function (n1, n2, callback) {
    if (n1 === n2) {
      callback("equal");
    } else {
      callback("not equal");
    }
  };

  compareNumbers(10, 20, (result) => {
    console.log(`the numbers are ${result}`);
  });
// ex)
  function processArray(arr: number[], callback: (item: number) => void): void {
    for (const item of arr) {
      callback(item);
    }
  }

  const expr = function processArray(
    arr: number[],
    callback: (item: number) => void
  ): void {
    for (const item of arr) {
      callback(item);
    }
  };

  const expr2: (arr: number[], callback: (item: number) => void) => void =
    function processArray(arr, callback) {
      for (const item of arr) {
        callback(item);
      }
    };
    
  const expr3: (arr: number[], callback: (item: number) => void) => void = (
    arr,
    callback
  ) => {
    for (const item of arr) {
      callback(item);
    }
  };

  processArray([1, 2, 3, 4], (item) => {
    console.log(item * 2);
  });
// ex)
  function findInArray(
    arr: number[],
    condition: (item: number) => boolean,
    callback: (result: number) => void
  ): void {
    for (const item of arr) {
      if (condition(item)) {
        callback(item);
        return;
      }
    }
    console.log("not found");
  }

  const expr = function findInArray(
    arr: number[],
    condition: (item: number) => boolean,
    callback: (result: number) => void
  ): void {
    for (const item of arr) {
      if (condition(item)) {
        callback(item);
        return;
      }
    }
    console.log("not found");
  };

  const expr2: (
    arr: number[],
    condition: (item: number) => boolean,
    callback: (result: number) => void
  ) => void = function findInArray(arr, condition, callback) {
    for (const item of arr) {
      if (condition(item)) {
        callback(item);
        return;
      }
    }
    console.log("not found");
  };

  const expr3: (
    arr: number[],
    condition: (item: number) => boolean,
    callback: (result: number) => void
  ) => void = (arr, condition, callback) => {
    for (const item of arr) {
      if (condition(item)) {
        callback(item);
        return;
      }
    }
    console.log("not found");
  };

  findInArray(
    [10, 20, 30, 40],
    (item) => item > 25,
    (result) => {
      console.log(`found value: ${result}`);
    }
// ex) 반환값이 함수일 때
  // 클로저 패턴
  function createMultipler(factor: number): (num: number) => number {
    return (num) => num * factor;
  }
  const func = createMultipler(10);
  console.log(func(2));

5. never 타입

  • 절대 반환되지 않는 함수에서만 사용
  • 반환값에서만 사용하는 타입
  • 무한루프에 빠지는 경우 (실무에서는 없다고 보면 됨)
// ex)
  function infinityLoop(): never {
    while (true) {}
  }
  • 에러가 생기는 경우
// ex)
  function throwError(message: string): never {
    throw new Error(message);
  }

< 04. 타입 오퍼레이터(type operator) >

  • 연산자
  • or (|) 유니온 타입(union type)
// ex)
  let value: number | string | boolean = 10;
  value = "a";
  value = true;

  let obj: { name: string; age: number } | { skill: string } = {
    name: "john",
    age: 20,
  };
  obj = { skill: "front" };

  let arr: number[] | string[] = [1, 2, 3];
  arr = ["a", "b", "c"];

  let mixArr: (string | number)[] = [1, "a", 2, "b"];
  • and (&) 인터섹션 타입(intersection type)
    • 기본 타입에는 사용할 수 없음
    • 예를 들어 문자열이면서 숫자인 타입은 없으므로
    • 객체에서 사용
// ex)
  let value: { name: string; age: number } & { skill: string } = {
    name: "john",
    age: 20,
    skill: "front",
  };

  // ex2) 같은 속성에 댜른 타입을 지정하면 충돌하게 됨
  let value2: { name: string; age: number } & { skill: string; name: number } =
    // name에 string과 number가 충돌
    // 인터섹션 타입을 사용할 때는 속성이 충돌되지 않게 개발자가 신경을 써야 함
    {
      // name:: "john",
      age: 20,
      skill: "front",
    };

  // ex3) 속성 안의 속성값에 대해 적용하면 병합이 됨
  let value3: { name: string; address: { city: string } } & {
    address: { zipcode: number };
  } = {
    name: "john",
    address: {
      city: "seoul",
      zipcode: 111,
    },
  };
profile
워니
첫 시작!
이전 포스트

데브코스 25일차 ( 24.11.15 금 ) - Typescript

다음 포스트

데브코스 27일차 ( 24.11.19 화 ) - Typescript

3개의 댓글

comment-user-thumbnail
강수영
4일 전

1차 프로젝트 다같이 수정하시나요??

1개의 답글