programming study/TypeScript (28) 썸네일형 리스트형 실전으로 배우는 타입스크립트 - 맵드 타입 본 내용은 인프런 장기효(캡틴판교)님의 실전으로 배우는 타입스크립트 강의를 토대로 작성하였습니다. 1. 맵드 타입이란? Mapped Type 기존에 정의되어 있는 타입을 새로운 타입으로 변환해주는 문법 자바스크립트의 map API 함수를 타입에 적용한 것과 같은 효과 배열의 각 요소를 순회하여 조작할 수 있음 맵드 타입의 기본 문법 { [ P in K ] : T } { [ P in K ]? : T } { readonly [ P in K ] : T } { readonly [ P in K ] ? : T } 2. 맵드 타입 예제 // 타입 별칭 type Heroes = 'Hulk' | 'Capt' | 'Thor' // 기존 타입을 맵드 타입을 이용해서 새로운 타입으로 변환 // Heroes에 지정된 타입을 하.. 실전으로 배우는 타입스크립트 - 유틸리티 타입 본 내용은 인프런 장기효(캡틴판교)님의 실전으로 배우는 타입스크립트 강의를 토대로 작성하였습니다. 1. 유틸리티 타입 소개 고급 타입(Advanced Type) 제네릭 타입(Generic Type) 정의해 놓은 타입을 변환할 때 사용 간결한 문법으로 타입 정의 중복되는 타입 선언을 줄일 수 있다. 상황에 맞는 유틸리티 타입을 직접 정의해서 사용할 수 있음 2. Partial 특정 타입의 부분 집합을 만족하는 타입을 정의 interface Pet { name: string; age: number; } type MyPet = Partial const siru: MyPet = {}; // 가능 const nunu: MyPet = { name: 'nunu' }; // 가능 const kami: MyPet = {.. 타입스크립트 입문 - 타입 호환, 타입 모듈화 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 타입 호환(Type Compatibility) 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미 구조적 타이핑 코드 구조 관점에서 타입이 서로 호환되는지의 여부를 판단 interface Pet { name: string; } let myCat: Pet; let siru = { name: 'siru', age: 5 }; // siru의 속성 중에 name이 있으므로 Pet 타입과 호환 myCat = siru; 타입 호환 예제 - 인터페이스, 클래스 타입 호환이 될지의 여부는 class, interface의 차이는 영향이 없다. 내부적으로 존재하는 속성과 타입의 정의에 대해서 비교.. 타입스크립트 입문 - 타입 단언, 타입 가드 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 타입 단언(Type Assertion) 타입스크립트의 타입 추론 방식으로는 복잡한 코드 이후 타입을 추론해낼 수 없다. 이를 방지하여 타입 추론을 무시하고 직접 타입을 지정할 수 있음 DOM API 조작 시 사용 // 타입 단언(type-assertion) let a; // 타입이 any로 추론 a = 20; a = 'a'; let b = a; // any, 맨처음에 선언된 any 타입이 b에 할당 let c = a as string // type 단언 타입 단언 예시 DOM API 조작 DOM API: 웹 페이지의 태그 정보에 접근할 수 있는 API VSC 내부에 DOM에 대한 타입들이 정.. 타입스크립트 입문 - Promise, 타입 추론 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. Promise를 이용한 API 함수 타입 정의 Promise는 TypeScript 내부적으로 타입이 정의되어있다. Promise를 return하기 위해서는 제네릭을 선언해야 한다. Axios는 Promise를 반환하므로 해당 타입 선언을 알아둘 것 fucntion fetchItems(): Promise { let items: string[] = ['a', 'b', 'c']; return new Promise(fucntion (resolve) { reslove(items); }); } fetchItems(); 2. 타입 추론(Type Inference) 타입 추론 기본 변수를 선언하거나 초기화.. 타입스크립트 입문 - 제네릭 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 제네릭이란 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용 여러가지 타입에 동작하는 컴포넌트를 생성하는데 사용 기본 문법 function logText(text: T):T { console.log(text); return text; } // 함수 호출 시 파라미터의 타입을 지정할 수 있음 // 문자열이 들어가면 문자열이 반환 // 호출 시점에 타입을 넘겨줌 logText('Hi'); 2. 기존 문법과 제네릭의 차이 함수 중복 선언의 단점 // 유지 보수 관점에서 좋지 않다. // 타입을 받기 위해서 중복되는 코드 // 가독성이 떨어지고 전체 코드가 비대해진다. f.. 타입스크립트 입문 - 이넘, 클래스 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 이넘 이넘이란 특정 값들의 집합을 의미하는 자료형 dropdown과 같은 정해진 목록을 사용할 때 유용 숫자형 이넘 이넘에 별도의 값을 지정하지 않고 선언하면 기본적으로 숫자형 이넘 초기 값을 주면 초기 값부터 차례로 1씩 증가 초기 값을 주지 않으면 0부터 차례로 1씩 증가 enum Shoes { Nike, Adidas, NewBalnce } // 별도의 값을 지정하지 않으면 숫자형 enum으로 지정 let myShoes = Shoes.NewBalnce; console.log(myShoes); // 2 enum member 문자형 이넘 특정 문자 또는 또 다른 이넘 값으로 초기화해야 함 e.. 타입스크립트 입문 - 타입 별칭, 연산자 타입 정의 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 타입 별칭 소개 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수 타입을 정의할 수 있는 모든 곳에 사용할 수 있음 IDE 상에서 타입 별칭의 프리뷰를 볼 수 있음 코드 가독성을 높일 수 있음 확장이 되지 않음 인터페이스는 extends 키워드로 확장이 가능 그러므로 가능한 인터페이스로 타입을 선언할 것 좋은 소프트웨어는 언제나 확장이 용이해야 한다. 예시 type name = string; const myName: name = 'siru'; 2. 연산자를 이용한 타입 정의 Union Type 하나의 타입 이상을 사용할 수 있음 JavaScript에서의 or연산자의 (||)하나를 사용하여.. 이전 1 2 3 4 다음