타입스크립트18 타입스크립트의 인터페이스 인터페이스란? 인터페이스는 상호 간에 정의한 약속이나 규칙을 뜻하며, 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 인터페이스로 함수 정의하기 // 인터페이스로 함수 정의하기 interface Add{ // (num1:number, num2:number): void; -> return 값이 없을때 (num1:number, num2:number): number; } const add : Add = function(x,y){ return x+y; } add(10,20); interface IsAdult { (age:number) : boolean.. 2022. 11. 21. 타입스크립트의 타입 타입스크립트의 타입 : 을 사용해서 자바스크립트 코드에 타입을 정의하는 방식을 타입표기(Type Annotation)이라고 한다. String let str: string = 'hi'; Number let store: number = 123412342; // number 타입이 너무 길때는 구분을 위해서 _를 넣을수 있다. let store_1: number = 123_4123_42; Boolean let isLoggedIn: boolean = false; Array let arr: number[] = [1,2,3]; let arr: Array = [1,2,3]; Tuple 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다. 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 생.. 2022. 10. 11. [타입스크립트] class(클래스) vs interface(인터페이스) 객체를 생성하기 위한 템플릿 Class 상속을 통해서 중복된 코드 작성을 피하고 상속받은 기능을 확장하기 위해서 사용하는 클래스. 인스턴스를 생성하기 위한 생성자함수 Contructor 비슷한 여러개의 객체를 찍어내기 위해서 만든 붕어빵틀, 물건 설계도 인스턴스도 결국 객체를 생성하기때문에 클래스의 모든 기능은 객체를 위해 굴러간다고 생각하면 편하다. 객체를 생성하기 위한 인스턴스 Instance contructor에 의해서 만들어진 객체, 붕어빵, 물건 // 접근제한자 public을 사용한 클래스 Square class public Square{ x: number; y: number; // 반드시 클래스 안에 생성자(constructor)를 선언해야한다. constructor(_x:number, _y:.. 2022. 6. 17. 상속 : extends와 implements / 호출 : super() extends와 implements의 차이 extends 부모의 메서드를 그대로 사용할 수 있으며 오버라이딩(재정의)를 하지 않아도 됨. 변수까지 모조리 사용이 가능하나 다중상속은 안된다. 일반 클래스와 abstract을 상속할때 사용한다. class가 class를 상속받을때는 extends, class가 interface를 상속받을때는 implements interface가 interface를 상속받을때는 extends, interface는 class를 상속받을 수 없다. class extends classA (O) class implements interfaceA (O) interfaceE extends interfaceP (O) interfaceR extends classA (X) interface.. 2022. 6. 16. [220616] 월렛(블록체인 지갑)의 개념과 구조, 직접 월렛 만들기 필요한 정보 코어 / 서버 / p2p && 월렛 월렛은 필수가 아니라서 따로 존재가 가능. 보내는사람 : 보내는 사람이 정말로 보내는게 맞는지 인증단계(트랜젝션) 받는 사람 : 받는 사림이 정말로 맞는가? 금액 : 이 금액을 보내는 장소가 정말로 맞는가? 송금/수취인 계좌번호들만 관리하는게 지갑 지갑의 구조 은행에서 사용하는 걔좌 = 개인키(OTP) + 공개키(은행들끼리 쓰는 코드분류값, 실제 거래에 쓰이는 값)+ 계정(계좌번호) 반드시 블록체인을 거쳐서 만들어야하는게 아님 개인키 (은행에서 OPT같은 역할) 랜덤으로 64자리의 16진수 문자열을 만들어낸것. 그런데 이 방식은 다른 메인넷을 가지고있는 블록체인, 이더리음같은 블록체인들도 사용하고있는 방식임. 이렇게 만들면 겹칠 위험이 있음. 그래서 다른 .. 2022. 6. 16. [220609] prettier, eslint 설치 / 테스트코드(test.ts), 선언파일(d.ts) [ 사전 세팅 ] 문법을 맞춰주는 Prettier 확장프로그램 설치 prettier와 함께 사용할 라이브러리 설치 prettier 말고도 eslint 라이브러리도 설치하는 코드. $ npm install -D eslint prettier eslint-plugin-prettier eslint-config-prettier prettier의 기본값을 세팅하는 config 파일 만들기 // eslint라이브러리를 세팅하는 .eslintrc 파일 { "extends":["plugin:prettier/recommended"] } // prettier라이브러리를 세팅하는 .prettierrc 파일 { // 줄바꿈할 폭이 길이 "printWidth": 120, // 탭을 누를때 얼마나 공간을 둘건지 "tabWidth".. 2022. 6. 10. [220609] 타입스크립트 개발환경 만들기 라이브러리 설치 언제나 그랬듯 새로운 기능을 위해 라이브러리를 설치해주자. $ npm init -y $ npm install -D typescript ts-node @types/node 이제 해야할것 자바스크립트는 해석해주는 프로그램이 브라우저, nodejs가 있지만 타입스크립트를 해석해주는 프로그램이 없어서 런타임이 없다. 리액트는 웹팩을 통해 번들링을 해서 나온 자바스크립트 파일로 브라우저가 실행해주는것처럼, 타입스크립트도 번들링이라는 작업을 해서 자바스크립트로 바꿔줘야함. 타입스크립트 실행하기 ts-node는 타입스크립트를 알아듣는 실행기. 개발용이라서 배포는 안됨. -D는 디렉토리 내에서 선언. -g는 전역적으로 선언. npx는 패키지를 임시 설치해서 실행하는 npm 소속 도구. $ npx ts-.. 2022. 6. 9. [220518] 구매기능 만들기 SaleAnimalCard.tsx import { Box, Button, Text } from "@chakra-ui/react"; import React, { FC, useEffect, useState } from "react"; import { mintAnimalTokenContract, saleAnimalTokenContract, web3, } from "../web3Config"; import AnimalCard from "./AnimalCard"; interface SaleAnimalCardProps { animalType: string; animalPrice: string; animalTokenId: string; account: string; getOnSaleAnimalTokens: () =>.. 2022. 5. 18. [220518] 판매자 정보 가져오기 SaleAnimalCard.tsx import { Box, Button, Text } from "@chakra-ui/react"; import React, { FC, useEffect, useState } from "react"; import { mintAnimalTokenContract, web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; interface SaleAnimalCardProps { animalType: string; animalPrice: string; animalTokenId: string; // 계정을 확인하기 위해 필요한 정보 account: string; // 계정을 확인하기 위해 필요한 정보 } const Sa.. 2022. 5. 18. [220518] 구매 버튼 만들기 components/SaleAnimalCard.tsx 생성 현재 판매중인 이미지와 텍스트를 가져오는 코드 import { Box, Button, Text } from "@chakra-ui/react"; import React, { FC } from "react"; import { web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; interface SaleAnimalCardProps { animalType: string; animalPrice: string; } const SaleAnimalCard: FC = ({ animalType, animalPrice, }) => { return ( {web3.utils.fromWei(animal.. 2022. 5. 18. 이전 1 2 다음
