JavaScript/TypeScript
-
TS GenericsJavaScript/TypeScript 2021. 6. 23. 19:36
제네릭 (Generics) - 클래스 또는 함수 내부에서 사용할 타입을 외부에서 결정하는 기법 예제 - Generic와 Any 차이점 // function helloString(message: string): string { // return message; // } // function helloNumber(message: number): number { // return message; // } function hello(message: any): any { return message; } // 3 console.log(hello("Lee").length); // undefined console.log(hello(45).length); // function 함수명 (parameter: T): T fu..
-
TS 클래스JavaScript/TypeScript 2021. 6. 23. 05:26
클래스 - 객체 (object)를 만드는 설계도 - 클래스 이전에 object를 만드는 기본적인 방법은 Function - JS에도 class 사용 가능 (es6 부터) - OOP (Object-Oriented Programming)을 위한 초석 - TS에서는 클래스도 사용자가 만드는 타입의 하나 기본 형태의 클래스 // class 클래스명 {} class Person { name: string; // constructor (생성자 키워드) // object를 생성하면서 값을 전달 constructor(name: string) { // this를 이용해서 만들어진 object를 가리킨다 this.name = name; } } // new 키워드를 이용하여 class를 통해 object를 만들 수 있다 c..
-
TS 인터페이스JavaScript/TypeScript 2021. 6. 19. 02:52
인터페이스 (Interface) - 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용한다 - 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다 - 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점이 클래스와 유사하나 - 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다 (abstract 키워드는 사용하지 않는다) interface Person1 { name: string; age: number; } function hello1(person: Person1): void { console.log(`이름: ${person.name} 나이: ${person.age}`); } const p1: Person1 = { name: 'Yoo', age: 27, ..
-
TS 컴파일러JavaScript/TypeScript 2021. 6. 18. 02:02
Compilation Context - 컴파일할 파일, 컴포넌트 등의 모음 - 컨텍스트에는 컴파일러가 어떠한 에러도 없이 컴파일 하는데 필요한 모든 것을 포함 - TS를 컴파일할 때 컨텍스트를 files, include 또는 exclude 옵션을 사용한 tsconfig.json 파일로 제어 tsconfig schema 최상위 속성(Property) compileOnSave extends compileOptions files include exclude references compileOnSave - true / false (기본값 false) "compileOnSave": true 파일을 저장 (Save)하면 컴파일 하겠다 extends - 파일 (상대) 경로명: string "extends": "./파..
-
TS 타입 시스템JavaScript/TypeScript 2021. 6. 17. 00:25
타입 시스템 - 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 - 컴파일러가 자동으로 타입을 추론하는 시스템 TS의 타입 시스템 - 타입을 명시적으로 지정할 수 있다 - 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론 noImplicitAny 옵션 - 해당 옵션을 사용하면 타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 'any' 라고 판단하게 되면, 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다 strictNullChecks 옵션 - 해당 옵션을 사용하면 모든 타입에 자동으로 포함되어 있는 'null' 과 'undefined' 를 제거 nolmplicitReturns 옵션 - 해당 옵션을 사용하면 함수 내에서 모든 코드가 값을 리턴하지 않으..
-
TS 타입JavaScript/TypeScript 2021. 6. 12. 19:23
TS와 JS 타입 차이점 - TS는 Static Types, 개발 중간에 타입을 체크 - JS는 Dynamic Types, 런타임에 진입해야만 타입을 체크 (실제로 실행을 해봐야 오류를 잡을 수가 있다) // JavaScript function add(a, b) { if (typeof a !== 'number') || typeof b !== 'number') { throw new Error('Incorrect input!'); } return a + b; } const result = add(50, 25); // TypeScript function add(a: number, b: number) { return a + b; } const result = add(50,25); Primitive Type - ..
-
TS 설치JavaScript/TypeScript 2021. 6. 12. 17:37
TS 설치 VS Code에는 TypeScript Compiler가 내장되어 있다 내장된 컴파일러 버전은 VS Code가 업데이트 되면서 올라간다 내장된 컴파일러를 선택할 수 있고, 직접 설치한 컴파일러를 선택할 수도 있다 직접 설치한 컴파일러 사용 npm을 이용한 설치 (Node.js 패키지 매니저) npm init -y npm i typescript -D TypeScript 버전에서 작업 영역 버전 사용 선택 Type Annotation - TypeScript 코드에서는 어떤 변수 또는 값의 타입을 표기하기 위해 타입 표기를 사용 - 타입 표기는 식별자 또는 값 뒤에 : 을 붙여서 value: type 형태로 표기 let a: number; // a = "Yoo"; (오류) a = 39; functio..
-
TS 알아보기JavaScript/TypeScript 2021. 6. 10. 17:47
TypeScript JavaScript에 타입을 부여한 언어 JavaScript에서 확장된 언어 Complied Language (Complied 대신 Transpile 이라는 용어를 사용하기도 한다) Compiled - 컴파일이 필요 O - 컴파일러가 필요 O - 컴파일하는 시점 O (컴파일 타임) - 컴파일된 결과물을 실행 - 컴파일된 결과물을 실행하는 시점 Interpreted - 컴파일이 필요 X - 컴파일러가 필요 X - 컴파일하는 시점 X - 코드 자체를 실행 - 코드를 실행하는 시점 O (= 런타임) 참조 https://joshua1988.github.io/ts/why-ts.html Why TypeScript? | 타입스크립트 핸드북 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한..