Web/TypeScript8 [TypeScript] 타입스크립트 컴파일러 tsc watch mode 작성 중인 TS 파일에 변경사항이 생기면 이를 반영해서 JS 파일로 자동 변환한다. (watch mode) $ tsc 파일명.ts -w 다음과 같이 실행하면, 현재 프로젝트 안에 있는 모든 TS 파일을 watch mode로 관리한다. $ tsc -w tsc init tsconfig.json 파일 생성 $ tsc --init - 다양한 옵션들을 확인 할 수 있다. 프로젝트 구조 정리 하기 위의 사진과 같이 JS, TS 파일이 섞여있는 경우에 이를 정리해주는 작업이 필요하다. 이것을 tsconfig에서 조작할 수 있다! outDir 옵션 config안의 outDir 옵션을 찾아서 경로 뒤에 원하는 폴더명을 작성하고 컴파일하면 build 폴더 안에 js 파일들이 생성된 것을 확인할 .. 2023. 3. 7. [TypeScript] Utility Type 타입스크립트에서는 타입을 변환하는 것이 가능하다. - 한 타입의 일부분을 새로운 타입으로 이용 가능 - 한 타입을 기본으로 하여 다른 타입으로 이용 가능 Index Type : 특정 타입의 Index에 기반한 타입 객체의 value는 다음과 같이 접근 가능하다. const obj = { name: "yuna", }; obj.name; // yuna obj["name"]; // yuna Animal이라는 타입을 선언한 뒤, 타입의 인덱스에 기반한 타입을 새로운 타입으로 사용할 수 있다. type Animal = { name: string; age: number; gender: "male" | "female"; }; type Name = Animal["name"]; //string const text: Na.. 2023. 3. 5. [TypeScript] 제네릭 (Generics) 다음 코드의 문제점은 number 타입에 대한 유효성 검사만 가능하다는 것이다. function checkNotNullBad(arg: number | null): number { if (arg == null) { throw new Error("not Valid Number!"); } return arg; } any 타입을 사용하는 것도 좋지 않은 방법임 => 타입이 보장되지 않기 때문 function checkNotNull(arg:any | null): any { if (arg == null) { throw new Error('not valid number!') } return arg; } const result = checkNotNull(123); 이때, Generic을 사용할 수 있다. 아래의 함수에.. 2023. 3. 1. [TypeScript] Composition 상속의 문제점 ? => 여러개의 클래스를 상속받아 사용하는 경우, 그 규모가 커질 수록 클래스간의 관계가 복잡해질 수 있음 순양은 이제 장자상속 없다 Composition : 각각의 기능별로 클래스를 분리해 만들어 둠으로써 필요할때마다 가져다가 쓰는 것 아래의 예제에서는 우유를 추가하는 클래스, 설탕을 추가하는 클래스를 따로 분리해보자 { /** * Composition */ type CoffeeCup = { shots: number; hasMilk?: boolean; // Optional hasSugar?: boolean; // Optional }; interface CoffeeMaker { makeCoffee(shots: number): CoffeeCup; } class CoffeeMachine im.. 2023. 2. 25. [TypeScript] 객체지향 (OOP) 절차 지향 : 정의된 순서대로(절차적으로) 함수가 하나씩 호출됨 하나를 수정하기 위해서 전체적인 어플리케이션을 이해해야함 수정했을때 side Effect가 발생할 수 있음 한눈에 이해하기 어렵다 Coffee Maker 예제) { /** * 절차지향적 프로그래밍 */ type CoffeeCup = { shots: number; hasMilk: boolean; }; const BEANS_GRAMM_PER_SHOT: number = 7; let coffeebeans: number = 0; function makeCoffee(shots: number): CoffeeCup { // 커피 콩이 부족하다면 if (coffeebeans < shots * BEANS_GRAMM_PER_SHOT) { throw new Er.. 2023. 2. 24. [TypeScript] 기본 타입 #2 Type Alias (타입 별칭) : 타입의 새로운 이름을 만들어 직접 타입을 정의할 수 있음 /** * Type Aliases * 새로운 타입을 내가 정의할 수 있음 */ // 원시타입 type Text = string; const name: Text = "yuna"; const address: Text = "korea"; type Num = number; // Object 타입 type Student = { name: string; age: number; }; const yuna: Student = { name: "유나", age: 24, }; String Literal Types : 타입을 값 자체로 지정할 수 있음 해당 타입으로 선언된 변수는 지정된 문자열의 값만 할당 가능 /** * String.. 2023. 2. 22. [TypeScript] 기본 타입 #1 기본 타입 { /** * JavaScript * Primitive : number, string, boolean, biginy, symbol, null, undefined * Object: function, array... */ // number const num: number = -3.0; // string const str: string = "hello"; // boolean const bool: boolean = true; // undefined - 아직 알지 못하는 값 let name: undefined; // ❌ 이렇게 하면 undefined만 할당 가능 let age: number | undefined; // 숫자 또는 undefined age = undefined; age = 12; func.. 2023. 2. 21. [TypeScript] TypeScript 시작하기 TypeScript : JavaScript를 ㅣ기반으로 정적 타입 문법을 추가한 프로그래밍 언어 1. TypeScript는 Statically typed 코드를 프로그램 형태로 동작시키기 위해서는 컴파일 과정이 필요 컴파일 시간에 타입이 결정되는 것을 statically typed 이라고 함 변수를 선언할때 타입을 명시해야함 -> 실행속도가 빠르지만 변경할 수 없음 타입이 조금 더 엄격하게 관리 2. OOP (객체지향 프로그래밍) 모듈성 있는 코드 작성 객체 단위로 재사용 가능 객체 단위의 확장성 유지보수성 => 생산성, 품질, 빠르게 제품 완성 3. 자바스크립트의 슈퍼셋 유효한 자바스크립트로 작성한 코드는 타입스크립트 코드로 컴파일해 변환할 수 있음 장점 - 가독성이 좋다 선언과 할당을 동시에 - 실시.. 2023. 2. 21. 이전 1 다음
