Web

TypeScript Practice - Class, Interface

Classes 기존의 Java, Python에서의 클래스 개념과 별반 다를게 없습니다. 따라서 편하게 작성해 보도록 하겠습니다. class Player { constructor( private firstName: string, private lastName: string, public nickname: string ) {} } const hyunseo = new Player("hyunseo", "las", "현서"); // error hyunseo.firstName 다음과 같이 Class의 생성자 안에 private, public을 써줄 수 있는데, 이는 JS에서는 없는 기능입니다. 위 코드가 트랜스 파일된 결과를 보 면 "use strict"; var Player = /** @class */ (func..

Typescript Practice - Functions

Call Signatures 함수의 타입을 call signatures형태로 작성하여 줄 수 있습니다. 아래의 예시를 보시죠. type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 이렇게 작성해 주게 되면, add함수 안의 argument타입을 명시해 줄 필요가 없게 됩니다. 아래와 같이 add함수에 반환값을 주게 되면 안된다는 것입니다. type Add = (a: number, b: number) => number; // error const add: Add = (a, b) => { a + b; }; Overloading overloading은 동일한 이름에 매개 변수와 매개 변수 타입 또는 리턴 타입이 다른 여러 ..

Typescript Practice - OverView

Set Up touch index.ts && tsc --init 이라는 명령어를 쳐서 프로젝트를 만들어 줍니다. 그러면 tsconfig.json이라는 파일이 생성될 것이고, 아래와 같이 작성해 줍니다. tsconfig.json { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Projects */ // "incremental": true, /* Enable incremental compilation */ // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project re..

[Carrot Market] #8 REFACTORING Form

REFACTORING 이제 enter페이지의 form들을 이전 챕터에서 배운 React Hook Form으로 다 바꿔보도록 하겠습니다. /pages/enter.tsx import { useState } from "react"; import Button from "../components/button"; import Input from "../components/Input"; import { cls } from "../libs/utils"; import { useForm } from "react-hook-form"; type MethodType = "email" | "phone"; interface EnterForm { email?: string; phone?: string; } export default..