madisonrubylee madisonrubylee

https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/

JSX에서 prop과 함께 렌더링되는 컴포넌트 제네릭 컴포넌트 제네릭 함수 제네릭 함수는 아래와 같이 사용할 수 있습니다. 만약 화살표 함수를 사용한다면 아래와 같은 에러가 발생합니다. 이를 해결하기 위해서는 아래와 같이 사용할 수 있습니다. trailing comma를 사용하여 더 간단하게 표현할 수도 있습니다.

인덱스 시그니처 [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으로 작성해도..

DRY : 중복된 패턴과 코드의 반복을 줄이고 지양하는 원리 * 개발자가 타입스크립트 사용시 타입 중복 등 중복되는 코드를 간과하고 사용할 수 있다. 1. 반복을 줄이는 가장 간단한 방법 : 타입에 이름을 붙이기 2. 인터페이스가 다른 인터페이스를 확장하게 해서 반복을 방지 3. 인터페이스를 확장하는것보다 부분 집합으로 정의하는 것이 더 나은 방법일 때 매핑된타입을 사용하면 여전히 반복되는 코드를 개선할수 있다. 매핑된 타입은 배열의 필드를 반복하여 도는것과 같은 방식이며 표준 라이브러리에서도 'Pick' 이라는 이름으로 찾을 수 있다. 출처 : 이펙티브 타입스크립트, 타입스크립트 공식문서

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. 인터페이스는 타입을 확장할수 있고 타입도 인터페이스를 확장할 수 있..

절차지향적 프로그래밍 : 정의된 순서대로 절차적으로 함수를 하나씩 호출하는 프로그래밍 함수가 얽혀있고 데이터가 업데이트 될수있기때문에 전체적인 어플리케이션의 구조를 잘 파악해야하며, 수정시 사이드이펙트가 발생할 확률이 높다. 객체지향적 프로그래밍 : 관련있는 데이터와 함수를 객체로 정해서 프로그래밍해나가는것 사람과 가까운 생각을 하면서 객체를 구성해나감. 한 곳에서 문제가 생기면 관련있는 객체만 수정하면 된다. 또한 관련된 기능일때는 재사용도 가능하며 확장성이 높아진다. 객체지향 프로그래밍은 생산성과 높은품질을 보장한다. 객체지향적 프로그래밍의 특징 1. Encapsulation (캡슐화) : 서로 관련있는 데이터와 함수를 객체로 묶어내고 데이터와 함수를 감추거나 보여지게 하는 것. 타입스크립트는 캡슐화..