Study/TypeScript

[Typescript] Class 객체 지향 코드

타입스크립트에서는 파라미터에 써주기만해도 Typescript가 알아서 Constructor함수를 만들어준다. * 아래는 이해를 돕기위한 예시 사진 타입스크립트와 객체지향 프로그램이 가지고 있는 추상클래스(Abstract Class) 여기서 추상클래스란? 다른 클래스가 상속 받을 수 있는 클래스이다. 하지만 이 추상클래스는 직접 새로운 인스턴스를 만들 수는 없다. ex) new User()를 이용해 새로운 인스턴스를 만들려고 하면 error가 발생할 것이다. 이번엔 추상 메소드(Abstract Method)를 만들어 보자 (추상 메소드란? 추상 클래스를 상속받는 모든 것들이 구현을 해야하는 메소드를 의미한다.) (메소드란? 클래스안에 존재하는 함수) (참고: property를 private로 만들면 그 클..

[Typescript] Generic

제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 라이브러리를 만들거나, 다른 개발자가 사용할 기능을 개발하는 경우엔 제너릭이 유용할것이다. 그 외 대부분의 경우에는 제너릭을 직접 작성할 일은 없을것이다. 대부분의 경우 작성해놓은 제너릭을 사용만 하게 될것이다. Generic의 일반적인 형태 type SuperPrint = { (arr: T[]): T } const superPrint: SuperPrint = (arr) => arr[0] const a = superPrint([1, 2, 3, 4]) // number const b = superPrint([true, false, true]) // boolean const c = ..

[Typescript] over loading

Overloading은 직접 작성하기보다 외부 라이브러리에 자주 보이는 형태로, 하나의 함수가 복수의 Call Signature를 가질 때 발생한다 예를 들어, Next.js의 라우터 push가 대충 두 가지 방법으로 페이지를 이동한다고 할 때, router.push("/home"); router.push({ path: "/home", state: 1 }); * Type지정 type Config = { path: string, state: number } type Push = { (path: string): void, (config: Config): void } const push: Push = (config) => { if (typeof config === "string") { console.log(c..

[Typescript] call signature

// type 지정 type Add = (a:number, b:number) => number // 함수 const add:Add = (a, b) => a + b 타입스크립트에게 이 함수가 어떻게 호출되는지 설명해주는 부분 예시의 함수는 a, b인자를 받아서 a + b값을 return하는 함수이며 number, nuber type을 받고 number를 반환하는 함수이다.

[TypeScript_study] type지정을 쉽게 하는 팁

* TypeScript type지정을 쉽게 하는 팁 Object.keys() 그리고 Object.values()를 활용한다. console에서의 temp를 이용한다. 연습을 위한 api (https://api.coinpaprika.com/v1/coins/btc-bitcoin) 1. api데이터를 console.log를 이용하여서 console창에 출력한다. 2. 마우스 우클릭을 하여서 Store object as global variable를 클릭해주어 임시 변수 안에 해당 값들을 담아준다. temp1이라는 임시변수안에 값이 할당된다. 3. Object.keys()를 이용하면 key들이 전부 배열안에 담기게 된다. 4. Object.keys()를 이용해 key를 가져온뒤 join함수를 이용해 문자열로 변..

[TypeScript] TypeScript & React SyntheticEvent(합성이벤트)

* [참고] https://ko.reactjs.org/docs/events.html import React, { useState } from "react"; import "./App.css"; function App() { const [value, setValue] = useState(""); const handleValue = (e: React.FormEvent) => { setValue(e.currentTarget.value); }; const onSubmit = (e: React.FormEvent) => {}; const onClick = (e: React.MouseEvent) => {}; return ( Click ); } export default App; React.event이름.이벤트를 발생..