프론트엔드 스터디

[TypeScript] 타입 가드(Type Guard)

타입가드(Type Guard) 타입스크립트는 원시 타입과 클래스뿐만 아니라 섞어서 유니온 타입을 만들 수 있습니다. function doSomething(arg: string | number) 인자는 string일 수도 있고 number일 수도 있습니다. 이러한 유니온 타입의 인자를 처리할 때 정확히 어떤 타입인지 검사해야 하는 경우가 있는데 이를 타입 가드라고 합니다. 타입 가드는 특정 범위 안에서 런탕미 타입 검사를 수행하는 표현식입니다. 원시 타입에 식별하기 원시 타입은 typeof 연산자를 이용해 타입을 검사할 수 있습니다. 피연산자의 타입을 문자열로 반환하기 때문에 이걸 가지고 검사하는 방식입니다. const doSomething(id: string | number){ if(typeof id =..

[TypeScript] 기초 - 타입 앨리어스(Type Alias)

타입 앨리어스(Type Alias) 타입 앨리어스는 새로운 타입을 정의합니다. 타입으로 사용할 수 있다는 점에서 인터페이스와 유사합니다. interface Person { name: string, age?: number } // 빈 객체를 Person 타입으로 지정 const person = {} as Person; person.name = 'Lee'; person.age = 20; person.address = 'Seoul'; // Error // 타입 앨리어스 type Person = { name: string, age?: number } // 빈 객체를 Person 타입으로 지정 const person = {} as Person; person.name = 'Lee'; person.age = 20; ..

[TypeScript] 기초 - 타입 추론(Type Inference)

타입 추론(Type Inference) 타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미합니다. 아래의 코드로 예시를 들어보겠습니다. let x = 3; 위와 같이 x에 대한 타입을 지정하지 않더라도 x는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어납니다. 가장 적절한 타입(Best Common Type) 타입은 보통 몇 개의 코드를 바탕으로 추론됩니다. 그 표현식을 이용하여 가장 근접한 타입을 추론하게 되는데 이를 Best Common Type이라고 합니다. let arr = [0,1,null]; 위 변수 arr의 타입을 추론하기 위해서는 배열의 각 아이템을 ..

[TypeScript] 기초 - 제네릭(Generic)

제네릭 (Generic) 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 타입스크립트는 정적 타입 언어이기 때문에 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하여야 합니다. 그런데 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하기 어려운 경우가 있습니다. class Queue { protected data: any[] = []; push(item: any) { this.data.push(item); } pop() { return this.data.shift(); } } const queue = new Queue(); que..

[TypeScript] 기초 - 교차 타입(Intersection Type)

교차 타입 (Intersection Type) 교차 타입은 유니언 타입과 밀접한 관련이 있지만, 사용방법은 다릅니다. 교차 타입은 여러 타입을 하나로 결합합니다. 기존 타입을 합쳐 필요한 기능을 모두 가진 단일 타입을 얻을 수 있습니다. 예를 들어, Person & Serializable & Loggable은 Person 과 Serializable그리고 Loggable입니다. 즉, 이 타입의 객체는 세 가지 타입의 모든 멤버를 갖게 됩니다. interface ErrorHandling { success: boolean; error?: { message: string }; } interface ArtworksData { artworks: { title: string }[]; } interface Artist..

[TypeScript] 기초 - 유니온 타입(Union Type)

가끔, number 나 string 을 매개변수로 기대하는 라이브러리를 사용할 때가 있습니다. function padLeft(value: string, padding: any) { if (typeof padding === "number") { return Array(padding + 1).join(" ") + value; } if (typeof padding === "string") { return padding + value; } throw new Error(`Expected string or number, got '${padding}'.`); } padLeft("Hello world", 4); // "Hello world"를 반환합니다. 위 예제에서 padding 이 number나 string이 아닌..

[TypeScript] 기초 - 리터럴 타입

리터럴 리터럴 타입은 변수 혹은 매개변수 등이 어떤 포괄적인 타입을 가지는 것이 아니라 변수나 매개변수에 정확한 값을 설정하는 것을 의미합니다. let foo: 'Hello World!'; 위의 예시처럼 특정한 값을 변수의 타입으로 지정하는 것을 리터럴 타입이라고 합니다. string 외에도 number, boolean 타입의 값도 설정이 가능합니다. const helloWorld = "Hello World"; let hiWorld = "Hi World"; 위의 예제에서는 helloWorld 변수는 const 이기 때문에 변할 수 없으므로 "Hello World"으로 타입이 지정됩니다. hiWorld 변수는 let이기 때문에 변할 수 있어서 컴파일러는 문자열이라고 선언할 것입니다. 보통 리..

[TypeScript] 기초 - 인터페이스(Interface)

인터페이스 소개 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있습니다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사합니다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것입니다. ES6는 인터페이스를 지원하지 않지만 Typescript에서는 지원합니다. 인터페이스는 프로퍼티와 메서드를 가질 수 있다는 점에서 클래스와 비슷하나 직접 인스턴스를 생성할 수 없고 모든 메서드는 추상 메서드입니다. 변수와 인터페이스 인터페이스는 변수의 타입으로 사용할 수 있습니다. 이때 인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수하여야 하는데 이 부분이 새로운 타입을 정의하는 것과 유사합..