⚡️array 자료에 타입을 지정 array 자료에 타입을 지정하고 싶으면 string[] 이렇게 기입합니다. 하지만 보다 구체적으로 타입지정하고싶을 때가 있습니다. "첫 자료는 무조건 string, 둘째 자료는 무조건 number인 array" 이런 것도 가능합니다. tuple 타입 쓰면 됩니다. ⚡️Tuple 타입 tuple type은 array에 붙일 수 있는 타입인데 자료의 위치까지 정확히 지정할 수 있는 타입입니다. let 멍멍이 :[string, boolean] = ['dog', true]; [ ] 괄호 안에 타입 적으시면 tuple type이 됩니다. [ ] 안에 차례로 세부 타입을 기입하면 됩니다. 그럼 정말 첫 자료는 무조건 string, 둘째 자료는 무조건 boolean만 허용해주고 다..

⚡️react 프로젝트 설치는 이런 명령어를 사용 npx create-react-app 프로젝트명 --template typescript typescript 셋팅이 완료된 프로젝트 설치하는 방법 ⚡️기존 react 프로젝트에 타입스크립트만 더하고 싶을 때 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 기존 프로젝트 경로에서 터미널을 오픈하신 후 입력해주면 끝입니다. 이제 .js 파일을 .ts 파일로 바꿔서 이용가능합니다. 이런거 할 바엔 깔끔하게 그냥 새로 프로젝트 만드는게 안전합니다. ⚡️프로젝트가 생성되고 TS 문법 사용 방법 1. 일반 프로젝트와 다른 점은 컴포넌트 파일은 js가 아니라 tsx로 ..

⚡️ Generic이란? 타입을 인자로 받아서 타입을 리턴하는 함수 ⚡️함수 return 값의 타입이 불확실 할 때 예를 들어 1. 아무렇게나 생긴 array 자료를 입력하면 2. array의 첫 자료를 그대로 출력해주는 함수를 만들었다고 합시다. function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a) console.log(a + 1) 1. 이러면 콘솔창에 4가 출력됩니다. 2. 마우스 올려서 a의 타입을 확인해보면 숫자는 아니고 unknown 타입입니다. 3. 지금 입력하는 array도 unknown 타입이라서 그렇습니다. ( 여기서 중요포인트는 타입스크립트는 타입을 알아서 변경해주지 않습니다. ) 4. 함수의 return..

⚡️import export 하는 방법 만든 타입변수를 다른 파일에서 사용하고 싶은 경우 자바스크립트 import export 문법 그대로 사용가능합니다. post.ts -> get.ts 이렇게 변수나 함수를 가져다쓰고 싶은 경우 (post.ts) export var 이름 = 'kim'; export var 나이 = 30; (get.ts) import {이름, 나이} from './post' console.log(이름) 1. 우선 변수를 다른 파일에서 쓰이게 내보내고 싶으면 export 문법으로 내보내야하고 2. export된 변수를 가져와서 쓰고 싶으면 import 문법으로 가져와야합니다. export 하고 싶으면 변수나 함수 정의부분 왼쪽에 export 키워드 붙이면 되고 import 하고 싶으면 i..

⚡️Narrowing 하는 방법 1. undefined 타입일 경우 처리하는 방법 2. 복잡한 object자료들 narrowing 하는 방법 null & undefined 체크하는 법 실제로 개발할 때 어떤 변수나 함수파라미터에 null, undefined가 들어올 경우 어떻게 대처할지 if문으로 코드짜는 경우가 매우 많을 겁니다. if (저 변수가 undefined일 경우){ } 1. && 스킬을 쓰면 저런 if문을 생략할 수 있습니다. 2. && 연산자의 다른 기능 ⓵ 원래 && 이건 조건식 2개가 참이면 전부 참으로 판정해주세요~ 라는 논리연산자이다 ⓶ && 기호로 비교할 때 true와 false를 넣는게 아니라 자료형을 넣으면 && 사이에서 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지..

⚡️함수 rest 파라미터 함수에 어떤 파라미터가 몇개 들어올지 미리 정의가 불가능한 경우가 있습니다. 3개일지 4개일지 100개일지 모른다면 점3개 ...로 rest 파라미터를 만들어주면 됩니다. function 전부더하기(...a :number[]){ console.log(a) } 전부더하기(1,2,3,4,5) 1. 함수 파라미터 작명할 때 점3개 붙여주면 여기엔 파라미터 잔뜩 들어올 수 있습니다~라고 정의가 가능합니다. 2. 전문 용어로 rest 파라미터라고 합니다. ⓵ rest 파라미터는 다른 일반 파라미터 뒤에만 올 수 있습니다. ⓶ rest 파라미터자리에 집어넣은 값들은 전부 [ ] 안에 담겨있습니다. 3. rest 파라미터 타입지정 : rest 파라미터는 항상 [ ] 안에 담겨오기 때문에 타..