TypeScript | Generic 제네릭 (feat. TypeScript 두 달차 후기)

Positive Ko·2021년 2월 14일
46

TypeScript

목록 보기
6/6
post-thumbnail

0. 타입스크립트 두 달 후기

타입스크립트를 사용한 지 두 달이 되어간다.
그동안 초보적인 수준에서 타입스크립트를 배우고 적용하고 적응해가는 과정이 예상했던 것보다 어렵지 않았다.
내가 느꼈던 타입스크립트의 장점은,

1) VSCode + TypeScript = 환상의 호흡: TypeScript를 지원하는 IDE를 사용하면 자동완성 기능이라든지, 툴팁으로 어떤 arguments들이 들어가야하는지를 알려주는 기능을 통해 코드를 작성하는 시간을 단축할 수 있었다. (특히 VSCode를 사용하면서 TypeScript에게 폴인럽..💛)

2) 디버깅을 하기 전에 미리 에러 방지: 타입스크립트를 자바스크립트로 컴파일하는 과정에서 미리 타입 에러를 체크해서 에러가 있다면 아예 컴파일 조차 되지 않는다. 이런 이유로 런타임 전에 오류를 사전 체크할 수 있는 장점이 있었다. 또한 디버깅하면서도 오류를 바로잡을 때, 타입만 제대로 정의해주었다면 어떤 인자로 오류가 난 것인지 파악하기 수월했다.

3) 수많은 documentation들: 막상 컴파일 에러가 발생하더라도, 타입스크립트 관련한 수많은 문서들과 스택오버플로우와 함께라면 크게 두렵지 않았다. 수많은 오류를 해결하면서 새로운 스택을 배우는 것에 대한 막연한 두려움을 쉽게 떨쳐버릴 수 있게 해준 과정이었다.

하지만 사용하면 할수록 타입스크립트의 올바른 사용(?)에 대한 의문과 갈증 같은 것이 생겼는데...
예를 들어 jsx에서의 event 타입 정의라든지, thrid party library의 타입 정의라든지(그동안 any를 남발하곤 했다).. 혹은 재사용하는 컴포넌트의 경우, 미리 타입을 정의해버리면 재활용하는 데에 있어서 난항을 겪곤 했다.
그러면서 any를 써야하는 경우가 종종 생겼는데, 사실 any를 쓰면 기존 자바스크립트와 다를 것이 없기 때문에 내가 제대로 타입스크립트를 활용하고 있는 것인지 의문이 들었다🧐..


앞으로 타입스크립트에 대해 공부하며..
올바른 사용을 지향하고 꾸준한 리팩토링을 하겠다고 약속하며..😇
오늘은 제네릭에 대해 정리해보려고 한다.




1. 제네릭이란? 왜 제네릭을 써야하나?

Generic이란 데이터의 타입을 일반화한다(generalize)한다는 것을 뜻한다.
Generic은 자료형을 정하지 않고 여러 타입을 사용할 수 있게 해준다.
즉, 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 '재사용'이 가능하다는 장점이 있다.

제네릭을 쓰지 않을 경우, 불필요한 타입 변환을 하기 때문에 프로그램의 성능에 악영향을 미치기도 하는데, 제네릭을 사용하게되면 따로 타입 변환을 할 필요가 없어서 프로그램의 성능이 향상되는 장점이 있다. (링크)




2. generic이 없다면?

위처럼 generic을 쓰지 않는다면, 1) 타입을 미리 지정하거나 2) any를 이용하여 구현할 수 있다.
1) 타입을 미리 지정하자면, 확실한 타입체크가 이뤄질 수 있겠지만 항상 number라는 타입을 받아야하므로 범용성이 떨어진다.
2) 그렇다고 any를 사용한다면 자료의 타입을 제한할 수 없을 뿐더러, 이 function을 통해 어떤 타입의 데이터가 리턴되는지 알 수 없다.

이런 경우에 사용할 수 있는 것이 제네릭이다.



3. generic 이렇게 써보자!

1) Generic 기본적 사용

<T>(arg: T):T 여기서 <T>는 Type의 약자로 제네릭을 선언할 때 T를 관용적으로 사용한다. 여기에서 다이아몬드 연산자 안에 있는 T는 타입변수라고 한다.
이제 이 identify 함수는 T라는 타입 변수를 갖게 된다. 그리고 argument와 return의 type은 T라는 타입 변수로 동일하다.

만약 여기서 length를 확인하는 코드를 쓰면 어떻게 될까? 에러가 난다. 왜냐하면 입력값과 리턴값의 타입을 동일하게 정해두기만 했으므로, 인자에 length 프로퍼티가 없는 number 타입이 들어왔을 때 유효하지 않기 때문이다. 따라서 다음과 같이 세부적으로 변수 타입을 지정해줄 수 있다. 이제 이 함수는 T라는 변수 타입을 받고, 인자로는 배열 형태의 T를 받는다. 즉, identify([1, 2, 3])과 같은 형태로 사용할 수 있다.
ps. 혹은 <T extends Lengthwise>처럼 Lengthwise를 extends해서 사용하면 부분적으로 length property가 있는 타입의 경우 에러 없이 사용할 수 있다.

2) 두 개 이상의 Generic 사용하기

두 변수의 타입이 다를 경우 두 가지의 타입 변수가 필요하다. 이 때 제네릭을 사용할 수 있다. 관용적으로 사용하는 T 다음으로 오는 알파벳을 순서대로 사용하면 된다.

3) 상속 이용하기 (extends)

타입스크립트 작성 중 메서드 관련 오류가 날 때가 잦은데, 이런 방법을 사용할 수도 있었다. (출처) 위는 toString 메서드를 가지고 있는 객체를 extends해서 에러를 해결하는 예시이다. 필요한 메서드를 추가하는 것뿐만 아니라 하나의 메소드만 사용가능하도록 제한할 수도 있다.

4) 조건부 타입으로 Generic 사용하기

위처럼 특정 인터페이스 내에서 extends와 삼항 연산자를 이용해서 타입을 지정할 수도 있다.

5) JSX에서 arrow function으로 제네릭 사용하기

const foo = <T extends {}>(x: T):T => x를 사용하면 된다. 다이아몬드 연산자가 HTML태그가 아니라 제네릭이라는 힌트를 주기 위해 extends {}를 사용한다.
다만 이 경우, T가 object에 제한되기 때문에 type-safety를 위해 extends unknown을 사용할 수 있다.
const foo = <T extends unknown>(x: T) => x




참고자료

https://www.typescriptlang.org/docs/handbook/generics.html
https://www.xspdf.com/help/52564514.html
https://post.naver.com/viewer/postView.nhn?volumeNo=29721395&memberNo=10381152
https://muang-kim.tistory.com/86
https://darrengwon.tistory.com/802
https://hyunseob.github.io/2017/01/14/typescript-generic/

profile
내 이름 고은정, 은을 180deg 돌려 고긍정 🤭

41개의 댓글

comment-user-thumbnail
2021년 2월 16일

🤗🤗🤗 좋은 글 잘 보고 갑니다 🤗🤗🤗

1개의 답글
comment-user-thumbnail
2021년 6월 10일

ts어려벙

1개의 답글
comment-user-thumbnail
2022년 10월 13일

타입스크립트 제네릭에 관한글 잘 봤습니다 !

답글 달기
comment-user-thumbnail
2023년 8월 14일

YouTube Revanced APK has reached its end, leaving behind the legacy of the convenience it brought to all users on the platform. You can obtain Honista Apk through the Google Play Store and various other app stores without any cost. However, users can access the complimentary Honista Instagram Mod via our offlinemodapk website.

답글 달기
comment-user-thumbnail
2024년 2월 22일

If you are unsatisfied with the limitations and restrictions of the Instagram app, You don’t need to worry about it. Download and install the New Instagram app called “Honista” free of cost on your Android phone and tablet. Honista APK Download is free of cost for all users.

https://thehonista.com/

답글 달기
comment-user-thumbnail
2024년 4월 24일

Are you looking for Instagram Pro features and download reels effortlessly? Check out Honista APK. I use this app and strongly recommend it to all of you, with ad-free browsing, media downloads, and customizable themes, it enhances your Instagram experience. Plus, it adds security layers and ghost mode. Download it from here: https://thehonistaapk.com/

답글 달기
comment-user-thumbnail
2024년 7월 16일

Instagram and Honista offer distinct social media experiences. Instagram is renowned for its vast user base and diverse content, while Honista emphasizes a streamlined interface and enhanced digital wellbeing tools with a strong focus on user control and privacy. Both platforms cater to different user preferences, with Instagram focusing on global connectivity and Honista prioritizing user empowerment.

답글 달기
comment-user-thumbnail
2024년 7월 24일

Honista: Precision in Every Piece. https://honista.one/

답글 달기
comment-user-thumbnail
2024년 7월 25일

CashMachine777: Where Every Spin Sparks Fortune. https://cashmachine777.org/

답글 달기
comment-user-thumbnail
2024년 7월 26일

Unlock the Magic of Jackpots with Juwa777, https://s9game.com.pk/

답글 달기
comment-user-thumbnail
2024년 9월 8일

Great article thanks for sharing if you want to download gb whatsApp pro please click here- https://gbapkapp.in/

답글 달기
comment-user-thumbnail
2024년 9월 8일

informative blog post, if you want to download gb whatsapp please visit here-
https://gbwhetsapp.com/

답글 달기
comment-user-thumbnail
2024년 9월 13일

Great post on TypeScript and generics! Your explanation of how generics improve flexibility and performance by avoiding unnecessary type conversions is very insightful. As you continue learning, exploring advanced TypeScript features and additional resources can further enhance your understanding. For further guidance about spells, you might find the insights from https://powerfullovespell.love/ helpful. Keep up the excellent work!

답글 달기
comment-user-thumbnail
2024년 9월 26일

Also see the Instaultra Apk. It is now the most popular Instagram modded version with all the best and additional features.

답글 달기
comment-user-thumbnail
2024년 9월 28일

Your reflections on TypeScript and generics are insightful, especially your appreciation for how tools like VSCode enhance productivity and error-checking. It's great to see your commitment to using TypeScript effectively and your awareness of the pitfalls of relying on any, particularly when defining types for reusable components. For those looking to deepen their understanding of generics, the resources you mentioned are valuable. Additionally, exploring platforms like http://gettingoveritapk.com/ can provide further engaging content to complement your learning. Keep up the fantastic work!

답글 달기
comment-user-thumbnail
2024년 10월 2일

"Los genéricos genéricos de TypeScript son una manera increíble de mejorar la reutilización y la flexibilidad del código. Permiten a los desarrolladores crear funciones y componentes que funcionan sin problemas con varios tipos de datos, lo que hace que el código sea más sólido y escalable. ¡Realmente una herramienta poderosa para cualquier proyecto, todo elaborado con precisión y letra bonita!"
https://www.tiposdeletras.co/

답글 달기
comment-user-thumbnail
2024년 10월 11일

Generic generics can be incredibly useful when discussing code efficiency and flexibility, especially in programming languages like C#. Just as generics simplify code by allowing it to work with different data types, using reliable visa services simplifies the complex process of international travel. Both make things more adaptable and streamlined, reducing unnecessary hassles and helping you focus on what really matters!
https://odittravels.com/

답글 달기
comment-user-thumbnail
2024년 10월 12일

Revive Cosmetic is your ultimate destination for transforming beauty and self-care! With a team of skilled professionals dedicated to enhancing your natural features, they offer a wide range of advanced treatments tailored to your unique needs. Whether you're seeking innovative skincare solutions, cosmetic enhancements, or simply a little pampering, Revive has it all!
https://www.revivecosmeticclinic.com/

답글 달기
comment-user-thumbnail
2024년 10월 14일

TypeScript je fantastický programovací jazyk, který do JavaScriptu přidává silné psaní, díky čemuž je váš kód robustnější a snáze se udržuje! Pokud chcete zlepšit své dovednosti v oblasti TypeScript nebo potřebujete pomoc s řešením problémů s kódem, zvažte použití chat GPT zdarma. Tento nástroj vám může poskytnout vysvětlení, příklady a osvědčené postupy, které vám pomohou pochopit složité koncepty nebo vyřešit konkrétní problémy, se kterými se můžete setkat. Je to skvělý zdroj pro začátečníky i zkušené vývojáře, kteří chtějí svou hru TypeScript vylepšit! Šťastné kódování!
https://chatgtpai.org/cs/

답글 달기
comment-user-thumbnail
2024년 11월 19일

"Just like TypeScript brings structure and efficiency to coding, the apk film app brings seamless streaming and a smooth user experience to your movie nights. Enjoy endless films with no interruptions, all in one easy-to-use app!"
https://filmappapk.com/

답글 달기
comment-user-thumbnail
2024년 11월 28일

"बुद्धं शरणं गच्छामि" श्लोक की शक्ति और उसके गहरे अर्थ को समझने के लिए यह लेख पढ़ें। इसमें आपको श्लोक के हिंदी और अंग्रेजी में अनुवाद, साथ ही PDF डाउनलोड का विकल्प मिलेगा। इस श्लोक के माध्यम से आप बुद्ध के आशीर्वाद और मार्गदर्शन से अपनी आध्यात्मिक यात्रा को और भी गहरा बना सकते हैं। सही उच्चारण व अर्थ जानने के लिए हमारे वेबसाइट पर जरूर जाएं: https://hinduismfaq.com/buddham-saranam-gachami/

답글 달기
comment-user-thumbnail
2024년 11월 28일

"बुद्धं शरणं गच्छामि" श्लोक की शक्ति और उसके गहरे अर्थ को समझने के लिए यह लेख पढ़ें। इसमें आपको श्लोक के हिंदी और अंग्रेजी में अनुवाद, साथ ही PDF डाउनलोड का विकल्प मिलेगा। इस श्लोक के माध्यम से आप बुद्ध के आशीर्वाद और मार्गदर्शन से अपनी आध्यात्मिक यात्रा को और भी गहरा बना सकते हैं। सही उच्चारण व अर्थ जानने के लिए हमारे वेबसाइट पर जरूर जाएं: https://hinduismfaq.com/buddham-saranam-gachami/

답글 달기
comment-user-thumbnail
2024년 11월 30일

If you are unsatisfied with the limitations and restrictions of regular media players, you don’t need to worry about it. Download and install the advanced media player app called “Lark Player” free of cost on your Android phone and tablet. Lark Player APK Download is free of cost for all users.
https://honistaapp.info/

답글 달기
comment-user-thumbnail
2024년 11월 30일

If you are unsatisfied with the limitations and restrictions of regular media players, you don’t need to worry about it. Download and install the advanced media player app called “Lark Player” free of cost on your Android phone and tablet. Lark Player APK Download is free of cost for all users.
https://www.larkplayerapk.net/

답글 달기
comment-user-thumbnail
2024년 12월 1일

Home Rubbish Removal Dubai is a professional waste management service specializing in the efficient and eco-friendly disposal of residential, commercial, and industrial waste across Dubai.
https://take-myjunkdubai.com/trash-removal-dubai/

답글 달기
comment-user-thumbnail
2024년 12월 1일

Home Rubbish Removal Dubai is a professional waste management service specializing in the efficient and eco-friendly disposal of residential, commercial, and industrial waste across Dubai.
https://take-myjunkdubai.com/trash-removal-dubai/

답글 달기
comment-user-thumbnail
2024년 12월 1일

Home Rubbish Removal Dubai is a professional waste management service specializing in the efficient and eco-friendly disposal of residential, commercial, and industrial waste across Dubai.
https://take-myjunkdubai.com/trash-removal-dubai/

답글 달기
comment-user-thumbnail
2024년 12월 1일

Home Rubbish Removal Dubai is a professional waste management service specializing in the efficient and eco-friendly disposal of residential, commercial, and industrial waste across Dubai.
https://take-myjunkdubai.com/trash-removal-dubai/

답글 달기
comment-user-thumbnail
2024년 12월 1일

Home Rubbish Removal Dubai is a professional waste management service specializing in the efficient and eco-friendly disposal of residential, commercial, and industrial waste across Dubai.
https://take-myjunkdubai.com/trash-removal-dubai/

답글 달기
comment-user-thumbnail
2024년 12월 1일

The Instafest APK is entirely safe, with its security verified by multiple virus and malware detection engines. Each update can also be scanned through these platforms, ensuring a worry-free experience with Instafest!
https://instafestapp.us/

1개의 답글
comment-user-thumbnail
2024년 12월 2일

"If you want to learn more about Christian history, values, and beliefs, I suggest going to this useful website: https://christianityuniverse.com. It provides insightful articles and viewpoints to deepen your spiritual development.

답글 달기
comment-user-thumbnail
2024년 12월 7일

Lucky Patcher is a popular Android app that allows users to modify other apps and games. It provides features like removing ads, bypassing in-app purchases, and altering app permissions. Users can create custom patches and even backup their favorite apps. While it offers a range of tools for advanced users to enhance their mobile experience, it’s important to note that using Lucky Patcher may violate terms of service for some apps and can pose security risks. As such, it’s often recommended for those who are tech-savvy and understand the potential consequences. https://luckypatcherr.net/

답글 달기
comment-user-thumbnail
2024년 12월 7일

Honista Apk is a lifestyle brand dedicated to enhancing the everyday moments that matter. With a commitment to quality, sustainability, and style, Honista offers a curated selection of products designed to inspire and uplift. From eco-friendly home essentials to stylish accessories, each item is thoughtfully crafted to blend functionality with aesthetics.
https://honistaapk.me/
https://honistaapk.me/download/

1개의 답글
comment-user-thumbnail
2024년 12월 15일

अगर आप श्री हनुमान जी की भक्ति और चालीसा के महत्व के बारे में अधिक जानना चाहते हैं, तो आपको यह वेबसाइट जरूर देखनी चाहिए: "https://hanumanchalisa.cc" यहां पर आपको हनुमान चालीसा से जुड़ी पूरी जानकारी मिलेगी , जो आपके जीवन को आशीर्वाद और समृद्धि से भर देगी।

답글 달기
comment-user-thumbnail
2024년 12월 15일

अगर आप श्री हनुमान जी की भक्ति और चालीसा के महत्व के बारे में अधिक जानना चाहते हैं, तो आपको यह वेबसाइट जरूर देखनी चाहिए: "https://hanumanchalisa.cc" यहां पर आपको हनुमान चालीसा से जुड़ी पूरी जानकारी मिलेगी , जो आपके जीवन को आशीर्वाद और समृद्धि से भर देगी।

답글 달기
comment-user-thumbnail
6일 전

https://thes9game.cc/ The S9 game is one of the best gaming application for players who like gambling and want to earn real money by just playing games that are available. If you are also one of them you should visit the page and download and start earning real money in no time.

답글 달기

शिवजी की आरतियाँ हमें आत्मिक शांति और आशीर्वाद प्रदान करती हैं। यदि आप इन आरतियों के शब्दों और उनके अर्थ के बारे में अधिक जानना चाहते हैं, तो आप "https://shivaartilyrics.co.in" यहां पर जाकर विस्तृत जानकारी प्राप्त कर सकते हैं। यह वेबसाइट आपके भक्ति मार्ग को और भी सशक्त बनाएगी।

답글 달기