FE/TypeScript3 [TypeScript] interface와 type의 차이점 interface와 type의 차이점 # 확장하는 방법의 차이 1. interface 확장 방법 interface User { name: string age: number } interface WebUser extends User { website: string } interface Student { name: string age: number } interface Student { id: number } interface는 extends를 이용하거나 혹은 그냥 선언으로도 확장이 가능하다. 2. type 확장 방법 type User { name: string age: number } type WebUser = User & { website: string } type은 &을 이용하여 확장할 수 있다. 그러.. 2023. 2. 25. [TypeScript] 제네릭 제네릭 # 제네릭(Generics)이란? 타입스크립트를 사용하면 변수의 타입을 변경할 수 없다. name: string이라든지, age: number라든지, 변수 선언과 동시에 타입이 지정되기 때문이다. string | undefined 처럼 작성해주면 약간은 유연하게 사용할 수 있으나 기본적으로 타입은 항상 고정되어 있다. 그러나 프로그래밍을 하다보면 변수의 타입이 바뀔 수도 있다, 혹은 하나의 함수에 다양한 타입의 값을 넣어야 할 수도 있다. 이런 경우에는 타입을 고정적으로 지정하면 오히려 불편해진다. 따라서 타입을 직접적으로 고정시키지 않고 변수처럼 언제든지 변할 수 있도록 해주는 장치가 등장하였는데, 이를 제네릭(Generic)이라고 한다. function add(x: string | number.. 2023. 2. 1. [TypeScript] TypeScript 알아보기 TypeScript 알아보기 # 타입스크립트란 자바스크립트의 확장된 언어로, 자바스크립트에 타입이 부여된 언어이다. 자바스크립트는 동적인 언어로, 변수 선언 시 타입을 따로 지정하지 않고 런타임할 때 타입이 결정된다. 따라서 유연하게 이용할 수 있다는 편리함이 있지만 그만큼 에러 발생의 위험이 높다. 개인적으로 타입스크립트의 필요성을 정말 느꼈던 적이 있다. 프로젝트를 제작할 때, 아이템의 index를 지정해주고 버튼을 클릭할 때마다 index를 더하거나 빼서 다른 아이템을 보여주는 기능이 있었다. index가 1일 때는 1번 아이템, index가 2일 때는 2번 아이템, 이런 식으로! 그래서 index를 +하는 버튼과 -하는 버튼을 구현했는데, 자꾸 제대로 동작하지 않는 것이다. 한참을 헤매던 결과 타.. 2023. 1. 5. 이전 1 다음
