FrontEnd/TypeScript9 Generics Generics이란? any는 어떤 타입이 들어오는지 상관없이 때문에 타입마다 잘못된 내부 함수를 사용하거나 타입 추론할 때 유용하지 못하다. 하지만 Generic의 경우에는 컴파일 타임에 타입을 추론하여 return과 parameter의 타입을 추론할 수 있도록 도와준다. function hello(message: any): any { return message; } console.log(hello("Mark").length); console.log(hello(39).length); // undefined가 된다. function helloGeneric(message: T): T { return message; } console.log(helloGeneric('Mark').length); console.. 2022. 10. 10. Class static / 싱글톤 / 상속 / Abstract static 사용하기 static키워드는 메모리에 멤버를 항상 상주하게 해주는 키워드이다. 그래서 클래스로 초기화하지 않아도 바로 사용할 수 있으며 모든 객체들이 같은 멤버(함수) 를 참조하게 된다. class Person { private static CITY = "Seoul"; public static hello() { console.log("안녕하세요", Person.CITY); } } const p1 = new Person(); Person.hello(); Singleton Pattern구현하기 싱글톤패턴은 같은 객체를 사용하기 위해 필요한 객체이다. 자세한 부분 - class ClassName { private static _INSTANCE: ClassName | null = null; priv.. 2022. 10. 9. Class 정의 / 초기화 / Getter And Setter Class란 object를 만드는 blueprint이다. class내부에는 함수, 멤버 등 여러가지를 정의할 수 있다. 클래스를 정의하는 방법 class키워드를 이용하여 클래스를 만들 수 있다. class 이름은 보통 대문자를 이용한다. new를 이용하여 class를 통해 object를 만들 수 있다. contsructor를 이용하여 object를 생성하면서 값을 전달 할 수 있다. this를 이용해서 만들어진 object를 가르킬 수 있다. JS로 컴파일되면 es5의 경우 function으로 변경된다. class Person { name: string; constructor(name: string) { this.name = name; } } 클래스 초기화 멤버는 무조건적으로 변수가 들어가야만 한다. 직.. 2022. 10. 8. Interface Interface란? 데이터의 골격을 정해준다. interface Person1 { name : string; age: number; }; function hello1(person: Person1): void { console.log(`안녕하세요. ${person.name} 입니다.`); }; const p1: Person1 = { name: 'Mark', age: 39, }; hello1(p1); 하지만 js로 컴파일 했을 때 나타나지는 않는다. typescript를 사용할 때에만 사용하는 문법이다. "use strict"; function hello1(person) { console.log(`안녕하세요. ${person.name} 입니다.`); }; const p1 = { name: 'Mark', a.. 2022. 10. 7. TypeScript 컴파일러 The compilation context tsconfig.json파일내에 어떤 파일을 컴파일 할것인지 어떤 옵션을 적용할것인지를 정할 수 있다. 또, TypeScript를 파싱하거나 유효성 검증하는 맥락들을 설정할 수 있다. tsconfig schema 최상위 프로퍼티 compileOnSave extends compileOptions files include exclude references typeAcquisition tsNode compileOnSave 프로퍼티 save를 하게 되면 컴파일을 하게 해준다. visual studio 2015 with Typescript 1.8.4이상 atom-typescript 플러그인 "compileOnSave": true extends 외부 config파일을 im.. 2022. 9. 28. TypeScript 타입호환성 서브타입 sub1는 1이라는 타입을 가지고 sup1는 number라는 타입을 가진다. sub1은 sup1의 서브타입이라서 sup1을 sub1에 대입할 수 있지만, 반대는 되지 않는다. number[]보다는 object가 더 상위 타입이므로 sub2 = sup2는 에러가 발생한다. 튜플보다는 Array가 상위타입이다. number보다는 any가 상위 타입이다. never보다는 number가 상위 타입이다. 상위 클래스가 상위 타입이다. 공변 같거나 서브타입인 경우 할당이 가능하다. 반병 함수의 매개변수 타입만 같거나 슈퍼타입인 경우, 할당이 가능하다. strictFunctionTypes 옵션 함수를 할당할 시에 함수의 매개변수 타입이 같거나 슈퍼타입인 경우가 아닌 경우, 에러를 통해 경고한다. 타입 별칭 .. 2022. 9. 27. TypeScript의 옵션 타입이 없는 자바스크립트의 경우 함수의 사용법을 오해하여 잘못 사용 할 수 있다. 특히, 타입을 잘못 넣을 수 있기도 한데 타입스크립트 같은 경우에는 명시하여 컴파일 에러를 만들어 찾을 수 있게 할 수 있다. noImplicitAny 옵션 타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 `any`라고 판단하게 되면 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다. noImplicitAny옵션을 켜면 a라는 변수에 타입을 지정하지 않으면 에러를 발생시킨다. number는 undefined를 포함하고 있어서 코드는 f4(-5)에서 undefined를 리턴하게 되면서 잘못된 정보를 출력하게 된다. strictNullChecks 옵션 모든 타입에 자동으로 포함되어 있는 `null` 과 `un.. 2022. 9. 26. TypeScript 타입 TypeScript의 타입 프로그램이 유용하려면, 가장 간단한 데이터 단위로 작업 할 수 있어야한다. TypeScript는 JavaScript에서 기대하는 것과 동일타입을 지원하며 추가적인 열거타입이 제공된다. JavaScript 타입 Boolean Number String Null Undefined Symbol Array 타입스크립트에서 추가적으로 제공하는 타입 추가타입 Any Void Never Unknown Tuple: Object형 boolean타입 let isOk: Boolean = true; Number타입 let decimal: number = 6; // 10진수 let hex: number = 0xf00d; // 16진수 let binary: number = 0b1010; // 2진수 le.. 2022. 9. 20. TypeScript란? TypeScript란? 자바스크립트에서 타입을 추가해서 확장시킨 언어이다. 자바스크립트를 이해하면서 에러를 잡는 것을 도와주어 시간을 절약하고 코드들을 실행하기 전에 수정을 할 수 있도록 도와준다. 어떤 환경에서도 잘 작동하도록 되어있다. TypeScript의 특징 타입스크립트는 ' Programming Language 언어 '이다. 타입스크립트는 ' Compiled Language '이다. 전통적인 Compiled Language와는 다른 점이 많아 Transpile이라는 용어를 사용하기도 합니다. 자바스크립트는 Interpreted Language이다. Compiled Interpreted 컴파일 필요 불필요 시점 컴파일시점 코드가 실해되는 시점 TypeSciprt설치 방법 명령어 설 명 npm i .. 2022. 9. 20. 이전 1 다음
