제네릭 (Generics)- C#, Java 등 언어에서 재사용성이 높은 컴포넌트를 만들때 활용되는 특징- 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 생성하는데 사용- 타입을 마치 함수의 파라미터처럼 사용 🔵 함수에 제네릭 선언제네릭이 아닌 유니온 타입으로 했을 때 문제점function logMessage(text: string | number) { console.log(text); return text;}const res = logMessage('hi');// string 메서드 사용res.split(''); // ==> 에러! (string인지 number인지 몰라)- 유니온 타입을 활용하면 최종값의 타입이 정확하지 않음- return한 값이 여전히 string | number..
타입스크립트🔵 연산자를 이용한 타입 정의Union Type ('|')- 한가지 이상 타입을 쓰고 싶을 때 사용 (파이프 '|' 연산자 활용)- 내부적으로 타입들을 구분할 수 있음 (타입가드에 활용)* 타입가드 : 특정 타입으로 타입의 범위를 좁혀나가는(필터링) 과정- 타입스크립트 관점에선 어떤 값이 들어올 지 모르기 때문에 공통의 보장된 속성만 사용 가능 (1) 타입가드의 역할function logAge(value: string | number) { console.log(value); // 타입가드 (number) if (typeof value === 'number') { // 이 스코프에서는 자연스럽게 number로 인식된다 console.log(typeof value); // n..
인덱싱 패턴과 딕셔너리 패턴안녕하세요. 오늘은 타입스크립트 카테고리에 올리기는 하지만 사실 타입스크립트에만 국한되는 개념이 아닌 인덱싱과 딕셔너리 패턴에 대해 정리해보겠습니다. 인덱싱 패턴과 딕셔너리 패턴 특징 및 차이점 - 두 패턴 모두 타입스크립트에만 국한되는 개념이 아니다- 차이점으로는 접근 방식에서 있다.- 또한 각각 데이터 구조가 다르다.근데 내 생각엔 걍 비슷한 것 같다 ㅠ 모가몬지🔵 인덱싱 패턴- '배열'을 기반으로 데이터를 저장한다.- 인덱스를 사용하여 각 요소에 접근한다.- 즉, 순서가 있는 컬렉션 (1) 인터페이스 정의interface Indexing { [index: number]: string;}- number타입의 index와 string을 반환하는 인터페이스 (2) 해당 인터..
인터페이스와 타입별칭안녕하세요. 김테이입니다. 오늘은 타입스크립트의 인터페이스와 타입별칭에 대해서 정리해보겠습니다. 타입스크립트를 사용하면 반드시 사용하게 되는 개념이라 잘 알아두면 좋을 것 같습니다. 😁 🔵 타입스크립트 인터페이스- 타입스크립트에서의 인터페이스는 객체와 함수의 스펙을 정의할 수 있다.- 객체의 스펙으로는 속성과 속성의 타입을 정의한다.- 함수의 스펙으로는 파라미터와 반환 타입을 정의한다. 인터페이스 기본 문법interface 인터페이스_이름 { 속성?: 타입;}- 인터페이스의 이름, 속성과 타입을 만들어두고 사용한다.인터페이스 정의interface User { age: number; name: string;}- 스펙 정의로 인해 속성과 속성의 타입이 기본 문법 토대로 정의..
안녕하세요. 테이입니다. 최근에 회사에서 타입스크립트를 쓰게 되어서 뒤늦게 타입스크립트를 배우는 중이에요 :)공부를 하면서 배운 내용들을 Typescript 카테고리에 정리를 해보려고 합니다.타입스크립트를 써보면서 느꼈던 게 개발 시작을 자바로 해서 그런지 타입 검사를 하는 게 낯설지는 않고 오히려 자바스크립트할 때 불안했던 부분들이 해소되는 느낌이라 좋네요.타입스크립트🔵 특징- 자바스크립트에 타입을 부여한 언어- 자바스크립트의 확장된 언어- 자바스크립트와 다르게 브라우저에서 실행하려면 파일을 한번 변환해줘야함 (컴파일) 🔵 쓰는 이유function sum(a: number, b: number): number { return a + b;}// 1. 에러 사정 방지sum(10, '20'); // 에..