타입스크립트 프로젝트를 시작하면 tsconfig.json이라는 파일을 만들어줘야만 하고 이는 타입스크립트 컴파일러(tsc) 가 프로젝트의 설정을 어떻게 처리할지에 대해서 사용자가 알려줄 수 가 있게 된다.이 설정을 통해서 타입스크립트 컴파일러가 어떻게 TypeScript 파일을 처리하고 변환할지에 대해서 결정할 수 있다. tsconfig.json 파일은 크게 3가지 옵션으로 구분 하는데 compilerOptions, include, exclude로 나눌 수 있다.  1. compilerOptions (컴파일러 옵션) compilerOptions는 타입스크립트 컴파일러(tsc)가 코드를 어떻게 변환하고 처리할지를 설정하는 옵션으로 프로젝트의 주요한 컴파일 동작에 대해서 정의하게 된다. 이 컴파일러 옵션 내..

타입 스크립트에서 패키지의 타입 선언이란 타입스크립트가 외부 라이브러리나 패키지가 제공하는 기능을 이해할 수 있도록 도와주는 것을 의미하는 것으로 쉽게 말하자면 이 라이브러리에 어떤 함수가 있고, 이 함수는 어떤 값을 받고, 어떤 값을 반환하는지 알려주는 설명서라고 생각하면 된다.이 타입 선언 파일은 주로 .d.ts라는 확장자를 가진 파일로 제공된다. 왜 패키지 타입선언이 필요할까 1. 안전한 코드 작성 외부 라이브러리를 사용할 때 잘못된 값을 넣거나 잘못된 방식으로 사용하면 컴파일러가 알려준다.import _ from "lodash";const numbers = [1, 2, 3];_.reverse(numbers); // 이건 정상 작동_.sum(numbers, 5); // 에러: sum은 하나의 배열..

제네릭이란? 타입스크립트에서 타입을 변수처럼 다룰 수 있는 기능으로 특정 타입에 의존하지 않는 함수, 클래스, 인터페이스를 작성할 수 있게 만든다.제네릭 - 함수제네릭 함수의 문법제네릭 함수는 함수의 이름 뒤에 를 사용해서 만들어주고 내부에 T는 고정된 타입이 아니라 호출 시점에 구체적인 타입으로 대체된다.function 함수명(매개변수: T): T { // 함수 로직 return 매개변수;} 예시를 보자면 이렇게 선언하면 이렇게 함수를 사용할때 함수명과 전달인자 사이에 을 넣어주면된다. 그러면 저렇게 호출하는 시점에 T를 입력한 타입으로 대체해서 사용된다. 그런데 타입스크립트는 대부분의 제네릭 타입을 자동으로 추론하기 때문에 궂이 명시적으로 타입을 제공하지 않더라도 에러를 발생 시키지 않는..

▶클래스(Class)클래스는 객체를 생성하기 위한 청사진이다.속성과 메서드를 정의해서 사용할 수 있고 이 클래스를 사용해서 객체를 만들 수 있다. 클래스의 구성요소로는 필드, 생성자, 메서드가 있다. ▷필드클래스가 가지는 데이터(속성)를 지칭하고 타입을 명시적으로 지정할 수 있다.class ClassName { field1 : string; field2 : number; . . . . }이렇게 클래스의 안에 인터페이스에서 속성 선언하듯 선언해주면 이걸 클래스에서는 필드라고 부른다. ▷생성자(Constructor)클래스가 인스턴스를 생성할 때 호출되는 메서드로 필드의 초기화 작업을 수행하는 기능을 한다.class ClassName { field1 : string; fiel..

타입스크립트에서 함수 오버로딩은 동일한 함수 이름으로 여러 가지 다른 형태의 함수 시그니처를 정의할 수 있게 해주는 기능으로 하나의 함수 이름으로 다양한 인자와 반환 값을 처리할 수 있다. 함수 오버로딩에 대해서 알아보기 전에 먼저 함수 시그니쳐에 대해서 알아봐야 하는데 함수 시그니쳐란 함수의 형태를 정의하는 것으로 함수의 이름, 매개변수의 타입, 반환값의 타입에 대해서 미리 정의해서 함수가 어떤 입력을 받고, 어떤 출력값을 반환하는지를 명시해주는 방식을 말한다. 이는 코드에서 발생할 수 있는 타입 오류를 사전에 방지할 수 있는데 함수 시그니쳐를 사용하는 방법은 function 함수명(매개변수1: 타입1, 매개변수2: 타입2): 반환타입;과 같이 선언해주면 된다. 이렇게 함수 시그니처를 선언한다면 이걸 ..

타입스크립트에서는 함수 내부에서 사용되는 this 키워드의 타입을 명시적으로 정의할 수 있다.원래 자바스크립트에서는 함수의 this를 호출 방식에 따라서 동적으로 결정하는데 타입스크립트에서는 이걸 명시적으로 지정해서 호출 할때 this의 타입을 고정 시킬 수 있다. 기본적으로 선언하는 방식은 function 함수명(this: 타입(보통 객체의 타입), ...): ReturnType { // 함수 내용}과 같이 사용한다. 인터페이스에서 this에 대해서 한번 보자면 이렇게 인터페이스를 생성한 다음에 함수에서 이렇게 this를 사용하고 싶다고 생각해보자. 이럴때 사용하는 메서드가 call이란 메서드인데 call메서드는 자바스크립트의 모든 함수에서 사용할 수 있는 메서드로 함수를 호출 할때 첫번째 인자로 객..