▶타입스크립트 이넘(Enums) 이넘은 특정 값들의 집합을 의미하는 "자료형"입니다. 🔎 이넘(Enums) ? - 사용될 수 있는 값을 묶어두자! 이넘은 특정한 값들을 집합으로 가지고 있는 자료형입니다. 예를 들면 아래와 같은 목록이 이넘이 될 수 있습니다. enum Shoes { Nike, Adidas, } 🔎 이넘 사용하기 이넘으로 정의하게 되면 딱 그 값들만 사용할 수 있게 되는데요. 위에서 정의한 Shoes라는 이넘을 사용해 봅시다. 🔎 숫자형 이넘 만약에 다음과 같이 작성했다고 해봅시다. var myShose = Shoes.Nike; console.log(myShose); // 0 그러면 내가 Nike에 값을 할당하지도 않았는데 콘솔로 찍어보게 되면 0이 출력되게 됩니다. 초기값을 할당해주지 않..
▶타입스크립트 인터섹션 타입(Intersection Type) 인터섹션 타입은 여러 타입을 모두 만족하는 하나의 타입을 의미합니다. interface Person { name: string; age: number; } interface Developer { name: string; skill: number; } type Dev = Person & Developer; 위 코드는 Person 인터페이스의 타입 정의와 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후 Capt 이라는 타입에 할당한 코드입니다. 결과적으로 Dev의 타입은 아래와 같이 정의됩니다. { name: string; age: number; skill: string; } 저번 글에서 유니온 타입을 알아보았을 때 함수..
▶타입스크립트 유니온 타입(Union Type) 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자( || )와 같이 A이거나 B이다 라는 의미의 타입입니다. 🔎 유니온 타입이 없어도 function logMessage(value: any) { console.log(value); } logMessage('hello'); logMessage(100); logMessage라는 함수에 string값도 넣고 싶고 number값도 넣고 싶을 때 value의 타입을 any로 해도 에러가 발생하지는 않습니다. 다만 이렇게 할 경우 타입스크립트의 장점이 사라지게 되는 것과 마찬가지인데요. 이는 유니온 타입의 장점과도 이어지므로 밑에서 설명을 이어서 하겠습니다. 🔎 유니온 타입 사용하기 사용하는 방법은 단순..
▶타입스크립트 타입 추론(Type Inference) 타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미합니다. 🔎 타입 추론의 기본 타입스크립트가 타입 추론을 해나가는 과정은 다음과 같습니다. let x = 3; // 타입 지정X 위와 같이 x에 대한 타입을 따로 지정하지 않더라도 일단 x는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 대 타입 추론이 일어납니다. 🔎 가장 적절한 타입(Best Common Type) 타입은 보통 몇 개의 표현식(코드)을 바탕으로 타입을 추론합니다. 그리고 그 표현식을 이용하여 가장 근접한 타입을 추론하게 되는데 이 가장 근접한 타입을 Best Com..
▶타입스크립트 타입 별칭(Type Aliases) 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다. 같이 코드를 보면서 이해해 봅시다 :) 🔎 타입 별칭 사용하기 우선 우리가 변수를 정의할 때 일반적으로 타입스크립트에서 사용하는 문법을 아래와 같았습니다. // string 타입을 사용할 때 var thisName: string = 'doeunn'; 이제 string이라는 타입에 별칭을 주어 사용할 겁니다. type MyName = string; var thisName: MyName = 'doeunn'; 즉, string 타입을 MyName이라는 별칭으로 사용하겠다는 말과 같습니다. 이렇게 간단한 타입 별칭을 넘어 인터페이스처럼 몇개씩 묶어서 별칭을 줄 수도 있는데요. typ..
▶타입스크립트 인터페이스(interface) 타입스크립트는 매번 선언하는 변수 혹은 함수의 파라미터로 들어가는 변수에 대해서 반드시 타입을 정의해 주어야만 했습니다. 그런데 우리가 프로젝트를 진행하다보면 서로 다른 함수에 똑같은 인자를 넘겨주는 경우가 많은데요. 이때는 매번 반복적으로 작성을 해주어야 하는 걸까요? 이러한 반복되는 작업에 대해서는 인터페이스라는 것을 통해 코드를 좀 더 간결하고 깔끔하게 작성 가능합니다🤩 🔎 인터페이스란? 인터페이스는 미리 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 다음과 같은 부분에서 사용이 가능합니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 간단하게 인터페이스..
- Total
- Today
- Yesterday
- frontend
- 자바스크립트
- Python
- 머신러닝
- CSS
- 스타일 컴포넌트 styled-components
- 딥러닝
- 리액트
- 프론트엔드 기초
- 리액트 훅
- 디프만
- styled-components
- react-query
- 자바
- rtl
- testing
- jest
- 인프런
- 자바스크립트 기초
- 프로젝트 회고
- HTML
- 파이썬
- next.js
- TypeScript
- 데이터분석
- 타입스크립트
- JSP
- react
- 프론트엔드
- 프론트엔드 공부
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |