[ TypeScript ] 함수 오버로딩과 커스텀 타입가드로 복잡한 타입 관리하기
·
📍 프로그래밍 언어/TypeScript
💡 함수 오버로딩합수의 오버로딩이란 하나의 함수를 매개변수의 개수나 타입에 따라 다르게 동작하도록 만드는 문법입니다. 하나의 함수명을 func이고 모든 매개변수의 타입을 number라고 가정합니다. 저는 2가지 버전의 함수를 만들어보려고 합니다. ⓵ 매개변수가 1개일 때 매개변수에 20을 곱한 값을 출력하는 함수⓶ 매개변수가 3개일 때 모든 매개변수를 더한 값을 출력하는 함수  function func(a: number): void;function func(a: number, b: number, c: number): void; 타입스크립트에서 함수 오버로딩을 구현하기 위해서는 먼저 다음과 같이 버전별 오버로드 시그니쳐를 만들어 주어야 합니다. 이렇게 구현부 없이 선언부만 만들어둔 함수를 오버로드 시그니..
[ TypeScript ] 함수 타입: 정의와 표현식, 호출 시그니처, 타입 호환성
·
📍 프로그래밍 언어/TypeScript
💡 함수 타입을 정의하는 방법• 일반 함수 타입 정의하기// 자바스크립트function func(a, b) { return a + b;}다음과 같은 자바스크립트 함수가 있을 때 다른 사람에게 함수를 설명하는 가장 좋은 방법은 이 함수가 어떤 매개변수를 받고, 어떤 값을 반환하는지 이야기하는 것입니다.  // 타입스크립트function func(a: number, b: number): number { return a + b;}function func(a: number, b: number) { return a + b;}이번 코드는 타입스크립트 코드로, 자바스크립트의 방식과 비슷합니다. 딱 타입만 추가된 것이죠. 타입스크립트에서는 어떤 타입의 매개변수를 받고, 어떤 타입의 결과값을 반환하는지를 설명하면..
[ TypeScript ] 타입 단언과 타입 좁히기 활용법, 서로소 유니온 타입의 이해
·
📍 프로그래밍 언어/TypeScript
💡 타입 단언• 타입 단언이란// 타입 단언type Person = { name: string; age: number;};let person = {}; // ❌변수 person은 Person 타입으로 정의되었지만 초기화할 때에는 빈 객체를 넣어두고 싶을 경우가 있을 수 있습니다. 그러나 타입스크립트에서는 다음과 같은 경우를 허용하지 않습니다. 빈 객체는 Person 타입이 아니므로 오류가 발생하게 됩니다.   let person = {} as Person;person.name = "수현";person.age = 27;이럴 때에는 다음과 같이 빈 객체를 Person 타입이라고 타입스크립트에게 단언해주면 됩니다. 값 as 타입 으로 특정값을 원하는 타입으로 단언하는 것을 타입 단언이라고 합니다.  ty..
[ TypeScript ] 대수 타입 & 타입 추론: 강력한 타입 시스템 이해하기
·
📍 프로그래밍 언어/TypeScript
💡 대수 타입 (Algebraic type)대수 타입이란 여러 개의 타입을 합성해서 만드는 타입을 의미합니다. 대수타입에는 합집합 타입과 교집합 타입이 존재하며, 합집합은 Union 타입, 교집합은 Intersection 타입이라고 부릅니다.  • 합집합 타입 (Union)let a: number | string | boolean;a = 1;a = "hello";a = true;다음과 같이 string, number, boolean의 유니온 타입을 정의할 수 있으며 바( | )를 사용해서 추가할 수 있는 타입의 개수는 무한대입니다. 이제 변수 a에는 string, number, boolean 타입에 해당하는 값이라면 뭐든지 저장할 수 있습니다.  let arr: (number | string | boo..
[ TypeScript ] 타입 계층도와 함께 살펴보는 타입 호환성
·
📍 프로그래밍 언어/TypeScript
💡 타입은 집합이다 타입스크립트의 타입은 사실 여러개의 값을 포함하는 집합입니다. 집합은 동일한 속성을 갖는 여러개의 요소들을 하나의 그룹으로 묶은 단위를 의미하는데 좌측 이미지는 number 타입입니다. 그러면 우측 이미지는 오직 하나의 숫자값만 포함하는 타입인 Number Literal 타입으로 아주 작은 집합이라고 볼 수 있습니다.  그리고 이 20이라는 타입에 속하는 요소인 숫자 20은 사실 number literal Type 이라는 집합 외에도 Number 타입이라는 거대한 집합에 속하는 값입니다. 따라서 모든 Number Literal 타입은 Number 타입이라는 거대한 집합에 속하는 부분 집합이라고 할 수 있습니다. 타입스크립트의 모든 타입들은 집합으로써 서로 포함하고 또 포함되는 관계를..
[ TypeScript ] any, unknown, void, never : 헷갈리는 타입 한눈에 보기
·
📍 프로그래밍 언어/TypeScript
◎ any 타입any타입은 타입스크립트에서만 제공되는 특별한 타입으로 타입 검사를 받지 않는 특수한 타입입니다. 특정 변수의 타입을 확실하게 모를 때 사용하며 타입스크립트가 가진 장점을 포기하는 타입이기 때문에 최대한 사용하지 않는 것을 추천합니다. let anyVar = 10;anyVar = "hello"; // ❌타입스크립트에서는 변수를 초기화할 때 초기화하는 값을 기준으로 변수의 타입을 추론합니다. 현재 변수 anyVar에는 number 타입의 값 10으로 초기화했지만 이후에 string 타입의 값 "hello"를 저장하려고 하여서 오류가 발생하였습니다. 이럴 때에 사용하는 것이 any라는 치트키 타입입니다.  let anyVar: any = 10;anyVar = "hello";anyVar = tr..
[ TypeScript ] 타입 설계: 타입 별칭, 인덱스 시그니처, 열거형 타입으로 코드 최적화하기
·
📍 프로그래밍 언어/TypeScript
💡 타입 별칭 (Type Alias)// 타입 별칭(타입 코드 중복 방지)type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};타입스크립트에서 타입 별칭을 사용하면 타입을 이와 같이 별도로 정의할 수 있고 type 타입명 = {타입 나열} 형태로 정의합니다. 위에서는 User이라는 타입명으로 여러개의 프로퍼티가 존재하는 객체 타입을 정의하였습니다.  type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};let user..
[ TypeScript ] 배열과 튜플, 그리고 객체 이해하기
·
📍 프로그래밍 언어/TypeScript
💡 배열◎ 타입이 1개일 경우// 배열 기본 표현let numArr: number[] = [1, 2, 3];let strArr: string[] = ["hello", "im", "shyunu"];// 배열 표현(제네릭문법)let boolArr: Array = [true, false, true];배열을 저장하는 변수 이름 뒤에 타입 주석의 시작을 의미하는 콜론(:)을 작성하고, 배열요소타입[ ] 형식으로 배열 타입을 정의합니다. 숫자를 담는 배열이면 number[ ], 문자열을 담는 배열이면 string[ ] 으로 작성하면 됩니다. 또한, Array 형태인 제네릭 타입으로 배열의 타입을 정의할 수 있습니다. 전자의 경우가 더 코드도 짧기 때문에 저는 전자의 표현을 더 많이 사용할 예정입니다.  ◎ 타입이..
[ TypeScript ] 데이터 타입 (기본타입 / 원시타입 / 리터럴타입)
·
📍 프로그래밍 언어/TypeScript
💡 기본 타입 (Basic Types)기본 타입이란, 타입스크립트가 자체적으로 제공하는 내장 타입입니다. 위 그림은 타입스크립트가 제공하는 기본 타입들을 계층에 따라 분류한 타입 계층도 그림입니다. 이러한 각각의 기본 타입들은 서로 부모 자식 관계를 이루며 계층을 형성합니다. 여기서, any, void, never, unknown 같은 특별한 타입들은 타입스크립트에서만 제공하는 타입입니다.   💡 원시 타입 (Primitive Type)원시 타입이란, 동시에 한개의 값만 저장할 수 있는 타입입니다. 배열이나 객체 같이 동시에 여러 개의 값들을 저장할 수 있는 비원시 타입들에 비해, number, string, boolean 등 원시타입은 숫자면 숫자, 문자열이면 문자열 딱 하나의 값만을 저장할 수 있..
shyunu
'📍 프로그래밍 언어/TypeScript' 카테고리의 글 목록