몽땅뚝딱 개발자

◽ Partial 특정 타입의 부분 집합을 정의할 때 사용한다. interface UserInfo { name: string age: number } type User = Partial const user1: User = {} const user2: User = { name: 'hi' } const user3: User = { name: 'hello', age: 20000 } ◽ Record 타입스크립트에서는 인덱스 시그니처(Index Signature)는 대괄호로 객체를 접근하는 방법을 사용할 수 있다. 인덱스 시그니처의 경우 문자열 리터럴을 key로 사용하지 못하지만, Record는 가능하다. 예제 1. // 1. 인덱스 시그니처를 사용했을 때 type UserInfo = { [name: string..

CASE 1. Action 유니온을 인덱싱하여 반복 없애기 interface SaveAction { type: 'save'; // ... } interface LoadAction { type: 'load'; // ... } type Action = SaveAction | LoadAction type ActionType = 'save' | 'load' // 타입이 반복된다. // Action 유니온을 인덱싱하면 타입 반복 없이 ActionType을 정의할 수 있다. type ActionType = Action['type'] // 타입은 'save' | 'load' // 하지만 pick을 사용하면 다른 결과를 얻는다. type ActionRec = Pick // {type: 'save' | 'load'} C..

async, await를 더 잘 사용해보기! ◽ Promiss.all 병렬로 처리가 돼야하는 경우 Promiss.all을 사용하면 된다. async function fetchPages() { const [ response1, response2, response3 ] = await Promise.all([ fetch(url1), fetch(url3), fetch(url3) ]) } ◽ Promiss.race 동기로 처리되는 함수들 중 가장 먼저 이행된 결과값을 반환한다. 출처 댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/race 개..

📍 클릭 시 이동! 1. 분기문 사용하기 2. instanceof 사용하기 3. 속성 체크하기 4. 명시적 '태그' 붙이기 5. 사용자 정의 타입 가드 사용하기 추가. 주의할 점 ◽ 1. 분기문 사용하기 예제 1. if문 const el = document.getElementById('foo') // 타입: HTMLElement | null if(el) { el // 타입: HTMLElement } else { el // 타입: null } 예제 2. 에러 던지기 const el = document.getElementById('foo') // 타입: HTMLElement | null if(!el) throw new Error('변수를 찾을 수 없습니다.') el // 타입: HTMLElement ◽ 2...

◽ as const const는 변경할 수 없는 변수를 선언할 때 사용하는 것이고, as const와는 다르다. as const는 타입스크립트가 해당 값에 추정되는 많은 타입들 중에서 최대한 좁은 타입으로 추론할 수 있도록 한다. 예를 들어, 원시형 타입은 const로 선언하면 변경이 불가능하지만 Array나 Object는 원시형 타입이 아닌 참조 타입이기 때문에 const로 선언하더라도 깊은(deep) 변경을 실행할 경우 값을 바꿀 수 있다. 따라서 참조 타입은 필요한 경우, const 단언문을 사용하여 타입을 좁히거나 변경할 수 없도록 만들 수 있다. // 타입은 { x: number, y: number } const v1 = { x: 1, y: 2, }; v1.x = 3 // 정상: 변경이 가능하다..

◽ Readonly - Readonly는 속성을 읽기만 가능하도록 설정하여 매개변수가 변경되는 것을 방지한다. - 변경이 발생하는 코드를 쉽게 찾을 수 있으며, 변경하면서 발생하는 오류를 방지할 수 있다. - 단, Readonly는 얕게 동작하므로 깊은(deep) readonly 타입이 필요하다면 ts-essentials에 DeepReadonly 제네릭을 사용하면 된다. interface Outer { inner: { x: number; } } // 이렇게도 적을 수 있다. // const o: { readonly Outer } const o: Readonly = { inner: { x: 0 } }; // 할당할 수 없다. o.inner = { x: 1 }; // 하지만 이건 가능한데, readonly가..

forEach, for(;;) 루프 말고도 다른 형태가 또 있었다. 깨달음 추가) 이미 in을 사용하고 있었다. 나는 바보🥺 ◽ for-in const tempArr = [1, 2, 3, 4, 5] for (const item in tempArr) { console.log(item) } ◽ for-of const tempArr = [1, 2, 3, 4, 5] for (const item of tempArr) { console.log(item) } ◽ for-in VS for-of 인덱스에 신경쓰지 않는다면 of를 사용하는 것이 더 좋다고 한다. for-in 루프는 대부분의 브라우저와 자바스크립트 엔진에서 for-of나 for(;;) 루프보다 몇 배나 느리다. - for-in: 열거 가능한 프로퍼티가 대상..

◽ 인터페이스(interface) 인터페이스의 특징으로는 보강을 할 수 있다는 것인데, 이를 선언 병합(declaration merging)이라고 한다. 선언 병합은 반드시 인터페이스를 사용해야 한다. interface IState { name: string; capital: string; } interface IState { population: number; } const text: IState { name: 'test', capital: 'TEST', population: 50000 } ◽ 타입(type) 인터페이스는 타입을 implements로 확장할 수 있지만 유니온 같은 복잡한 타입은 확장 할 수 없다. 타입은 유니온이 가능하다. type AorB = 'a' | 'b' 💡 타입과 인터페이스를 ..

타입스크립트에서 변수에 값을 당하고 타입을 선언하는 방법은 타입 선언, 타입 단언 2가지 형태가 있다. 📄 사용예제 interface Person { name: string }; // 타입 선언: 그 값이 선언된 타입임을 명시 const alice: Person = { name: 'Alice' }; // 타입 단언: 타입스크립트가 추론한 타입이 있더라도 Person 타입으로 간주 const alice = { name: 'Alice' } as Person; ◽ 타입 선언 타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사한다. 아래 예제에서는 Person에 맞는 속성이 없기떄문에 타입스크립트에서 오류를 표시한다. // 타입 선언 const alice: Person = {}; // error: 'P..

input의 type을 정하고 이렇게 패턴을 정해놓으면 브라우저에서 알아서 체크하고 UI까지 만들어준다. 하지만 대부분 자체적으로 처리하고 싶을 것이다. :pattern="type === 'password' ? '[A-Za-z]+' : ''" 그때는 아래의 옵션을 추가해주자. // ... 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.