sy_develop_note

TypeScript에서 Type과 Interface의 차이점에 대해 알아보겠습니다. Type vs Interface // Object 선언할 때 interface IObject { x: number; y: number; } type TObject = { x: number; y: number; } // Function 선언할 때 interface IFunction { (x: number, y: number): number; } type TFunction = (x: number, y: number) => number; interface와 type은 객체나 함수의 타입을 선언하는 데 사용될 수 있습니다. type은 할 수 있지만 interface에서는 할 수 없는 것들 primitive 타입 선언하기 type..

type predicate (타입 프레디케이트) type predicate는 TypeScript에서 특정 타입에 대한 동적인 체크를 수행하는 함수입니다. 이 함수는 입력된 값이 특정 타입인지 여부를 불리언으로 반환합니다. 이를 통해 TypeScript는 실행 시간에 변수의 타입을 검사할 수 있게 됩니다. 단순한 숫자 타입 체크 function isNumber(input: any): input is number{ return typeof input === 'number'; } console.log(isNumber(10)); 'isNumber' 함수는 입력값이 숫자인지 여부를 검사하는 타입 프레디케이트입니다. 'input is number' 형태는 TypeScript에게 이 함수가 실행되면 'input'이 ..

TypeScript 관점에서 statement와 experssion의 차이 그리고 expression(표현식)을 사용하는 게 더 좋은지에 대해서 한번 알아보도록 하겠습니다. Statement(문장) 프로그램에서 어떤 작업이 이루어져야 하는지를 나타냅니다. 주로 어떤 동작이나 조건을 수행하도록 컴퓨터에게 명령하는 역할을 합니다. function addTwoNumbers(x: number, y: number): number { return x + y; } 반환 값이 있을 수도, 없을 수도 있습니다. 주로 함수나 조건문, 반복문 등이 Statement의 예시입니다. 장점 명시적인 반환 명시적으로 return 키워드를 사용하여 반환값을 지정할 수 있어, 함수가 무엇을 반환하는지 명확하게 드러낼 수 있습니다. ..

오버로딩이라는 개념은 많은 언어에 존재하는 개념입니다. 하지만 자바스크립트에는 없고 타입스크립트에는 존재합니다. 타입스크립트의 오버로딩에 대하여 알아보겠습니다. Overloading 오버로딩은 동일한 함수 이름으로 다양한 매개변수 및 반환 타입을 가진 여러 버전의 함수를 정의하는 것을 말합니다. 이를 통해 다양한 형태의 입력을 받아들이고 그에 따라 다양한 출력을 반환할 수 있습니다. 함수 시그니처 function stringOrStrings(members: string): string; function stringOrStrings(member1: string, member2: string, member3: string): string; 첫 번째 시그니처: 문자열 하나를 받아서 문자열을 반환합니다. 두 번..

함수를 타입으로 정의하는 방법에 대해 알아보겠습니다. Function Type type Mapper = (x: string) => string; Mapper는 문자열을 받아 다른 문자열을 반환하는 함수 타입을 정의합니다. 예를 들어, (x: string) => string는 문자열을 받아 "멤버: 문자열" 형태의 새로운 문자열을 반환하는 함수를 의미합니다. const runner = (callback: Mapper) => { return ['잘자세연', '누구세연', '안녕하세연'].map(callback); } console.log(runner((x) => `멤버 : ${x}`)); runner 함수는 Mapper 타입의 콜백 함수를 인자로 받아, 문자열 배열에 각 요소에 대해 콜백 함수를 적용한 결과..

TypeScript의 함수에 대해 알아보겠습니다. 함수 정의하기 function returnTwoCouples(person1: string, person2: string): string { return `${person1}과 ${person2}은 닉네임 입니다.` } console.log(returnTwoCouples('잘자세연', '누구세연')); // 잘자세연과 누구세연은 닉네임 입니다. 위의 예시는 TypeScript에서 함수를 정의하는 기본적인 형태입니다. 함수 이름과 파라미터 타입 명시 - function 키워드를 사용하여 함수를 선언합니다. - 함수 이름을 정의하고 괄호 안에 파라미터와 각 파라미터의 타입을 명시합니다. (파라미터 타입은 콜론(:) 다음에 명시!) 리턴 타입 명시 - 콜론(:)..

Narrowing(내로잉) TypeScript에서 특정 코드 블록 내에서 변수의 타입을 더 구체적으로 좁히는 것을 의미합니다. 예를 한번 들어보겠습니다. numberOrString이라는 변수는 number 또는 string이 될 것이라고 선언해 두었습니다. 그리고 값도 입력을 해두었습니다. 이렇게 선언을 하면 string 또는 number가 될 수 있지만 값을 넣어두었기 때문에 마우스를 올려보면 더 구체적인 타입으로 유추되는 것을 확인할 수 있습니다. 이것이 내로잉의 가장 기본이 되는 개념입니다. 우리가 타입을 선언했다고 해도 값을 통해서 TypeScript는 어떤 타입이 될지를 정확하게 유추할 수 있습니다. Narrowing의 종류 1) Assignment Narrowing 변수에 값을 할당함으로써 타..

Intersection 두 개 이상의 타입을 합쳐 새로운 타입을 만드는 것을 말합니다. Intersection은 '&' 기호를 사용하여 타입을 결합합니다. 이것은 여러 타입의 속성을 모두 갖는 새로운 타입을 생성하는 데 사용됩니다. 간단한 예를 들어보겠습니다. 아래의 두 인터페이스가 있다고 가정해 봅시다. interface Human{ name: string; age: number; } interface Contacts{ phone: string; address: string; } 그리고 Intersection을 사용하여 새로운 타입을 만들어봅시다. type HumanAndContacts = Human & Contacts; let humanAndContacts: HumanAndContacts = { na..

Union TypeScript의 Union(유니온) 타입은 둘 이상의 타입을 허용하도록 하는 타입으로, 여러 종류의 값을 가질 수 있는 변수를 선언할 때 유용합니다. 유니온 타입은 '|' 기호를 사용하여 표시할 수 있습니다. 예를 들어, 다음과 같이 유니온 타입을 사용할 수 있습니다. let val: number | string; // number 또는 string을 가질 수 있는 변수 선언 val = 123; // 숫자 할당 console.log(val); // 123 val = "hello"; // 문자열 할당 console.log(val); // hello 위 예시에서 'val' 변수는 number 또는 string 타입을 가질 수 있습니다. 이를 통해 여러 가지 타입의 값을 단일 변수에 할당하여 ..

Casting 캐스팅(Casting)은 변수 또는 값을 특정한 타입으로 강제로 변환하는 과정을 말합니다. 이는 변수의 타입을 컴파일러에게 알려주는 방법입니다. Casting은 실제 구동하는 코드에서 아무런 의미를 갖지 않습니다. JavaScript에서는 존재하지 않는 개념입니다. TypeScript에서 사용합니다. TypeScript에서는 이를 명시적 캐스팅과 암시적 캐스팅으로 나눌 수 있습니다. 명시적 캐스팅(Explicit Casting) 명시적으로 타입을 변환하는 것을 의미합니다. 일반적으로 'as' 키워드를 사용하여 수행됩니다. // 명시적 캐스팅 let someValue: any = "this is a string"; let strLength: number = (someValue as strin..