프로그래밍/Typescript

자바스크립트와 기본형 타입 자바스크립트의 기본형 값들에 대한 7가지 타입(number, boolean, string, undefined, null, symbol, bigint) 기본형들은 불변(immutable)이며 메서드를 가지지 않는다. 하지만 'birdview'.charAt(3) 는 문제없이 실행되며, 이는 기본형 값인 ‘birdview’가 메서드를 가지고 있는 것처럼 보인다. 하지만.. chatAt은 string의 메서드가 아니다. chatAt을 사용할 때 내부동작이 발생 (기본형 string에는 메서드가 없지만, 객체 String 타입이 정의) 래퍼 객체 (Wrapper Object) 레퍼 객체는 총 3가지(Number, String, Boolean)이 있다. let name = 'birdvie..

타입스크립트의 심벌(symbol)은 타입 공간이나 값 공간 중의 한 곳에 존재한다. 심벌은 이름이 같더라도 속하는 공간(타입 or 값)에 따라 다른 것을 나타낼 수 있기 때문 // Cylinder은 타입으로 사용 interface Cylinder { radius: number; height: number; } // Cylinder로 이름은 같지만 값으로 사용 const Cylinder = () => (radius: number, height: number) => ({ radius, height }); // => Cylinder는 상황에 따라 타입 or 값으로 둘다 사용될 수 있음 function calcVolume(shape: unknown) { if(shape instanceof Cylinder) { ..

자바스크립트는 덕 타이핑(duck typing) 기반이다. 💡 덕 타이핑이란? 객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는 방식이다. 이는 덕 테스트(The Duck Test)에서 유래되었는데, “만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다.” JS 에서 어떤 함수의 매개변수 구성 요소가 요구사항을 만족한다면, 타입이 무엇인지 신경 쓰지 않는 동작을 그대로 모델링합니다. 하지만 Type checker는 타입에 대한 이해도가 사람과 다른 면이 있어 예상치 못한 결과가 생기기도 함 ⇒ 구조적 타이핑을 제대로 이해해야만 오류를 제대로 파악할 수 있고, 견고한 코드를 짤 수 있음 interface V..

1. 문제 발생 const handleSearchValue = (e: KeyboardEvent) => { setSearchValue(e.currentTarget.value); setSearchValue(e.target.value); // error 발생 }; e.target과 e.currentTarget의 type alias가 다르다구..? 외 안되?! react/index.d.ts 를 까보면 // @types/react/index.d.ts interface BaseSyntheticEvent { nativeEvent: E; currentTarget: C; target: T; // ... } - KeyboardEvent는 BaseSyntheticEvent 타입을 extends하고 있다. 2. current..