TypeScript11 Type Script_11 Compiler (컴파일) TypeScript는 브라우저에서 바로 이해 하지 못하기 때문에 컴파일러를 통해 자바스크립트로 변환을 시켜줘야 한다. 우리는 node.js의 패키지 매니저인 npm을 통해 타입스크립트 컴파일러 설치하고 .js 파일로 변환시킬 것이다. (npm = Node Package Modules) : Node.js에서 사용가능한 모듈들을 패키지화시켜 모아놓은 것 * 모두 터미널을 열어서 작업! * VScode 사용 * tsc 명령을 사용하기 위해 타입스크립트를 글로벌 버전으로 설치 npm install -g typescript 1. 1개의 파일을 실시간으로 확인하면서 작업할 수 있도록 설정할 경우 tsc 파일명.ts -w tsc 타입스크립트 툴을 이용해서 watch mode로 동작하면 된다. 2. 여러개의 파일을 관.. 2021. 4. 20. Type Script_10 Utility Type & Type Manipulation (유틸리티 타입 과 유형 조작) Type과 Interface의 특성을 바꿔주는 여러가지 유틸리티 타입이 있는데, 그 중 자주 사용되는 몇가지를 간추려서 소개한다. 더 알고 싶으신 분은 TYPESCRIPT 👈클릭! (아래 사용된 예제는 모두 공홈에서 가져왔어요.) Utility Type 1. Partial 타입의 모든 속성을 선택적(optional)으로 바꿔준다. 요소들을 선택해서 사용할 수 있다. interface Todo { title: string; description: string; } function updateTodo(todo: Todo, todoUpdate: Partial) { return { ...todo, ...todoUpdate }; } const todo1 = { title: "eating", description:.. 2021. 4. 20. Type Script_09 Type alias와 Interface 차이👀 interface PositionInterface { x: number; y: number; } type PositionType { x: number; y: number; } 1. 개념 - Type alias : 데이터의 타입을 사용자정의 / const과 같은 원리로 재정의 불가능 / 데이터 담는 목적으로 사용 - Interface : 일종의 계약서 개념 / let과 같은 원리로 재정의 가능 / 구현할 목적으로 사용 2. 유사점 - Object(객체)로 정의 내릴 수 있다. const obj1: PositionInterface = { x: 1, y: 1, } const obj2: PositionType = { x: 2, y: 2, } - Class(클래스)에서 구현 가능 -> implements 를 사용.. 2021. 4. 16. Type Script_08 Generics (제네릭) 제네릭을 제네릭하게! 재사용성을 높여줘! Generic : 통상적인, 일반적인 이라는 뜻을 갖고 있다. -> 적용해본다면, "일반화" 1. 제네릭을 사용하기 이전에는... function checkPoint(arg: number | null): number { if (arg == null) { throw new Error("not valid number!"); } return arg; } // 만약 타입을 string, boolean 등 다양한 경우로 설정하고 싶을 경우에 // 일일히 다 만들면...??? 😱 더럽고 긴 코드 내역 생성...두둥..! 타입별로 다 만들면 정말,,,, 비실용적이고 보기만해도 끔찍한 결과를 낳겠죠? any를 쓴다면? any는 타입보장이 안되고, 타입에 대한 정보가 없어지므로 .. 2021. 4. 16. Type Script_07 OOP(객체지향프로그램) OOP란? - Object Oriented Programming 객체지향 프로그래밍의 약자 - 객체의 관점에서 프로그래밍 하는 것을 말한다. - Object(객체) = 대상(구성 요소) / Class = 객체가 갖는 속성 또는 메소드를 정의 - 예전부터 늘 흔하게 들었던 예시가 있다. (아직 이것 만한 예시가 없어서 일까?ㅎ) 붕어빵 틀은 붕어빵을 찍어내는 행동을 가진 Class / 찍어 나온 붕어빵은 Object --> Class + 커스타드크림 = 슈크림 붕어빵(Object) Class + 초코크림 = 초코 붕어빵(Object) - 객체지향을 사용하면 코드의 중복을 줄일 수 있어 가독성과 생산성이 높아진다. 그리고! 제일 좋은 장점은 유지보수 및 확장성이 높아지는 것!👍 OOP의 4가지 특성 1. 캡.. 2021. 4. 16. Type Script_06 타입 추론 & 단언 (Inference & Assertion) 1. Inference Type (타입 추론) 타입을 우리가 명확하게 계속 명시해야 되는 경우보다는 알아서 자동으로 타입이 결정되는 경우가 있다. 그럴 때 선언함과 동시에 타입이 너무 뻔한 경우 생략 가능! (TS는 너무 똑똑해✨) function add(x: number, y: number): number { return x + y; } // 인자를 숫자로 받아와서 더한 값을 리턴하는 함수이기 때문에 결과값의 타입도 number로 추론함 const result = add(1, 2); // add함수는 number 타입임을 알고 있기 때문에 result: number 로 인식함 간단한 예제일 경우 추론이 간단하지만, 타입을 정확하게 정하는 것이 좋다. -> TypeScript를 사용하는 이유!! 2. T.. 2021. 4. 16. Type Script_05 Intersection Type (인터섹션 타입) 1. Intersection Type ' & '의 의미를 갖고 있는 타입. 타입 두가지를 함께 쓰고 싶을 때 쓰고, " 타입1 & 타입2 " 이렇게 사용한다. 함수 호출시, 타입1과 타입2에 들어있는 모든 요소들을 사용해야 컴파일 오류 나지 않는다. type Juice = { name: string; gram: number; }; type Coffee = { source: string; make: () => void; }; function juicyStore(menu: Juice & Coffee) { console.log(menu.name); console.log(menu.gram); console.log(menu.source); console.log(menu.make()); } juicyStore({ .. 2021. 4. 16. Type Script_04 타입스크립트의 꽃🌹 Type Alias & Union Type 타입스크립트의 꽃! 1. Type Alias 타입을 내가 지정해서 정의하고 사용하는 것을 말한다. (변수 정하는 것과 같은 원리라고 생각하면 편하다!) type Text = string; type Num = number; const animal: Text = 'kitty'; const age: Num = 3; type Person = { name: string; age: number; }; // 타입에 설정해놓은 값 모두 입력해야 오류가 안남 const sister: Person = { name: 'Joy', age: 26, }; 추가로 문자열로도 타입으로 지정할 수 있다. // String Literal Types 문자열 type Message = 'Good luck!'; let toYou: Messa.. 2021. 4. 16. Type Script_03 Array & Tuple 배열타입 1. Array 배열은 2가지 형태로 정의할 수 있으나, ' type[ ] ' 형태로 코딩하는 것을 추천한다. const animals: string[] = ['멍멍이', '야옹이']; const scores: Array = [22, 55, 99]; function printArray(animals: readonly string[]) {} // Array의 형태를 지원안함 * readonly : 선언할 때만 값을 할당할 수 있고, 그 이후 재할당 불가능. 말 그대로 읽기전용 2. Tuple 2개 이상 타입을 같이 쓸 수 있으나, 가독성이 좋지 않아 쓰지 않는 것이 좋다... 대신 interface, type alias, class 로 대체 사용하는 것을 추천!! let student: [stri.. 2021. 4. 16. 이전 1 2 다음
