[TypeScript] 타입 정의를 위한 팁

타입스크립트를 사용하면서 특정 라이브러리를 사용하거나 이벤트의 타입을 알아야할 때 정확한 타입을 알기 어려워 답답할 때가 있다그럴 때를 위한 팁! 1) 특정 메서드의 반환값을 알아야할 때예를들어 onSubmit 등 이벤트가 발생할 때 전달되는 매개변수 e의 알아야할 때onSubmit={(e) => {}}이렇게 임시로 함수를 작성한 뒤 알고싶은 e를 명시해준다 그리고 e에 호버해보면 위와같이 인텔리전스가 타입을 알려준다! 2) 라이브러리를 사용하는 경우react-hook-form의 resolver를 props로 전달하기위해 타입을 명시하려하는데 위 값은 호버해도 찾기가 어려웠다나는 챗지피티에게 물어 타입을 확인했고, 또다른 알 수 있는 방법을 튜터님께 여쭤보았더니 보통 라이브러리의 공식 사이트에서 typs..

• format_list_bulleted TypeScript
• · 2024. 10. 23.
• textsms

[TypeScript] 제네릭과 유틸리티 타입

제네릭타입을 클래스나 함수 등에서 파라미터처럼 사용할 수 있음function printAnything(arr: T[]): void { for(let i = 0; i 을 쓰지 않아도 타입 추론 가능printAnything([1, 2, 3]); // 를 쓰지 않아도 타입 추론 가능 T, U는 제네릭에서 많이 사용되는 단어이고 꼭 저런 단어가 아니더라도 내가 식별할 수 있는 단어면 활용할 수 있다! hook에서 활용하기function App() { const [counter, setCounter] = useState(); const increment = () => { setCounter(prev => prev++); }; return {counter};}- 위 경우에서 useState에 제..

• format_list_bulleted TypeScript
• · 2024. 9. 24.
• textsms

[TypeScript] 타입 어노테이션과 추론

타입 어노테이션과 타입 추론1) 타입 어노테이션사용하려는 변수, 함수 등 옆에 : 기호와 함께 우리가 배운 선언 가능한 타입을 넣어주는 것어떤 값이 어떤 타입을 참조하고있는지 개발자가 ts에게 알려주는 행동 2) 타입 추론ts는 코드에서 타입을 명시하지 않아도, 컴파일러가 코드의 문맥을 통해 타입을 자동으로 추론한다.  타입 어노테이션의 필요성우리가 명시하지 않아도 ts는 타입을 추론할 수 있는데 왜 타입 어노테이션을 해야 할까? const subtract = (a: number, b: number) => { a - b;}; 위 함수는 아무것도 반환하지 않고, ts도 타입 추론을 통해 반환값이 void라는 것을 추론할 수 있다.하지만 아마도! 원하는 동작이 아닐 것이다. 우리는 a - b가 반환되길 바..

• format_list_bulleted TypeScript
• · 2024. 9. 24.
• textsms

[Typescript] 타입스크립트의 타입 선언

타입스크립트란?타입스크립트 = 자바스크립트 + 타입시스템- 정적 타입 시스템을 가지고있는 언어프로그램이 실행되기 전 컴파일타임에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식이를 이용해 프로그램의 많은 오류를 미리 발견할 수 있음 정적 타입 시스템의 장점1. 오류를 미리 발견할 수 있음- 실행하기 전 오류를 찾기 때문에 프로그램이 더 안정적으로 작동할 수 있음 2. 안정성- 잘못된 타입의 데이터를 사용하는 실수를 줄일 수 있음  JS와의 차이import React from 'react';const App: React.FC = () => { return ( Hello, World! This is a simple React component. );};export de..

• format_list_bulleted TypeScript
• · 2024. 9. 24.
• textsms