PracticeEveryday

의존성 - 의존성은 구성 요소들이 서로 의존하는 성질입니다. // 의존성은 구성 요소들이 서로 의존하는 성질입니다. // Programmer 클래스는 Laptop 클래스에 의존성을 띕니다. class Laptop { public turnOn() {} } class Macbook extends Laptop {} class Programmer { private laptop: Laptop; constructor() { this.laptop = new Laptop(); } public programming() { this.laptop.turnOn(); } } // programmer가 Mabook을 사용한다면 생성자 함수에 Macbook으로 변경해야 하는 이슈가 발생한다. class Programmer2 { p..

1. 클래스 정의 - ES6 클래스는 몸체에 메소드만을 포함할 수 있다. 클래스 몸체에 클래스 프로퍼티를 선언할 수 없고 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화한다. // person.js class Person { constructor(name) { // 클래스 프로퍼티의 선언과 초기화 this.name = name; } walk() { console.log(`${this.name} is walking.`); } } 이 코드의 확장자를 .ts로 바꾸어 컴파일하면 에러가 난다. person.ts(4,10): error TS2339: Property 'name' does not exist on type 'Person'. person.ts(8,25): error TS2339: Propert..

Duck Typing interface People { talk(): void; whoAmI: string; } class Human implements People { whoAmI = "human"; talk = () => { console.log(`say ${this.whoAmI} : 말할 수 있어요`); }; } class Robot { whoAmI = "robot"; talk = () => { console.log(`say ${this.whoAmI}: 말할 수 있어요`); }; } const humanInstance = new Human(); const robotInstance = new Robot(); const startTalk = (people: People): void => { people..

TypeScript Jest로 test 할 때 import 사용 하는 방법 1. jest 를 TypeScript 에서 사용하기 위해 필요 한 패케지들과 바벨 플러그인 설치 yarn add -D jest ts-jest @types/jest yarn add -D @babel/preset-typescript @babel/preset-env 2. 바벨 설정 // .babelrc { "presets": ["@babel/preset-typescript", "@babel/preset-env"], } 안 된 이유 - 테스트 코드는 Jest 모듈이 실행시키는 데 이 Jest 모듈은 별다른 설정을 해주지 않으면 테스트 대상 코드가 JavaScript 일 것이라고 생각 해 에러가 발생했던 것이다!! 해결 방법 - Jest는..

tsc-watch 사용이유 - ts 코드가 바뀔 때마다 js로 컴파일 한 뒤 node를 실행하는 과정을 반복했지만 ts-watch를 사용하면 그러지 않아도 된다. => TypeScript 버전 nodemon인 셈! 1. tsc-watch 설치 yarn add tsc-watch 2. root 폴터와 dist 폴더 생성 - dist 폴더는 컴파일 된 JavaScript 파일들이 모인다. - root 폴더는 컴파일 될 TypeScript가 모여있는 곳이다. 3. tsconfig.json 파일 수정! outDir : "dist" - 컴파일 된 JavaScript 파일이 모일 경로 include : ["root"/**/*"] - TypeScript 파일들이 모여있는 경로 4. pacage.json 파일 수정 "s..

tsconfig.json - 매번 컴파일을 입력할 때마다 옵션을 추가하거나 제거하는 것은 매우 귀찮고 불편합니다. 명령어를 매번 입력하지 않고 보다 쉽게 사용하기 위해서 tsconfig.json을 만들어 사용합니다. tsc 옵션 더보기 Documentation - tsc CLI Options A very high-level overview of the CLI compiler options for tsc www.typescriptlang.org - tsconfig.json 파일이 있는 위치가 TypeScript의 루트 디렉토리로 결정됩니다. 이 파일에는 프로젝트를 컴파일 하는 데 필요한 루트 파일, 컴파일러 옵션들을 설정할 수 있습니다. TypeScript 프로젝트는 다음 방법 중 하나로 컴파일 됩니다. ..

TypeScript 타입 1. String : 문자열 let str: string = "hi"; : (콜론) => Type Annotation 이라고 함. Annotation : 주석 2. Number : 숫자 let num: number = 10; 3. Boolean : 진위 값 (T / F) let isLoggedIn: boolean = True; 4. Object let person: object = { name: "kim", age : 28 } 5. Array : 배열 let arr: number[] = [1, 2, 3]; // 무조건 number만 안에 let arr_str: string[] = ['a', 'b', 'c']; // 무조건 string만 안에 6. Tuple : 튜플 (길이가 고정..

TypeScript (타입스크립트) 타입스크립트는 MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어이다. 타입스크립트란 자바스크립트에 타입을 부여한 언어입니다. // 자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트의 장점 1. 정적 타입 언어(static type language) static: 고정된 => 사전에 에러를 방지할 수 있다. function sum(a, b) { return a + b; } add(10, 20) add(10, "10") add("a", "b") // 이런 거 다 가능 function sum(a: number, b: number) { return a + b; } // But TS는 안됨!! 무조건 number만 들어와야 함.!! add(10, 20) // add(1..