TypeScript to CodingApple

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

📅 작성일

2025년 2월 14일

---

📌 목차

1. 소개
2. part1-1 : Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함)
3. part1-2 : Typescript 컴파일시 세부설정 (tsconfig.json)
4. part1-3 : 타입스크립트 기본 타입 정리 (primitive types)
5. part1-4 : 타입 미리 정하기 애매할 때 (typescript union type, any, unknown)
6. part1-5 : 함수에 타입 지정하는 법 & void 타입
7. part1-6 : 타입 확정하기 Narrowing & Assertion
8. part1-7 : 타입도 변수에 담아쓰세요 type 키워드 써서 & readonly
9. part1-8 : Literal Types로 만드는 const 변수 유사품
10. part1-9 : 함수와 methods에 type alias 지정하는 법
11. part1-10 : 타입스크립트로 HTML 변경과 조작할 때 주의점
12. part1-11 : (JS문법시간) class 키워드 알아보기
13. part1-12 : (JS 문법시간) prototype 문법 짚어보기
14. part1-13 : class 만들 때 타입지정 가능
15. part1-14 : Object에 타입지정하려면 interface 이것도 있음
16. 참고 자료

---

📝 소개

Part 1 : 꼭 알아야할 내용

---

part1-1

🔹 Typescript란

• Javascript + Type문법
• 에러메시지 퀄리티가 높음

🔹 설정 및 실행

• nodejs, vscode 설치

//powershell
npm install -g typescript

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

//powershell
tsc -w

🔹 Typescript 사용

let 문자열: string = "string";

---

part1-2

🔹 tsconfig

• 타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정
• 자세한내용

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}
tsc -w

---

part1-3

🔹 타입정리

• 타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정
• 자세한내용

//ex)
let 이름: string = "kim";
let 나이: number = 50;
let 결혼했니: boolean = true;
let 회원들: string[] = ["kim", "part"];
let 회원들2: { member1: string } = { member1: "kim" };

---

part1-4

🔹 union

//ex)
let 회원: string | number = "kim";
let 회원들: (number | string)[] = [1, "2", 3];
let 오브젝트: { a: string | number } = { a: 123 };
let 이름: any = 123;
let 이름2: unknown = "a";

---

part1-5

🔹 함수

//ex)
function 함수(x?: number): number {
  return x * 2;
}
함수(30);
==
function 함수2(x: number | undefined): number {
  return x * 2;
}
함수2(30);

---

part1-6

🔹 Narrowing

• typeof를 통해 타입을 확인한다

if (typeof x === 'string')

🔹 Assertion

• 타입 덮어쓰기

function 내함수(x: number | string) {
  let array: number[] = [];
  array[0] = x as number;
}

---

part1-7

🔹 타입 변수지정

• 타입을 변수로 지정할 수 있다
• 변수명은 대문자로 시작

type Animal = string | number | undefined;
let 동물: Animal = 123;

type Animal2 = { name: string, age: number };
let 동물2: Animal2 = { name: "kim", age: 20 };

🔹 const

• const 변수는 등호로 재 할당을 막는다
• object수정은 자유롭다
• readonly 사용 시 수정이 안됨

type Animal ={
  readonly name : string
}

🔹 type 키워드 합치기

• 여러개의 type변수는 &를통해 extend할 수 있다

type a = string;
type b = string;
type c = a & b;

---

part1-8

🔹 Literal Types

• 특정 문자만 들어올 수 있음
• 엄격한 관리로 버그방지 쉬움

let 이름: "park";
이름 = "nam"; //에러

🔹 Literal Types문제점

• 리터럴 타입은 어떤 자료만 들어올수 있다는 것이 아닌 어떤 타입만 들어올 수 있다는 뜻
• 그래서 값이 같다고 하더라도 에러가 날 수 있다
• 해결법은 as const를 사용 (object value값을 타입으로 지정)
• 대신 이렇게하면 readonly가 되어 자료수정이 불가능

let 자료 = { name: "kim" };

function 함수(a: "kim") {}

함수(자료.name); //에러남

---

part1-9

🔹 함수 type

type 함수타입 = (a: string) => number;

let 함수: 함수타입 = function (a) {
  return 10;
};

---

part1-10

🔹 narrowing

• narrowing 하는 방법 5가지

// 방법1 narrowing
let 제목 = document.querySelector("#title");
if (제목 != null) {
  제목.innerHTML = "반갑소";
}

// 방법2 instanceof
let 제목 = document.querySelector("#title");
if (제목 instanceof Element) {
  제목.innerHTML = "반갑소";
}

// 방법3 assertion
let 제목 = document.querySelector("#title") as Element;
제목.innerHTML = "반갑소";

// 방법4 optional chaining
let 제목 = document.querySelector("#title");
if (제목?.innerHTML != undefined) {
  제목.innerHTML = "반갑소";
}

// 방법5 strict 설정 false
 "strictNullChecks": false

🔹 각 태그 HTMLElement

• a 태그는 HTMLAnchorElement 등등..

let 링크 = document.querySelector("#link");
if (링크 instanceof HTMLAnchorElement) {
  링크.href = "https://kakao.com";
}

---

part1-11

🔹 강의 내용

• 객체지향 class문법

---

part1-12

🔹 강의 내용

• prototype 문법

---

part1-13

🔹 강의 내용

• 11 12 에서 배운내용

---

part1-14

🔹 interface

• extends로 복사가능
• 중복선언 가능

interface Student {
  name: string;
}

interface Student {
  name: score;
}

interface Teacher extends Student {
  age: number;
}

let 학생: Student = { name: "kim" };
let 선생: Teacher = { name: "kim", age: 20 };

---

📚 참고 자료

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