Front-End/TypeScript (15) 썸네일형 리스트형 TypeScript #14 (제네릭) 타입을 일반화하여 코드 재사용성과 타입 안정성을 동시에 얻을 수 있게 해주는 도구 함수를 작성할 때 타입을 고정하지 않고, 나중에 호출하는 시점에 타입을 지정할 수 있도록 만든 타입 매개변수 T는 타입의 placeholder (임시 변수)입니다. 이 함수는 string, number, boolean 등 어떤 타입이든 받을 수 있고, 그 타입 그대로 반환합니다. 제네릭을 쓰는 이유? 예문function echo(input: T): T { // 함수에도 , 입력값에도 T, 결과값에도 T console.log(typeof input, input); // 출력값이랑 출력값의 타입을 알고 싶다 return input;}echo("Hello"); // string "Hello"e.. TypeScript #13 (OOP 연습 문제 #1~10) ✅ 1단계: 클래스와 객체 만들기※ 목표: 클래스를 만들고 객체를 생성해보기 ▶ Person이라는 클래스를 만들고, 이름(name)과 나이(age)를 속성으로 가진 후,introduce() 메서드를 만들어 "안녕하세요, 저는 20살의 Alice입니다."와 같은 문장을 출력class Person { // Person 클래스 생성 : name 속성, age 속성 name: string; age: Number; introduce() { // 클래스 안에서 지정한 속성 사용 - this.속성 console.log(`안녕하세요, ${this.age}살의 ${this.name}입니다.`) }}// Person 클래스의 객체(인스턴스) 생성let p.. TypeScript #12 (OOP 예제 #1~5) ✅ 문제 1. 간단한 클래스 만들기- Dog라는 클래스를 만들어서 "멍멍!"이라고 출력하는 bark() 메서드를 만들어보기멍멍!class Dog { // Dog라는 클래스 생성 bark() { // bark 메서드 생성 console.log("멍멍"); }}let dog = new Dog(); // Dog 클래스를 사용하는 dog 객체 생성dog.bark(); // dog 객체에게 bark 메서드를 호출시키기 ✅ 문제 2. 생성자 연습- User 클래스를 만들어 생성자에서 name을 받고, greet() 메서드에서 "안녕하세요, 제 이름은 홍길동입니다."와 같이 출력되도록 하기.안녕하세요, 제 이름은 홍길동입니다.class User { // Us.. TypeScript #11 (객체 지향) 객체 지향 (Object Oriented Programming)📦 클래스(Class): 설계도┌────────────────────────────┐│ class Animal { ││ sound() { │ ← 메서드: 동물이 소리 냄│ console.log("..."); ││ } ││ } │└────────────────────────────┘ │ ▼ (설계도로 만든 실체 = 객체 생성)🦁 객체(Object): 인스턴스┌────────────────────────────┐│ const lion = new Animal().. TypeScript #10 (함수 유효성 검사) 1. 타입에 맞는 값만 허용- number가 아닌 경우 error 출력 function printAge(age: number) { if (typeof age !== "number") { throw new Error("숫자만 허용됩니다."); } console.log(`나이: ${age}`);} 2. 커스텀 타입 검사 함수 만들기- 리터럴 타입으로 커스텀 타입 만들고, 받을 인자의 타입 지정 후 유효성 검사.type UserInput = string | number;function isString(input: UserInput): input is string { return typeof input === "string";}function process(input: UserInput) { i.. TypeScript #9 (함수) 기본형// 인자 각각에 타입, 리턴 값에 타입function addNum(a: number, b: number): number { return a + b;} 화살표 함수// 변수 greet에 할당 받는 name 값에 타입, 변수 greet 에 타입const greet: (name: string) => string = (name) => `Hello, ${name}`; 예제function runMore(distance: number): number { return distance + 10;}console.log(runMore(10));function eat(calories: number) { console.log("I ate " + calories + " calories");}// voi.. TypeScript #8 (클래스 실습) 원래 이전부터 쓰던 방식class Person2 { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } introduce(): string { return `Hi, I'm ${this.name}. I'm ${this.age} years old.`; }} 더 간단하게 ㄱㄱclass Person2 { constructor(public name: string, private age: number) {} introduce(): string { return `Hi, I'm ${th.. TypeScript #7 (타입 연습 문제) 문제 1. 문자열 변수 선언 - 이름을 저장하는 name이라는 변수를 선언하고, 타입을 지정하세요. 값은 "Alice"로 지정하세요.let username: string = "Alice" 문제 2. 숫자와 boolean 타입나이를 나타내는 age 변수는 숫자 타입학생 여부를 나타내는 isStudent는 boolean 타입 타입을 지정하고 값을 각각 21, true로 설정하세요.let age: number = 21let isStudent: boolean = true; 문제 3. 함수 매개변수와 반환 타입 - 두 숫자를 받아서 더한 값을 반환하는 함수 add를 작성하세요. 매개변수와 반환값에 모두 타입을 지정하세요.function addNumber (num1: number, num2: number): n.. 이전 1 2 다음
