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/
21개의 댓글
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.
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.
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/
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.
Great article thanks for sharing if you want to download gb whatsApp pro please click here- https://gbapkapp.in/
informative blog post, if you want to download gb whatsapp please visit here-
https://gbwhetsapp.com/
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!
Also see the Instaultra Apk. It is now the most popular Instagram modded version with all the best and additional features.
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!
"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/
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/
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/
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/
🤗🤗🤗 좋은 글 잘 보고 갑니다 🤗🤗🤗