섹션 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..

섹션 7: 제네릭 📌 제약 조건 작업하기 제약 조건은 제네릭 타입을 더 효율적으로 최적화된 방식으로 활용할 수 있도록 해 주어서 불필요한 오류나 예기치 않은 작동을 피할 수 있다. 아래 예제에서는 extends object로 제약 조건을 추가한 것이다. Object.assign()의 인수로는 object 타입의 값만 의미가 있다. 만약 제약 조건을 추가하지 않은 상태에서 merge()의 두 번째 인수에 30(number 타입)을 인수로 넣는다면 30은 무시된다. 이런 경우에 타입 스크립트에 의해 걸러지지 않는데, 제약 조건을 추가하면 잘못된 타입의 값임을 알려준다. // 제약 조건 ❌ function merge(objA: T, objB: U) { return Object.assign(objA, objB)..

섹션 6: 고급타입 📌 인터섹션 타입 1. type과 & type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; type ElevatedEmployee = Admin & Employee; // 두 타입의 속성 모두 사용 가능 const e1: ElevatedEmployee = { name: "김일남", privileges: ["create-server"], startDate: new Date(), }; 2. interface와 extends interface AdminInter { name: string; privileges: string[]; } interface Emp..

섹션 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"; // 변..

섹션 5: 클래스 & 인터페이스 📌 OOP(Object-oriented Programming) 코드에서 실제 사물과 최대한 유사한 객체를 사용해 코드를 이해하기 쉽도록 만드는 것! 📌 class == blueprint 청사진: 아키텍처 또는 공학 설계를 문서화한 기술 도면을 인화로 복사하거나 복사한 도면 🤔 class와 instance의 관계에 대한 내 생각 붕어빵틀과 붕어빵, 필름과 사진, 도장과 도장 찍기 📌 this class Department { name: string; // 필드라고 함. 객체가 아님. // 생성자: 생성하는 객체(인스턴스)의 초기화 작업 constructor(n: string) { this.name = n; } describe() { console.log("Department..

섹션 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파일을 이용해 디버깅(브레이크 ..