타입스크립트 11

타입스크립트 :: Docs 해부

TypeScript Documentation Everyday Types 보고 배운 내용 타입 달기 변수 (Variable) 왼쪽이 아니라 항상 오른쪽에 타입을 달아줍니다. let myName: string = "HeJ"; 사실 이렇게 명백한 곳에는 타입 달아줄 필요가 없습나다. TypeScript가 알아서 추론(infer)한다고 합니다. 배열 (Array) 배열을 나타낼 때 다음 둘은 같습니다. number[] Array // T 이런 형태는 '제너릭'이라고 하는데 뒤에 조금 더 자세히 알아봅니다. 함수 (Function) 인풋과 아웃풋 양쪽에 타입을 달 수 있습니다. 인풋에 타입 달기 function greet(name: string) { console.log("Hello, " + name.toUppe..

25 (2/2) :: TypeScript 데코레이터

엘리스 SW 엔지니어 트랙 25일차 송현지 강사님 온라인 강의날 데코레이터 함수를 감싸는 함수 런타임에 호출 아직 표준이 안된 함수라 Decorator 사용하려면 자바스크립트 Babel, 타입스크립트 "experimentalDecorators": true 해줘야된다 데코레이터가 있는 선언에 대해 특정 타입의 메타데이터 내보내려면 reflect-metadata 설치 npm i reflect-metadata --save yarn add reflect-metadata 데코레이터전에 알아야할 JavaScript 일급객체: 값으로 사용가능 클로저: 내부 변수 끝나도 사용가능, 내부 변수를 누군가 가리키고 있으면 가비지 콜렉터가 없애지 않는다 고차 함수(함수 반환하는 함수) Property Descriptor De..

Web Dev/ELICE 2021.11.27

25 (1/2) :: Type Guard, Optional Chaining, 함수 오버로딩, 인덱스 시그니처

엘리스 SW 엔지니어 트랙 25일차 송현지 강사님 온라인 강의날 다양한 예시 보여주셔서 감사합니다 타입 심화 Union Type Or A타입 이거나 B 타입 A | B 유니온 타입 예시 // Union Type let one : string | number one = '1' one = 1 인터페이스는 유니온 타입 확장 불가 type과 &를 사용해줘야한다 type으로 유니온 타입 확장 예시 type A = string | number // 이건 에러 나온다 interface StrOrNum extends A { a: string } // 이렇게 바꿔줘야된다 type StrOrNum = { a: string } & (string | number) Union Type은 겹치는 것만 사용가능 type Human..

Web Dev/ELICE 2021.11.27

TypeScript :: VSCode에서 타입스크립트 설치 & 실행

시작은 우리의 설치를 도와줄 Node.js 1. Node.js Node.js 공식 사이트 링크 => https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VSCode 들어가서 터미널 열고 typescript 설치 npm install -g typescript 3. typescript 잘 깔린지 확인 tsc --version 4. ts 파일 js로 컴파일 tsc index.ts OOOOOOOOOR ts 파일 자체를 console에서 확인하고 싶다면 5. 추가로 ts-node 모듈 설치 npm install -g ts-node 6. ts 파일 확인 ts..

24 :: TypeScript Generic, Constraints, keyof

엘리스 SW 엔지니어 트랙 24일차 온라인 강의날 어제 실시간 강의에서 배운 Interface와 Generic 복습 일찍 끝나면 실제로 타입스크립트 이용해서 만들어봐야지 or 만드는 방법 해봐야지! Generic Constraints(제약조건) => extends 이용한다 extends로 string or number로 제한하는 예시 // Constraints => extends 이용 const printMessage = (message: T): T => { return message } printMessage("1") // Good printMessage(1) // Good printMessage(false) // Error keyof 두 개의 타입 T와 U가 있다 첫 번째 타입 T에 오브젝트를 입력받..

Web Dev/ELICE 2021.11.26

23 (3/3) :: TypeScript 복습, 실습

엘리스 SW 엔지니어 트랙 23일차 김병철 강사님 실시간 강의 23 (2/3) :: Generic 링크 => https://forgottenknowledge.tistory.com/entry/23-23-Generic 23 (2/3) :: Generic 엘리스 SW 엔지니어 트랙 21일차 박성국 강사님 실시간 강의 23 (1/2) :: TypeScript Interface, 사용 이유 & 예시, 상속 링크 => https://forgottenknowledge.tistory.com/entry/23-12-TypeScript-In.. forgottenknowledge.tistory.com 앞의 이론 시간에 배운 내용 복습 조금 interface 클래스와 달리 구성되는 것의 타입만 명시 생성자 메서드 구현 X =>..

Web Dev/ELICE 2021.11.25

23 (2/3) :: Generic

엘리스 SW 엔지니어 트랙 23일차 박성국 강사님 실시간 강의 23 (1/2) :: TypeScript Interface, 사용 이유 & 예시, 상속 링크 => https://forgottenknowledge.tistory.com/entry/23-12-TypeScript-Interface-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0-%EC%98%88%EC%8B%9C-%EC%83%81%EC%86%8D 23 (1/2) :: TypeScript Interface, 사용 이유 & 예시, 상속 엘리스 SW 엔지니어 트랙 21일차 박성국 강사님 실시간 강의 Interface와 제네릭 타입스크립트에서 조금 더 중요한 개념이라고 하신다 Interface 타입 체크에 사용 변수, 함수, 클래스에 ..

Web Dev/ELICE 2021.11.25

23 (1/3) :: TypeScript Interface, 사용 이유 & 예시, 상속

엘리스 SW 엔지니어 트랙 23일차 박성국 강사님 실시간 강의 Interface와 제네릭 타입스크립트에서 조금 더 중요한 개념이라고 하신다 Interface 타입 체크에 사용 변수, 함수, 클래스에 사용 가능 클래스와 비스므리 하지만 직접 인스턴스 생성 불가 모든 메소드는 추상 메소드 abstract 키워드 사용 안한다 Interface 사용 이유 협업 개발시 공통적으로 사용되는 부분에 대해 미리 정의 추후 코드를 합칠 때 효율적이다 추상클래스 vs Interface 추상 클래스는 전체적인 구조 Interface는 프로그래머간 협업 Interface 예시 interface에서 정한 property는 모두 required 아니면 [grade: number] 이런식으로 활용 가능 value 자리에는 들어올 ..

Web Dev/ELICE 2021.11.25

22 :: 타입스크립트 복습

엘리스 SW 엔지니어 트랙 22일차 온라인 강의날 어제 실시간 강의에서 배운 타입스크립트 복습을 실습과 함께 하는 날 타입스크립트 Microsoft가 개발했구나~ 추가 제공 자료형 tuple 길이와 요소 타입이 정해진 배열을 저장하는 타입 enum 특정 값들의 집합으로 저장 인덱스 번호로 접근 가능 인덱스 변경가능 any 자바스크립트 변수 같은 제한 없는 타입 어제 살펴본 Utility Types에 대해 알아봤다 밑의 유틸리티 타입을 알아두면 좋은 것 같다 Partial Readonly Record Pick Omit Exclude Extract NonNullable Parameters ConstructorParameters ReturnType Required 클래스 클래스도 복습 + 새로운 내용 등장 접..

Web Dev/ELICE 2021.11.24

21 (2/2) :: TypeScript 함수 사용, class

21 (1/2) :: 타입스크립트, Type, Utility Types 링크 => https://forgottenknowledge.tistory.com/entry/21-12-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Type-Utility-Types TypeScript 이용 함수 사용하기전 함수에 대해 알아보기 일급객체의 특징 1. 함수 자체를 값으로 저장 2. 함수를 파라미터로 넣어 줄 수 있다 3. 함수를 리턴할 수 있다 // 함수 자체를 값으로 저장 let sum = function(a, b) { return a + b } function ul(child) { return`${child}` } function makeLi(container, c..

Web Dev/ELICE 2021.11.23
728x90