Front-end/TypeScript
-
인덱스 시그니처Front-end/TypeScript 2021. 12. 28. 07:54
인덱스 시그니처 [property: string] : string 1. 키의 이름은 타입 체커에서는 사용하지 않는다 2. 키의 타입은 string / number / symbol 의 조합이여야하지만 보통은 string 을 사용 3. 값의 타입은 어떤 것이든 될 수 있다. 타입에 인덱스 시그니처를 사용하여 유연하게 데이터를 표현할 수 있다. type Contract = {[property: string]: string} const contract: Contract = { name: '20211228-contract', price: '3400000', partner: 'madison' } 하지만 이렇게 타입 체크가 수행되면 몇가지 단점이 나타난다. 1. 잘못된 키를 허용하여 name대신 Name으로 작성해도..
-
타입 연산과 제네릭 사용으로 반복 줄이기Front-end/TypeScript 2021. 12. 25. 08:47
DRY : 중복된 패턴과 코드의 반복을 줄이고 지양하는 원리 * 개발자가 타입스크립트 사용시 타입 중복 등 중복되는 코드를 간과하고 사용할 수 있다. 1. 반복을 줄이는 가장 간단한 방법 : 타입에 이름을 붙이기 2. 인터페이스가 다른 인터페이스를 확장하게 해서 반복을 방지 3. 인터페이스를 확장하는것보다 부분 집합으로 정의하는 것이 더 나은 방법일 때 매핑된타입을 사용하면 여전히 반복되는 코드를 개선할수 있다. 매핑된 타입은 배열의 필드를 반복하여 도는것과 같은 방식이며 표준 라이브러리에서도 'Pick' 이라는 이름으로 찾을 수 있다. 출처 : 이펙티브 타입스크립트, 타입스크립트 공식문서
-
type vs interfaceFront-end/TypeScript 2021. 12. 21. 23:42
named type을 지정할때 타입을 사용해도 되고 인터페이스를 사용해도된다. 타입과 인터페이스의 유사한 특징 1. 타입과 인터페이스에 정의되지 않은 속성을 추가하여 할당하면 오류가 발생한다. 2.인덱스 시그니처 사용 가능 type Option = { [key: string]: string } interface Option { [key: string]: string | number | boolean } 3. 함수타입 정의 가능 type Func = (x: number) => string interface Func { (x: number) : string } const toStr = Func = x => '' + x 4. 제네릭 가능 5. 인터페이스는 타입을 확장할수 있고 타입도 인터페이스를 확장할 수 있..
-
객체지향 프로그래밍(OOP)Front-end/TypeScript 2021. 5. 21. 19:40
절차지향적 프로그래밍 : 정의된 순서대로 절차적으로 함수를 하나씩 호출하는 프로그래밍 함수가 얽혀있고 데이터가 업데이트 될수있기때문에 전체적인 어플리케이션의 구조를 잘 파악해야하며, 수정시 사이드이펙트가 발생할 확률이 높다. 객체지향적 프로그래밍 : 관련있는 데이터와 함수를 객체로 정해서 프로그래밍해나가는것 사람과 가까운 생각을 하면서 객체를 구성해나감. 한 곳에서 문제가 생기면 관련있는 객체만 수정하면 된다. 또한 관련된 기능일때는 재사용도 가능하며 확장성이 높아진다. 객체지향 프로그래밍은 생산성과 높은품질을 보장한다. 객체지향적 프로그래밍의 특징 1. Encapsulation (캡슐화) : 서로 관련있는 데이터와 함수를 객체로 묶어내고 데이터와 함수를 감추거나 보여지게 하는 것. 타입스크립트는 캡슐화..