Hi

TypeScript에서 인터페이스(Interface)는 객체의 구조를 정의하는 기능을 제공한다. 이는 타입을 명확하게 정의하고, 코드의 가독성과 유지보수성을 높이는 데 유용하다.  1. 인터페이스의 기본 개념interface Person { readonly name: string; age?: number; sayHi(): void; sayHi(a: number, b: number): void;}const person: Person = { name: "이정환", sayHi: function () { console.log("hi"); },};person.sayHi();person.sayHi(1, 2); ✅ 인터페이스에서 중요한 개념들읽기 전용(readonly) 속성: 한 번 값을 설정하면 ..

0. 함수 타입📌 함수 타입 정의타입스크립트의 함수어떤 [타입]의 매개변수를 받고, 어떤 [타입]의 결과값을 반환하는지즉, 함수의 타입은 매개변수의 반환값의 타입으로 결정된다function func(a: number, b: number): number { return a + b;} 함수의 반환값 타입은 자동으로 추론된다📌 화살표 함수의 타입 정의함수선언식과 동일한 방식const add = (a: number, b: number): number => a + b; 역시 반환값 타입은 자동으로 추론된다📌 함수의 매개변수1. 기본값 설정매개변수의 기본값을 설정할 수 있으면 타입이 자동으로 추론된다.function introduce(name = "이정환") { console.log(`name: ${nam..

타입 추론타입 추론이란타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론한다.let a = 10;// number 타입으로 추론  모든 타입을 추론하는 것은 아님함수의 매개 변수 타입은 자동으로 추론할 수 없다.// 오류 발생function func(param) {} 타입 추론이 불가능한 변수에는 암시적으로 any 타입이 추론 됨. 타입 추론이 가능한 상황1. 변수 선언일반적인 변수 선언시 초기값을 기준으로 추론된다.let a = 10;// number 타입으로 추론let b = "hello";// string 타입으로 추론let c = { id: 1, name: "이정환", profile: { nickname: "winterlood", }, urls: ["https://winterlo..

기본 타입의 호환성let num1: number = 10;let num2: 10 = 10;num1 = num2; // ✅ OK => 업캐스팅num2 = num1; // ❌ NO => 다운캐스팅 객체 타입의 호환성type Animal = { name: string; color: string;};type Dog = { name: string; color: string; breed: string;};let animal: Animal = { name: "기린", color: "yellow",};let dog: Dog = { name: "돌돌이", color: "brown", breed: "진도",};animal = dog; // ✅ OKdog = animal; // ❌ NO Animal 타입 ..

타입과 집합타입은 여러 개의 값을 포함하는 "집합" ex)number 타입 : 여러 개의 숫자 값들을 묶어 놓은 집합number literal 타입 : 딱 하나의 값만 포함하는 집합 number → 슈퍼타입(부모타입)number literal type → 서브타입(자식타입)  타입 계층도   타입 호환성: 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것 업 캐스팅 : 서브타입의 값을 슈퍼 타입의 값으로 취급 ↔ 다운캐스팅업캐스팅은 모든 상황에 가능하지만 다운 캐스팅은 대부분 불가능    unknown 타입 (전체 집합)모든 타입의 값 할당 가능(모든 타입은 unknown 타입으로 업 캐스트 가능) unknown 타입의 값은 any를 제외한 어떤 타입의 변수에도 할당할 수 없음function un..

2025.01.24 - [Frontend/TypeScript] - [TypeScript] 타입(type) (1)2025.01.26 - [Frontend/TypeScript] - [TypeScript] 타입(type) (2)2025.01.26 - [Frontend/TypeScript] - [TypeScript] 타입 별칭 / 인덱스 시그니쳐열거형 (Enum) 타입자바스크립트 존재 X여러 개의 값을 나열하는 용도// enum 타입// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입enum Role { ADMIN = 0, USER = 1, GUEST = 2,}const user1 = { name: "이정환", role: Role.ADMIN, //관리자};const user2 = { na..

2025.01.24 - [Frontend/TypeScript] - [TypeScript] 타입(type) (1)2025.01.26 - [분류 전체보기] - [TypeScript] 타입(type) (2) 타입 별칭 (Type Alias)type 타입이름 = 타입 형태로 타입 정의type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};let user: User = { id: 1, name: "이정환", nickname: "winterlood", birth: "1997.01.07", bio: "안녕하세요", location: "부천시",};let user2:..

2025.01.24 - [Frontend/TypeScript] - [TypeScript] 타입(type) (1)객체 타입object로 정의하기let user: object = {id: 1,name: "이정환",};  하지만user.id;위와 같은 점 표기법으로 객체의 프로퍼티에 접근하면 오류가 발생!  타입스크립트의 object 타입은값이 객체임을 표현하는 것 외에는 정보 제공 X 해결방법은 객체 리터럴 타입 이용해야 함! 객체 리터럴 타입중괄호를 열고 객체가 갖는 프로퍼티를 직접 나열let user: { id: number; name: string;} = { id: 1, name: "이정환",};user.id;  구조적 타입 시스템property based type system프로퍼티를 기준으로..