‼️ 현업에서는 대다수의 프로젝트가 타입스크립트로 개발, 관리되고 있을 만큼, 이제는 타입스크립트를 사용하지 않는 곳을 찾기 힘들정도라고 합니다. 동적인 자바스크립트에서 추가로 타입을 체크해주며 코드의 안정성을 높이는 것은 잠재적 버그도 방지하며 크게 개선할 수 있기 때문입니다
💻 CODE
function divide(a, b) {
return a / b;
}
console.log(divide(5, 2)) 2.5
▶️ 다음과 같은 코드에서 divide 함수는 a, b 인수를 나눠주는 함수입니다
만약 인수가 사용자의 인풋을 통해 입력되는 값이라고 한다면, ❌사용자가 꼭 숫자를 입력한다는 법은 없겠죠?
'안녕하세요', '감사합니다' 같은 문자열이 입력될 수도 있습니다.
⬇️ 그럼 아래와 같이 Not a Number이라는 출력이 나타날 것입니다.
이러한 상황은 개발자가 원하지 않는 상황일 것입니다
다음과 같은 상황을 방지해주고자 Typescript를 사용해서 코드의 안정성을 향상시킵니다
💻CODE
function divide(a: number, b: number) {
return a / b;
}
console.log(divide(5, 2))
// After tsc index.ts
function divide(a, b) {
return a / b;
}
console.log(divide(5, 2));
⬆️ 위와 같은 index.ts 코드를 작성 후 tsc index.ts를 터미널에 입력하면, ts파일이 js파일로 컴파일이 됩니다
💡 any 대신 unknown 사용하기
▶️any 라는 값은 어떤 값이든 할당할 수 있게 만들어주는 하나의 치트키입니다. 타입스크립트에서는 아래의 코드와 같이 특정 타입을 지정해서 선언을 해준다고 위해서 설명을 했습니다.
🔽 아래와 같이 any로 타입을 지정을 해주어도 코드가 작동하는 것을 볼 수 있습니다
▶️ 이게 뭐가 문제지 ❓ 라고 생각하실 수 있습니다. 이렇게 작동을 하게되면 사실상 타입스크립트가 제공하는 정적 타이핑의 이점을 모두 버리는 것과 다름이 없습니다
▶️ 그래서, 불가피하게 아직 타입을 지정할 수 없는 경우에는 unknown을 사용해야합니다. unknown 역시 모든 값을 할당할 수 있는 top type(Tree 형태로 봤을때, 가장 상단의 타입)으로, 하지만 any와 다른 점은 이 값을 바로 사용하는 것이 불가능 ❌하다는 것 입니다.
🔽 그래서 우리는 이러한 unknown을 사용하기 위해서 type narrowing즉 타입을 원래 의도했던 대로 적절히 좁히는 방법을 사용해야합니다
💡 제네릭 Generic
▶️ 제네릭은 함수나 클래스 내부에서 단일 타입이 아닌 다양한 타입에 대응할 수 있도록 도와주는 도구입니다. 타입을 호출하는 시점에 결정되며, 주로 타입이 명확하지만 여러 타입을 다루어야 할 때사용합니다
ℹ️ 상황:리스트를 받아 가장 처음값을 반환하는 함수()를 작성한다고 가정하겠습니다
▶️ 위 함수에서 T는 제네릭 타입으로, 함수 호출 시점에 리스트의 타입(number[], string[] 등)에 따라 자동으로 결정됩니다
📝 SUMMARY
📍언제 제네릭을 사용하고, 언제 unknown을 사용할까?
📌 제네릭: 타입이 명확하지만, 다양한 타입에 대응해야 할 경우 사용합니다. 예를 들어, 리스트나 맵과 같은 자료구조를 다룰 때 적합합니다.
📌 unknown: 타입이 불확실하거나 API 호출 등으로 예측할 수 없는 데이터를 처리해야 할 때 사용합니다
