타입스크립트를 제대로 배우지 않고 문서를 보면서 적당히 홈페이지만 개발을 한 적이 있었다. 그 때는 api를 호출하지 않았기 때문에 제네릭을 사용할 일이 없었다. 하지만 api를 호출할 시 비동기적인 코드들과 같이 사용시에는 제네릭이 필수적으로 사용이 된다. 그 중 하나는 Promise 함수 이다. 아래의 함수를 예로 들어보면 간단하게 아이템을 비동기적으로 호출하는 함수이다. 리턴 타입이 일단 제네릭으로 되어 있으며 unknown인 상태이다. promise는 함수 호출 시점에서 await를 사용하느냐 여부에 따라 Pending이 될수도 있고 정상적인 값을 가져올 수도 있다. 그렇기 때문에 리턴 타입을 명확하게 써주어야 한다. 우선 아래와 같이 리턴 타입을 정의해보자. Promise는 타입스크립트에서 이미..

타입스크립트 제네릭은 호출하는 시점에 타입을 정의하는 것을 의미한다. function logText(text: T): T { return text; } T라는 것은 타입의 줄임말이며 아직 타입이 정의되지 않은 상태 입니다. 아래처럼 함수를 호출 할 때 타입을 정의 할 수 있음 function logText(text: T): T { return text; } logText("안녕하세요); logText(10); logText(true); 또한 인터페이스에서 제네릭을 사용하므로써 코드를 상당히 줄일 수 있는 장점도 있다. 제네릭의 타입제한 ㅌ타입을 무한정으로 받아버리면 이 역시 나중에 코드분석을 하기 어려워 진다. 딱 필요한 타입만 받게끔 미리 설정을 해 둠으로써 추후에 복기를 했을 때 까먹지 않고 바로 이..

오브젝트를 사용하는 것과 크게 뭐가 차이나는지 이해가 가지않음.

타입스크립트 유니언 타입 사실상 별거 없다. 타입을 여러개 더 추가 하는 방식의 코딩기법이다. 인터페이스 작성시 유니언타입 유의사항으로는 공통된 속성만 가져올 수가 있으므로 주의한다.

자바스크립트에서 함수에 인자값을 전달할 때 함수에서 받는 인자값과 함수를 호출할 때 인자값이 일치하지 않아도 문법상 오류가 나지는 않는다. 하지만 타입스크립트에서는 위와 같이 사용할 경우 에러를 내뿜는다. 함수의 인자값을 맞춰주어야 한다. 위의 처럼 함수를 호출할 때와 함수를 받는 곳에서 인자값이 일치하지 않는다면 오류가 난다. 컴파일 하지 말라는 뜻이다. 하지만 개발을 하다보면 인자값이 필요할 때도 있고 필요없을 때도 있기 마련 위의 이미지처럼 변수명 옆에 물음표(?)를 넣음으로써 해당 인자값은 있어도 되고 없어도 된다는 뜻이 된다.

자바스크립트만 사용하여 타입스크립트 처럼 보이기 위한 코딩 가이드 /** 을 이용하여 @param {type} 변수 를 작성해주면 된다. /** * * @param {number} a * @param {number} b */ const add = (a, b) => { return a + b; }; add(a, b); // @ts-check 를 작성해주면 타입스크립트와 비슷한 검증을 할 수 있다.