프론트엔드 스터디/Typescript

[Typescript]기초 - 비구조화(구조 분해) 할당

비구조화(구조분해)란? 어떤 시점에 구조화된 데이터에서 일부만 사용해야할 때가 있습니다. jack이라는 구조화된 데이터가 있다고 예를 들었을 때, 어느 시점에서 jack의 name과 age만 사용하려고 합니다. 그럴 때 name, age라는 변수를 선언해서 jack의 name, age를 저장해서 사용하는 것 처럼 구조화된 데이터를 분해하는 것을 비구조화라고 합니다. let name = jack.name, age = jack.age; 비구조화 할당이란? 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수 있습니다. const jack = { name: string, age: number, etc?: any}; const { name, age } =..

[Typesciprt] tsconfig.json 살펴보기

프로젝트에서 typescript를 사용하려면 몇 가지 설정이 필요합니다. 그리고 typescript 프로젝트에서 볼 수 있는 파일 중 하나가 tsconfig.json 파일입니다. typescript는 브라우저에서 사용하려면 javascript로 변환하는 과정을 거쳐야하는데 컴파일 옵션을 정의한 파일이 tsconfig.json 파일입니다. tsconfig.json 파일을 보면 처음보는 설정들이 엄청 들어가 있는데 이 설정들에 대해 간단하게 살펴보고 정리해보려고 합니다. 기본 구성 { "compilerOptions": {}, "include": ["src/**/*"] } 기본 구성은 저렇게 구성되어있습니다. "compilerOptions"는 컴파일 옵션을 나타내고 "include" 는 src 하위 디렉터리에..

[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이 아닌..