섹션 8: 데코레이터(장식자) 📌 데코레이터 사용 준비 // tsconfig.json { // (생략) "experimentalDecorators": true, // (생략) } 📌 데코레이터 // 여느 함수 처럼 대문자로 시작하지 않아도 되지만 대부분의 라이브러리 데코레이터의 경우 대문자로 시작 function Logger(constructor: Function) { console.log("Logging..."); } @Logger class Person { name = "김일남"; constructor() { console.log("Creating person object..."); } } const pers = new Person(); console.log(pers); /* 출력 결과 Logging..

섹션 14: React.js 및 TypeScript 📌 React.js + TypeScript 프로젝트 생성 .은 현재 경로에 프로젝트를 생성하는 것을 말한다. npx create-react-app . --template typescript 😉 공식 문서 : https://create-react-app.dev/docs/adding-typescript/ 📌 React.FC // src/app.tsx import React from "react"; // React.FC는 리액트 함수 컴포넌트 사용함을 의미 const App: React.FC = () => { return ; } export default App; 📌 React.FC와 React.FC에 화살 괄호 를 사용해 props의 타입을 지정할 수 있다..

섹션 2: 기본 & 기본 타입 📌 튜플(tuple) 독특한 배열 각 요소 별로 타입을 지정할 수 있으며, 고정된 길이 가짐 push() 메서드로 요소 추가할 경우 길이 늘어남 const person: { name: string; age: number; hobbies: string[]; // 배열 role: [number, string]; // 튜플 } = { name: "김일남", age: 99, hobbies: ["Squid Game", "Make Money"], role: [1, "businessman"], }; // person.role[1] = 2; // 1번 인덱스는 string 타입 이므로 number 타입의 값으로 변경할 수 없다. person.role[1] = "chairman"; // 변..

섹션 3: TypeScript 컴파일러(및 구성) 📌 하나의 타입스크립트 파일의 변경 감시 모드 tsc app.ts -w(또는 tsc app.ts -watch) 📌 여러 타입스크립트 파일의 컴파일 tsconfig.json 파일 생성 명령어 : tsc --init js 파일 일괄 컴파일 명령어 : tsc 📌 tsconfig.json 옵션 { "compilerOptions": { // "target" 옵션은 컴파일된 코드를 지원하는 브라우저를 정의. "" 안에서 ctrl+space를 누르면 자동완성을 선택할 수 있음. 참고로 es6는 es2015 // "sourceMap" 옵션은 개발자 도구 Sources에서 js파일 뿐만 아니라 ts 파일도 다룰 수 있게 해준다. 따라서 ts파일을 이용해 디버깅(브레이크 ..