본문 바로가기

TypeScript6

#8. 타입 조작하기 ※ 이 글은 이정한 강사님의 '한 입 크기로 베어먹는 타입스크립트'를 수강한 뒤 정리한 글입니다.  타입 조작이란?원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 기능.제네릭을 포함하여 총 7가지 존재. 1. 인덱스드 엑세스 타입인덱스를 사용해 다른 타입내의 특정 프로퍼티 타입을 추출하는 타입.객체, 배열, 튜플에 사용 가능.인덱스 중첩 사용 가능.※ 객체 프로퍼티 타입 추출interface Post{ title: string; content: string: author: { id: number; name: string; }}const post:Post = { title: "게시글 제목", content: "게시글 본문", author: { id: 1, .. 2025. 3. 5.
#7. 제네릭 ※ 이 글은 이정환 강사님의 '한 입 크기로 잘라먹는 타입스크립트' 강의를 본 뒤 정리한 글입니다.  제네릭(Generic) 함수함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어주는 TS 기능두루두루 모든 타입의 값을 다 적용할 수 있는 범용적인 함수형태: 함수이름 (value:T):T※ 어떨 때 필요할까?[예시] 다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수가 필요한 상황function func(value: any){ return value;}let num = func(10)let str = func("string")num.toUpperCase() // 오류이나 감지하지 못함위의 함수의 경우, 어떤 값을 넣어도 any 타입으로 반환되기 때문에 잘못.. 2025. 2. 28.
#6. 클래스 ※ 이 글은 이정환 강사님의 '한 입 크기로 잘라먹는 타입스크립트' 강의를 본 뒤 정리한 글입니다.  자바스크립트에서의 클래스동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법기본구성: '필드'와 '생성자'필드: 해당 클래스가 생성할 객체가 갖는 프로퍼티생성자: 실질적으로 객체를 생성하는 함수class Student{ // 필드 name; age; grade; // 생성자 constructor(name, age, grade){ this.name = name; this.age = age; this.grade = grade; }}// 클래스를 이용해 객체 생성하기const studentA = new Student("홍길동","A",27);const studentb = ne.. 2025. 2. 27.
#5. 인터페이스 ※ 이 강의는 이정환 강사님의 '한 입 크기로 잘라먹는 타입스크립트'를 수강 후 정리한 글입니다.  인터페이스타입에 이름을 지어주는 문법'타입 별칭'과 유사하며 대체적으로 기능 역시 거의 동일함 선택적 프로퍼티 / 읽기 전용 프로퍼티interface Person { name: string; age?: number; readonly hobby: string;}const person:Person = { name: "이정환", // age: 27, hobby: "개발"}person.hobby = "뜨개질" // 에러! 수정 불가능  메서드 타입 정의 interface Person { readonly name : string; age?: number; // 메서드 정의 sayHi : () => voi.. 2025. 2. 26.
#4. 함수와 타입 ※ 이 강의는 이정환 강사님의 '한 입 크기로 잘라먹는 타입스크립트' 강의를 듣고 정리한 글입니다.  함수 타입을 정의하는 방법// 기본 함수 정의function func(a:number, b: number):number { return a+b;}// 화살표 함수 정의const add = (a:number, b:number):number => a+b;함수의 반환값 타입은 자동으로 추론되기 때문에 생략 가능매개변수에 기본값이 설정되어 있다면 타입이 자동으로 추론됨.기본값과 매개변수의 타입이 다르면 오류!기본값과 다른 타입의 값을 인수로 전달해도 오류!// 정상 코드(타입 정의 생략한 버전)function introduce(name="이정환"){ console.log(`name:${name}`)}//에러 발.. 2025. 2. 25.
#3. 타입스크립트 이해하기 *이 게시물은 이정환 강사님의 '한 입 크기로 잘라먹는 타입스크립트' 강의를 수강한 뒤 정리한 글입니다. 타입 호환성서로 다른 타입이 있을 때, 각자를 해당 타입으로 취급해도 되는지 판단하는 것.타입간의 집합 관계도를 생각하면 이해하기 쉬움.TS는 슈퍼타입의 값을 서브타입의 값으로 취급하는 걸 허용하지 않는다! (반대는 성립 가능)ex) a: Number, b:Number Literal 일 때, b는 number로 취급할 수 있지만 a는 넘버리터럴 타입으로 취급할 수 없다!대부분의 경우엔 다운캐스팅을 허용하지 않는다.let num1 : number = 10;let num2 : 10 = 10;num1 = num2 // 넘버리터럴 값을 넘버에 할당하겠다(업캐스팅) -> 가능num2 = num1 // 넘버값을.. 2025. 2. 20.