TypeScript (3) 썸네일형 리스트형 3. Call Signatures 미리 리턴값의 형식까지 지정해 놓는 것을 뜻한다. 즉, 프로그램을 디자인하면서 타입까지 미리 고려하는 것이다. ✅ 아래 plus 변수가 에러를 출력하는 이유 {} 를 사용하면 그 값이 반환값이 함수 내부의 내용으로 처리가 된다. add 함수는 다음과 같이 풀이가 되고 function add(a,b) { return (a+b) } plus 함수는 다음과 같이 풀이가 된다. 이 경우, return type이 void가 된다. function add(a, b) { a+b; } 즉, 화살표 함수에서 {} 를 사용하게 되면 그 안의 값은 반환이 아니라 함수 내부 내용으로 처리되기에 반환값이 없는 void 로 처리된다. 이에 따라 위에서 미리 선언한 Add 자료형의 반환값은 number라고 정해놓은 내용과 충돌하기.. 2. TS에 Type 명시해주기 1. optional parameter 만약 name은 필수이고, age는 선택적인 경우 ? 를 붙여주면 된다 . 2. 화살표 함수 // 화살표 함수 const playerMaker = (name:string) : Player => ({name}) 3. read only 읽기전용으로 바꿈으로써 임의로 수정하는 것을 방지할 수 있다. 위 예시를보면 names 배열을 readonly로 설정함으로써, names.push()가 작동하지 않는 것을 볼 수 있다. 4. tuple 기본값을 정해줄 수 있다. 위의 예시는 변수를 생성하는 요소를 다 채우지 않아 오류가 난 경우이다. 요소를 다 채워주면 오류가 나지 않는다. 5. unknown let a:unknown if (typeof a === 'number'){ l.. 1. optional props / default props ✅ Code // Circle.tsx import styled from "styled-components"; import tw from "tailwind-styled-components"; interface ContainerProps { bgColor: string; borderColor?: string; } const Container = styled.div` width: 200px; height: 200px; background-color: ${(props) => props.bgColor}; border-radius: 100px; border: 1px solid ${(props) => props.borderColor}; `; interface CircleProps { bgColor: string; /.. 이전 1 다음
