Typescript (14) 썸네일형 리스트형 TypeScript ?와! 차이 TypeScript에서 `store.date?`와 `store.date!`는 옵셔널 체이닝과 논 널 단언 연산자를 나타낸다. - `store.date?`: 이것은 옵셔널 체이닝 연산자이다. `store.date`가 `undefined` 또는 `null`인 경우, 이후의 속성 접근이나 함수 호출을 중단하고 `undefined`를 반환한다. 이는 `store` 객체가 `date` 속성을 가지고 있지 않을 수도 있다는 것을 나타낸다. - `store.date!`: 이것은 논 널 단언 연산자. 이 연산자는 `store.date`가 `null` 또는 `undefined`가 아니라는 것을 TypeScript에 알려준다. 이는 개발자가 `store.date`가 항상 값을 가지고 있음을 확신하고 있음을 나타낸다. 만약.. 타입확장의 장점 타입확장의 가장 큰 장점은 코드 중복을 줄일 수 있다. 중복되는 타입을 반복적으로 선언하는 것보다 기존에 작성한 타입을 바탕으로 타입 확장을 함으로써 불필요한 코드 중복을 줄일 수 있다. 배달의민족 앱은 장바구니 기능을 제공한다. 장바구니에 들어갈 요소는 메뉴 요소 타입에서 확장된 타입으로 이루어진다. ** * 메뉴 요소 타입 * 메뉴 이름, 이미지, 할인율, 재고 정보를 담고 있다 * */ interface BaseMenuItem { itemName: string | null; itemImageUrl: string | null; itemDiscountAmount: number; stock: number | null; } /** * 장바구니 요소 타입 * 메뉴 타입에 수량 정보가 추가되었다 */ inte.. 제네릭 예시 제네릭이 많이 활용될 때는 API 응답 값의 타입을 지정할 때이다.export interface MobileApiResponse { data: Data; statusCode: string; statusMessage?: string; }API 응답 값에 따라 달라지는 data를 제네릭 타입 Data로 선언하고 있다. 이렇게 만든 MobileApiResponse는 실제 API 응답 값의 타입을 지정할 때 아래와 같이 사용되고 있다. export const fetchPriceInfo = (): Promise => { const priceUrl = "https: ~~~"; // url 주소 return request({ method: "GET", url: priceUrl, }); }; export const f.. 제네릭(Generic) 제네릭은 C나 자바 같은 정적 언어에서 다양한 타입 간에 재사용성을 높이기 위해 사용하는 문법이다. 타입스크립트도 정적 타입을 가지는 언어이기 때문에 제네릭 문법을 지원하고 있다. 타입스크립트의 제네릭은 일반화된 데이타 타입이라고 할 수있다. 개념은 함수, 타입, 클래스 등 내부에서 사용할 타입을 미리 정의해두지 않고 타입 변수를 사용해서 해당 위치를 비워 둔 다음에, 실제로 그 값을 사용할 때 외부에서 타입 변수자리에 타입을 지정하여 사용하는 방식을 말한다. 이렇게 하면 여러 타입에 대해 하나하나 따로 정의하지 않아도 되기 때문에 재사용성이 크게 향상된다. 타입 변수는 일반적으로 와 같이 꺽쇠괄호 내부에 정의되며, 사용할 떄는 함수에 매개변수를 넣는 것과 유사하게 원하는 타입을 넣어주면 된다. 보통 타.. 타입스크립트만의 독자적 타입 시스템 - 3 6. enum타입 상수 열거형 프론트는 문자로 많이 사용 Enum 안에 있는 소스는 왠만하면 바꾸지 않는다. enum타입은 열거형 이라고도 부르며 타입스크립트에서 지원하는 특수한 타입이다. enum은 일종의 구조체를 만드는 타입 시스템이다. enum을 사용해서 열거형을 정의할 수 있다. 열거형은 각각의 멤버를 가지고 있다. 자바스크립트 객체의 모양새와 닮았지만 타입스크립트는 명명한 각 멤버의 값을 스스로 추론한다. enum ProgrammingLanguage { Typescript, // 0 Javascript, // 1 Java, // 2 Python, // 3 Kotlin, // 4 Rust, // 5 Go, // 6 } // 각 멤버에게 접근하는 방식은 자바스크립트에서 객체의 속성에 접근하는 방식과.. 옵셔널(optional) 특정 속성 또는 매개변수 값이 있을 수도 있고 없을 수도 있는 것을 의미한다. 선택적 매개변수(옵셔널 파라미터) 또는 선택적 속성(옵셔널 프로퍼티)은 필수적으로 존재하지 않아도 되며 선택적으로 사용될 수 있음을 나타낸다. 선택적 속성은 해당 속성에 값을 할당하지 않아도 되고 해당 속성이 없어도 오류가 발생하지 않는다. 타입스크립트의 유연한 데이터 모델링과 사용자 정의 타입을 지원하기 위한 개념이다. const optionalTuple1: [number, number, number?] = [1, 2]; const optionalTuple2: [number, number, number?] = [1, 2, 3]; // 3번째 인덱스에 해당하는 숫자형 원소는 있어도 되고 없어도 됨을 의미한다 출처 - 우아한 타.. 타입스크립트만의 독자적 타입 시스템 - 2 4. never 타입 값을 반환할 수 없는 타입. 값을 반환하지 않는 것과 반환할 수 없는 것을 명확히 구분해야 한다. 자바스크립트에서 값을 반환할 수 없는 예 2가지 - 에러를 던지는 경우 자바스크립트에서는 런타임에 의도적으로 에러를 발생시키고 캐치할 수 있다. throw 키워드를 사용하여 에러를 발생 시킬 수 있다(값을 반환하는 것으로 간주하지 않는다) 특정 함수가 실행 중 마지막 에러를 던지는 작업 수행 시 해당 함수의 반환 타입은 never이다. function generateError(res: Response): never { throw new Error(res.getMessage()); } - 무한히 함수가 실행되는 경우 무한루프는 함수가 종료되지 않음을 의미 하기 때문에 값을 반환하지 못한다.. 타입스크립트만의 독자적 타입 시스템 - 1 1. any 타입 자바스크립트에 존재하는 모든 값을 오류없이 받을 수 있다. let state: any; state = { value: 0 }; // 객체를 할당해도 state = 100; // 숫자를 할당해도 state = "hello world"; // 문자열을 할당해도 state.foo.bar = () => console.log("this is any type"); // 심지어 중첩 구조로 들어가 함수를 할당해도 문제없다 any타입을 변수에 할당하는 것은 지양해야할 패턴이지만 어쩔 수 없이 사용해야 할 때가 있다. 개발 단계에서 임시로 값을 지정할 때 어떤 값을 받아올지 또는 넘겨줄지 정할 수 없을 때 값을 예측할 수 없을 때 암묵적으로 사용 2. unknown 타입 unknown 타입은 any 타.. 2.4 객체타입 1. object 자바스크립트 객체의 정의에 맞게 이에 대응하는 타입스크립트 타입 시스템은 object 타입이다. object 타입은 가급적 사용하지 말도록 권장되는데 나중에 다룰 any 타입과 유사하게 객체에 해당하는 모든 타입 값을 유동적으로 할당할 수 있어 정적 타이핑의 의미가 크게 퇴색되기 때문이다. 다만 any 타입과는 다르게 앞서 다룬 원시 타입에 해당하는 값은 object 타입에 속하지 않는다. 아래 예시는 object 타입의 광범위함을 보여준다. function isObject(value: object) { return ( Object.prototype.toString.call(value).replace(/\[|\]|\s|object/g, "") === "Object" ); } // 객체,.. 2.3 원시타입-2 4. number const maxLength: number = 10; const maxWidth: number = 120.3; const maximum: number = +Infinity; const notANumber: number = NaN; 자바스크립트의 숫자에 해당하는 모든 원시 값을 할당할 수 있다. 자바 같은 언어에서는 byte.short.int.long.double.float 등 다양한 숫자 타입으로 구분되어 있는 것과 달리 자바스크립트는 정수, 부동소수점수를 구분하지 않기 때문에 모두 number 타입에 할당할 수 있다. 자바스크립트에서 숫자에 해당하는 원시 값 중 NaN이나 Infinity도 포함된다. NaN은 Not A Number의 줄임말로 숫자가 아님을 나타낸다. Infinity는.. 이전 1 2 다음