TypeScript to CodingApple

코딩애플 강의를 통해 배운 TypeScript를 정리한 글입니다.

📅 작성일

2025년 2월 18일

---

📌 목차

1. 소개
2. part2-1 : 함수 rest 파라미터, destructuring 할 때 타입지정
3. part2-2 : Narrowing 할 수 있는 방법 더 알아보기
4. part2-3 : 함수에 사용하는 never 타입도 있긴 합니다
5. part2-4 : public, private 쓰는거 보니까 타입스크립트 귀여운편
6. part2-5 : class에서 사용가능한 protected, static 키워드
7. part2-6 : 저번시간 숙제 해설 (class 만들기)
8. part2-7 : 타입도 import export 해서 씁니다 그리고 namespace
9. part2-8 : 타입을 파라미터로 입력하는 Generic
10. part2-9 : React + TypeScript 사용할 때 알아야할 점
11. part2-10 : React + TypeScript 사용할 때 알아야할 점 2 : Redux toolkit
12. part2-11 : array 자료에 붙일 수 있는 tuple type
13. part2-12 : 외부 파일 이용시 declare & 이상한 특징인 ambient module
14. part2-13 : d.ts 파일 이용하기
15. part2-14 : implements 키워드
16. part2-15 : object index signatures
17. part2-16 : object 타입 변환기 만들기
18. part2-17 : 조건문으로 타입만들기 & infer
19. 참고 자료

---

📝 소개

Part 2 : 알면 도움은 되는 내용

---

part2-1

🔹 rest 파라미터

• 많은 파라미터가 들어올 수 있다 라는 축약어

function 함수(...a :number[]) {
  console.log(a) //[1,5,2,4,1,5,3]
}
함수(1,5,2,4,1,5,3)

🔹 destructuring

• 자료들을 변수로 쉽게 빼서 사용가능

let [변수1, 변수1] = ['안녕', 100]

---

part2-2

🔹 in 연산자

• 별 쓸모는 없어보임

type Fish = { swim: string };
type Bird = { fly: string };
function 함수(animal: Fish | Bird) {
  if ("swim" in animal) {
    return animal.swim
  }
  return animal.fly
} 

---

part2-3

🔹 never

• return값이 없음
• endpoint가 없음
• 대부분 쓸모없음 void쓰면됨

function 함수() :never {}

---

part2-4

🔹 public

• class에서 쓰는 public키워드가 붙으면 모든 자식들이 이용가능

class user {
    public name = 'kim'
}

🔹 private

• class에서 쓰는 private키워드가 붙으면 안에서만 이용가능

class user {
    private name = 'kim'
}

---

part2-5

🔹 protected

• class에서 쓰는 protected키워드가 붙으면 extend된 class{}안에서 사용가능

class User {
  protected x = 10;
}

class NewUser extends User {
  doThis(){
    this.x = 20;
  }
}

🔹 static

• static키워드 붙으면 부모class에 직접 부여됨 (자식에게 안물려줌)

class User {
  x = 10;
  y = 20;
}

let john = new User();
john.x //가능
User.x //불가능

class User {
  static x = 10;
  y = 20;
}

let john = new User();
john.x //불가능
User.x //가능

---

part2-6

🔹 숙제

---

part2-7

🔹 import

• type또한 import export가능

🔹 namespace

• TypeScript 타입변수 숨기기 문법
• 옛날 문법, 지금은 안씀

namespace MyNamespace {
  export type NameType = number | string;
}

MyNamespace.NameType

---

part2-8

🔹 Generic

• 파라미터로 타입을 입력하는 함수

function 함수<Type>(x: unknown[]) {
  return x[0];
}
let a = 함수<number>([4, 2]);
let b = 함수<string>(['4', '2']);

🔹 파라미터 제한두기

function 함수<Type extends number>(x) {
  return x - 1;
}
let a = 함수<number>(2);

---

part2-9

🔹 설치 및 사용

• vite로 실행 하여 설정

//요소 타입지정
let 박스: JSX.Element = <div></div>;

//props 타입지정
type AppProps = {
  name: string,
};
function App(props: AppProps): JSX.Element {
  return <div>{message}</div>;
}

---

part2-10

🔹 타입지정

• 좀 어렵고 복잡하고 코드가 더럽다
• RootState, PayloadAction

---

part2-11

🔹 tuple type

• 자료의 순서와 위치를 엄격하게 지정이 가능

let 멍멍이: [string, boolean];
멍멍이 = ["dog", true];

//rest parameter
function 함수(...x: [string, number]) {
  console.log(x);
}
함수("kim", 123); //가능
함수("kim", 123, 456); //에러
함수("kim", "park"); //에러

---

part2-12

🔹 declare

• 다른데서 사용된 변수를 재정의할 때 사용

declare let a;

//글로벌 변수
declare global {
  type Dog = string
}

🔹 ts파일 특징

• 모든 ts파일은 ambient module(글로벌모듈)
• 글로벌로 만들지 않으려면 export

---

part2-13

🔹 d.ts

• 타입저장용으로 사용되며 정의 보관용 파일
• 레퍼런스용으로 사용되는 경우도 있음
• https://github.com/DefinitelyTyped/DefinitelyTyped (타입들을 모아놓음)

---

part2-14

🔹 implements

• class가 특정 필드와 함수를 가지고 있는지 확인하고 싶은 경우 간혹 사용한다
• interface에 들어있는 속성을 가지고 있는지 확인만함

interface CarType {
  model: string;
  price: number;
}

class Car implements CarType {
  model: string;
  price: number = 1000;
  constructor(a: string) {
    this.model = a;
  }
}
let 붕붕이 = new Car("morning");

---

part2-15

🔹 index signatures

• 모든 타입의 속성을 정의

interface StringOnly {
  [key: string]: string;
}

🔹 recursive

• object자료가 4중첩 5중첩 X중첩되어도 대응가능

interface Mytype {
  "font-size": Mytype | number;
}

let obj: Mytype = {
  "font-size": {
    "font-size": {
      "font-size": 14,
    },
  },
};

---

part2-16

🔹 keyof

• 키값을 전부 가져옴

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

type PersonKeys = keyof Person;
let a :PersonKeys = 'name'

🔹 타입 변환기

• 키값을 전부 가져옴

type Car = {
  color: boolean,
  model : boolean,
  price : boolean | number,
};

type TypeChanger <MyType> = {
  [key in keyof MyType]: string;
};

type 새로운타입 = TypeChanger<Car>;

let obj :새로운타입 = {
  color: 'red',
  model : 'kia',
  price : '300',
}

---

part2-17

🔹 타입 조건식

• 삼항연산자로 검사

type Age<T> = T extends string ? string : unknown;  //T가 string을 가지고 있는지 확인
let age : Age<string> //age는 string 타입
let age2 : Age<number> //age는 unknown 타입

🔹 infer

• 타입을 추출

type Person<T> = T extends infer R ? R : unknown;
type 새타입 = Person<string> // 새타입은 string 타입입니다

---

📚 참고 자료

• 코딩애플 강의
• 내 깃허브