JavaScript : dynamic typeruntime에서 결정TypeScript : static typedevelopment에서 결정complie할 때 error가 있으면 compile되지 않음runtime에 실행되지 않음 (TypeScript는 browser에서
webpack : 웹팩 코어webpack-cli : 터미널의 커맨드라인에서 웹팩 사용webpack-dev-server : 웹팩을 메모리 상으로만 빌드한 결과물을 개발 서버에 구동open: 서버가 시작될 때 default 브라우저 창을 자동으로 띄워줌historyApiF
this this behavior in class this는 함수가 어떻게 실행되는냐에 의해 결정됨 obj에서 getName 메소드를 호출했으므로, this는 MyClass가 아닌 obj를 참조함 this parameter 메소드의 매개변수로 클래스를 참조하는 this를 넣으면, 해당 클래스와 같은 형태의 객체(인스턴스)에서 메소드를 호출할 경우에...
Inherence Class Inherence 클래스는 하나의 클래스만 상속 받을 수 있음 extends 키워드를 사용하여 상위 클래스를 상속 받음 하위 클래스에 고유 생성자를 추가할 때, 먼저 super를 호출해서 실행해야함 super() : 상속받은 클래스의 생성자를 호출함 하위 클래스에서 상위 클래스의 메소드를 덮어 쓸 수 있음 하위 ...
Generic Generic function 이렇게 Type varibable을 사용하는 함수를 generic이라고 함 Type은 함수 사용자가 제공하는 타입을 받음 Type argument에 모든 타입이 들어갈 수 있음 Generic function call type argument를 명시하는 방법 type을 명시할 때 ``로 감싸서 표현함 ty...
JavaScript Library 사용 type이 선언되어 있지 않아서 TypeScript가 실행되지 않음 @types/... 패키지를 설치 (declaration 파일이 있음) types 패키지가 없는 경우, declare로 타입 지정 존재한다는 것을 아는 특성 혹은 변수를 선언함 class-transformer library 백엔드에서 받는 J...
Intersection & Type Narrowing Intersection Types & 연산자를 사용하여 타입들을 결합한 타입 주로 존재하는 객체 타입을 결합하는데 사용됨 ColorfulCircle 타입은 Colorful 타입의 color 속성과 Circle 타입의 radius 속성을 모두 가진 새로운 타입임 intersection type을 i...
Function Overload overload signature를 사용하여 함수를 다양한 방식으로 호출할 수 있음 함수를 호출할 때 하나의 overload만 고려함 같은 인자 수와 같은 반환 타입을 가진 overload의 경우, overload가 아니라 union 타입을 쓰는 것이 좋음 Do's and Don't ❌ Callback의 인자만 다른...
Function Function Type Expressions function type expression 함수를 묘사하는 가장 간단한 방법 arrow function과 문법적으로 유사함 (a: string) => void : 문자열 타입인 a 매개변수를 가지고 있고, 반환값이 없는 함수 타입 function type expression...
Decorators decorator로 지정할 함수 이름 앞에 @ 기호를 붙여줌 decorator는 class가 정의만 되도 실행됨 (class가 인스턴스화되기 전에 실행) decorator에는 인자를 가지고 있고, 이 인자는 decorator를 사용하는 위치에 따라 달라짐 인자를 사용하지 않을 경우, -를 써서 사용하지 않을 것을 명시해줌 De...
1. TypeScript 이해하기 1.1 JavaScript와 TypeScript의 관계 TypeScript는 JavaScript의 상위 집합임 JavaScript 프로그램에 문법 오류가 없다면, 유효한 TypeScript 프로그램임 JavaScript 프로그램에 이슈가 존재한다면, 문법 오류가 아니더라도 타입 체커에게 지적당할 수 있음 ...
2. TypeScript의 타입 시스템 2.6 편집기를 사용하여 타입 시스템 탐색하기 편집기를 통해서 언어 서비스를 사용할 수 있음 언어 서비스 : 코드 자동 완성, 명세(specification) 검사, 검색, 리팩토링 등 심벌 위에 마우스 커서를 대면, TypeScript가 그 타입을 어떻게 판단하고 있는지 확인 가능함 변수, 함수...
Exercise 1 Given the data, define the interface "User" and use it accordingly. Solution keyword : type users 데이터를 기반으로 User 타입을 정의했습니다. Exercise 2 Type "Person" is missing, please define it and u...
Vanilla JavaScript의 함정 값 비싼 자유 JavaScript는 코드를 구성하는 방법에 제한이 없습니다. 이러한 자유 덕분에 코드를 훼손할 수 있습니다. JavaScript는 충돌 가능성을 먼저 확인하지 않고 코드를 실행하는 동적(dynamic) 타입 언어입니다. 런타임에서 코드가 실행되기 전에 충돌되는지 알 수...
2.1 Type의 종류 타입 JavaScript에서 다루는 값의 형태에 대한 설명 형태 값에 존재하는 속성, 메서드, 내장되어 있는 typeof 연산자가 설명하는 것 원시 타입(Primitive type) TypeScript의 원시 타입은 JavaScript의 원시타입과 동일합니다. 원시 타입의 종류 null undef...
3. Union & Literal TypeScript에서 값을 바탕으로 타입을 추론하는 2 가지 핵심 개념 Union 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 narrowing 값에 허용된 타입을 특정한 타입으로 좁히는 것 3.1 Union Type union type 2 개 이상의 타입으로...
4. Object 객체 리터럴(Object literal) 각자 타입이 있는 키와 값의 집합 4.1 Object types { ... } 구문을 사용해서 객체 리터럴(object literal)을 생성하면, TypeScript는 해당 속성을 기반으로 새로운 객체 타입 또는 타입 형태를 고려합니다. 해당 객체 타입은 객체의 값과 동일한 속...
5. Functions 5.1 Function Paramters 매개변수의 명시적 타입 정보가 선언되지 않으면, TypeScript가 매개변수의 타입을 any로 간주합니다. TypeScript는 type annotation을 통해 함수 매개변수 타입을 선언할 수 있습니다. 5.1.1 Required Parameters TypeScript는 함수에 선...
6. Arrays JavaScript에서 배열은 내부에 모든 타입의 값을 혼합해서 저장할 수 있습니다. TypeScript는 초기 배열에 어떤 데이터 타입이 있는지 기억하고, 배열이 해당 데이터 타입에서만 작동하도록 제한합니다. 이런 방식으로 배열의 데이터 타입을 하나로 유지시킵니다. 6.1 Array Types TypeScript는 변수에 ...
7. Interface interface는 연관된 이름으로 객체 형태를 설명하는 또 다른 방법입니다. interface는 별칭으로 된 객체 타입과 유사하지만 일반적으로 더 읽기 쉬운 오류 메세지, 더 빠른 컴파일러 성능, 클래스와의 더 나은 상호 운용성을 위해 선호됩니다. 7.1 Type alias vs Interface 객체를 type alias으로...
8.1 Class Methods 클래스 메서드의 매개변수는 타입이나 기본값을 지정하지 않으면 any 타입을 기본으로 가집니다. 클래스 메서드를 호출하려면, 허용 가능한 수의 인수가 필요합니다. 클래스 메서드는 재귀 함수가 아니라면 대부분의 반환 타입을 유추할 수 있습니다. TypeScript는 클래스 메서드 호출 시 올바른 타입의 인수가 올바른 개수로 ...
Chapter 9. Type Modifiers 9.1 Top Types top 타입은 시스템에서 가능한 모든 값을 나타내는 타입을 말합니다. top 타입에 모든 타입을 할당할 수 있습니다. top 타입에는 any와 unknown이 있습니다. 9.1.1 any any 타입은 모든 타입을 할당할 수 있습니다. any는 일반적으로 console.l...
Chapter 10. Generics 때로는 코드에서 호출되는 방식에 따라 다양한 타입으로 작동하도록 의도할 수 있습니다. 매개변수로 모든 타입을 허용한다면, 매개변수 타입과 함수 반환 타입 간의 관계를 말할 수 있는 방법이 필요합니다. TypeScript는 제네릭(generic)을 사용해 타입 간의 관계를 알아냅니다. TypeScript...
11.1 Declaration Files TypeScript는 구현과 별도로 타입 형태를 선언할 수 있습니다. 타입 선언은 .d.ts 확장자로 끝나는 선언 파일에 작성됩니다. 선언 파일은 일반적으로 프로젝트 내에서 작성되고, 프로젝트의 컴파일된 npm 패키지로 빌드 및 배포되거나 독립 실행(standalone) typings 패키지로 공유됩니다. .d....
13.1 tsc Options TypeScript 파일을 컴파일하기 위해 tsc 명령을 실행합니다. 예 : index.ts 파일을 컴파일 하기 위해 tsc index.ts를 실행합니다. tsc 명령은 TypeScript의 대부분의 옵션을 -- 플래그로 사용할 수 있습니다. 예 : index.ts 파일에서 tsc를 실행할 때 index....
Chapter 14. Syntax Extensions TypeScript와 같은 상위 집합 언어에 특정 새로운 런타임 기능으로 JavaScript 구문을 확장하는 방식은 다음과 같은 이유로 나쁜 사례로 간주합니다. 런타임 구문 확장이 최신 버전 JavaScript의 새로운 구문과 충돌할 수 있다는 점이 가장 중요합니다. 언어를 처음 접하는...
15.1 Mapped Types TypeScript의 매핑된 타입(mapped type)은 다른 타입을 가져와서 해당 타입의 각 속성에 일부 작업을 수행하는 타입입니다. 매핑된 타입은 키 집합의 각 키에 대한 새로운 속성을 만들어 새로운 타입을 생성합니다. 매핑된 타입은 [K in OriginalType]과 같이 in을 사용해 다른 타입으로...