타입스크립트14 [Typescript] 함수 함수 타입 (Function Types) 함수의 타이핑 아래는 함수에 타입을 더한 예제이다. function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y }; 위 예제에서는 매개변수의 타입과 반환 타입을 정해주었다. 하지만 Typescript는 반환 문을 보고 반환 타입을 파악할 수 있으므로 반환 타입은 생략할 수 있다. 함수 타입 작성하기 let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; }; 함수의 타입은 매.. 2023. 6. 10. [Typescript] 인터페이스 첫 번째 인터페이스 (Our First Interface) 아래는 타입을 지정한 함수이다. function printLabel(labeledObj: { label: string }) {...} printLabel({ size: 10, label: "Size 10 Object" }); 위 예제를 interface를 사용하면 아래와 같이 작성할 수 있다. interface LabeledValue { label: string; } function printLabel(labeledObj: LabeledValue) {...} printLabel({ size: 10, label: "Size 10 Object" }); 선택적 프로퍼티 (Optional Properties) interface의 모든 프로퍼티가 필요하지.. 2023. 6. 10. [Typescript] 기본 타입 불리언 (boolean) 가장 기본적인 데이터 타입은 참/거짓(true/false) 값인 boolean이다. let isDone: boolean = false; 숫자 (number) TypeScript의 모든 숫자는 부동 소수 값이며, number라는 타입이 붙여진다. Typescript는 2진수, 8진수, 16진수, 10진수 리터럴을 지원한다. let decimal: number = 6; // 10진수 let hex: number = 0xf00d; // 16진수 let binary: number = 0b1010; // 2진수 let octal: number = 0o744; // 8진수 문자열 (string) 다른 언어들처럼, Typescript에서도 텍스트 데이터 타입을 string으로 표현한다. le.. 2023. 6. 9. Styled Components 적용하기(React + Typescript) styled-components 설치 styled-components와 @types/styled-components를 함께 설치해준다. yarn add styled-components yarn add --dev @types/styled-components기본 적용 import styled from "styled-components"; const App = () => { return ( color change ); } const StyledButton = styled.button` width: 200px; height: 50px; font-size: 16px; `;간단 예제 클릭 시 버튼의 색이 변경되는 예제 const App = () => { const [color, setColor] = useState.. 2023. 3. 19. 이전 1 2 다음