소소한 지식 저장소

1. Partial - 일부만 사용할 수 있는 타입 만들기Partial는 객체 타입 T의 모든 프로퍼티를 선택적(optional) 으로 변환사용 예시 // 유틸리티 타입 -> 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용하는 타입들을 미리 만들어 놓은 것// Partial// 부분적인, 일부분의// 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티 바꿔주는 타입interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string;}// Partial를 직접 구현해보기type Partial = { [key in keyof T]?: T[key]; };// const draft..

1. 기본 문법// 조건부 타입 -> 3항 연산자를 이용하여 조건에 따라 타입을 변경 type A = number extends string ? string : number; // number가 string을 확장하는 타입이냐?? 참이면 A는 string 타입, 거짓이면 number 타입// -> 거짓이기 때문에 A는 number 타입!2. 객체 타입 비교type ObjA = { // 슈퍼 타입 a: number;};type ObjB = { // 서브 타입 a: number; b: number;};type B = ObjB extends ObjA ? number : string; // 참이기 때문에 B는 number 타입!3. 제네릭 조건부 타입// 제네릭과 조건부 타입type StringNumber..

1. 인덱스드 엑세스 타입 (Indexed Access Types)기존 객체, 배열, 튜플에서 특정 타입을 추출할 수 있음1) 객체 타입에서 추출// 인덱스드 엑세스 타입 -> 객체 타입에서 특정 속성을 뽑아서 변수에 정의할 수 있게 해줌// 객체에 사용type Post = { title: string; content: string; author: { id: number; name: string; age: number; };};const post0: Post= { title: "게시글 제목", content: "게시글 본문", author: { id: 1, name: "이정환", age: 27, },};function printAuthorInfo0(autho..

1. 왜 제네릭이 필요한가?// 제네릭function func0(value: any){ return value;}let num0 = func(10);let bool0 = func(true);let str0 = func("string");// 이렇게 매개변수로 받은 타입의 변수를 리턴하는 함수를 만들고 싶을 때, any를 사용해서 할 순 있지만, 이는 위험함!!// -> 이럴 때 사용하는 것이 제네릭 함수임!!any는 유연하지만 타입 안정성을 잃음unknown은 안전하지만 사용 전에 타입 좁히기가 필요!!function func(value: unknown) { return value;}let num = func(10);if (typeof num === "number") { num.toFixed()..

🎓 1. 자바스크립트에서의 클래스1) 객체를 그대로 선언하면?// 클래스let studentA = { name: "이정환", grade: "A+", age: 27, study() { console.log("열심히 공부 함"); }, introduce() { console.log("안녕하세요!"); },};let studentB = { name: "홍길동", grade: "A+", age: 27, study() { console.log("열심히 공부 함"); }, introduce() { console.log("안녕하세요!"); },}; 문제점: 같은 구조의 객체를 반복해서 만들어야 하므로 코드 중복이 발생 2) 클래스 선언하기class Student { ..

📌1. 인터페이스 기본 사용법// 인터페이스 -> 상호 간에 약속된 규칙!!// Type 설저과 비슷함 interface Person { readonly name: string; age?: number; sayHi(): void; // 호출 시그니처를 사용!! sayHi(a: number, b: number): void;}const person: Person = { name: "이정환", sayHi: function (a?:number, b?:number) { // 이것도 호출 시그니처를 이용하여 가능 if(typeof a == "number" && typeof b == "number"){ console.log(a + b ); }else{ console.l..

1. 기본 함수 타입 정의1) 자바스크립트 함수 예시function func(a, b) { return a + b;} 2) 타입스크립트에서 타입 추가function func(a: number, b: number): number { return a + b;} 3) 반환값 타입 생략 가능 (추론)// 함수 타입의 정의// 함수를 설명하는 가장 좋은 방법// 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 이야기// 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과값을 반환하는지 이야기function func(a: number, b: number) { return a + b;}2. 화살표 함수의 타입 정의// 화살표 함수의 타입을 정의하는 방법const add = (a: number, b: numb..

타입스크립트는 문법만 배워서는 사용하기 힘들기 때문에, 타입스크립트에 대한 이해가 필요함타입스크립트 공식 문서에서는 주요 문법들만 모아둔 치트시트를 무료로 제공하긴 함https://www.typescriptlang.org/cheatsheets/ Cheat SheetsTo read later or printwww.typescriptlang.org1. 타입은 집합이다타입스크립트에서 말하는 '타입'은 집합즉, number 타입은 1, 2, 3, 4, 5, ... 등 모든 숫자를 포함하는 집합이며, string 타입은 모든 문자열을 포함하는 집합let a: number;a = 1; // ✅a = 999; // ✅a = -42; // ✅하지만 20이라는 숫자 하나만을 포함하는 타입도 만들 수 있음이것이 ..

🛠️ 1. 실습 환경 설정하기mkdir section2 && cd section2npm init -ynpm i @types/node 1) tsconfig.json 설정:{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force" }, "ts-node": { "esm": true }, "include": ["src"]} 2) 테스트 코드:// src/index.tsconsole.log("Hello New Project"); 3) 컴파일 후 실행:tscnode dist/index.js4) tsx로 직접 실행..

1. 타입스크립트가 필요한 이유대규모 프로젝트를 만들면서 자바스크립트만으로는 다음과 같은 한계를 겪게 됨.변수 타입 오류를 실행 중에야 알게 됨간단한 코드에서는 문제 없지만, 규모가 커지면 예상치 못한 에러가 잦음서비스 전체 중단 같은 치명적인 문제가 발생할 수 있음이런 문제를 해결하기 위해 등장한 언어가 바로 타입스크립트(TypeScript) !!2. 타입 시스템이란? 타입 시스템이란 프로그래밍 언어에서 사용하는 값들을 어떤 기준으로 타입으로 분류하고, 타입을 언제 어떻게 검사할지를 정의한 체계! 1) 정적 타입 시스템 vs 동적 타입 시스템구분설명예시 언어정적 타입 시스템코드 실행 전 타입 결정Java, C동적 타입 시스템실행 중에 타입 결정JavaScript, Python자바스크립트는 동적 타입 시..