1-1) class 폴더와 freeboard_frontend 폴더 두군데 모두 설치를 시작합니다.
1-2) typescript 홈페이지 접속 또는 구글에서 typescript를 검색해 주세요.
1-3) Docs를 클릭해 주세요.
1-4) 스크롤을 내려 getstart의 installation을 눌러주세요
1-5) npm install typescript --save-dev 복사해 주세요.
패키지 매니저가 npm이 아니신 분들은 아래 맞는 패키지매니저 버튼을 클릭하시면 됩니다.
1-6) npm install typescript --save-dev 를 복사 하셨다면, 터미널에서 class 폴더 위치로 이동한 후 붙여넣기 해 주세요.
설치가 완료되고 package.json을 들어가보시면 목록에 dependencies와 devDependencies로 나뉘어져 있는 것을 볼 수 있습니다.
dependencies 는 브라우저에 실행시에 필요한 목록입니다.(참고)
devDependencies는 vscode에서(개발시) 필요한 목록입니다.
1-6) 설치가 완료되었다면, typescript 설정 파일(tsconfig.json)을 만들어 줍니다. 내용은 비워 놓습니다.
1-7) 현재 상태에서 yarn dev 명령을 실행하게 되면, nextjs가 typescript의 설정 파일인 tsconfig.json을 감지하고, tsconfig.json에 기본 설정을 자동으로 채워줍니다.
1-8) 아래와 같이 기본 설정 내용이 채워졌다면, 정상적으로 설치가 완료된 것입니다.
1-9) tsconfig파일에서 strict을 true로 바꿔주세요.
기존의 strict가 false로 되어있을 것 입니다. 우리는 조금 더 엄격한 타입스크립트를 사용할 것이므로 여기를 true로 바꿔 주시면 됩니다. 실제 실무에서도 true로 두고 하는 경우가 더 많습니다.
타입스크립트 파일 확장자
타입스크립트를 사용하는 파일 중 return을 포함하고 있다면 확장자를 .ts로 두면 오류가 발생합니다.
return 부분이 사실 html이 아니라 JSX 즉, 자바스크립트 XML 이기때문에 그렇습니다.
따라서 단순히 javascript만 있는 .js 파일은 typescript의 .ts로 변경하고,
javascript에서 JSX(React의 HTML)를 return 하는 컴포넌트들은 typescript의 .tsx 로 변경합니다.
💡 1. JSX 를 return 하는 컴포넌트 : .tsx
2. 자바스크립트만사용하는 컴포넌트 : .ts
타입스크립트를 사용할 땐 위의 확장자를 잘 구분해서 사용하셔야 합니다.
타입 추론
파일의 확장자를 .ts 혹은 .tsx로 변경하게 되면서 기존의 자바스크립트 작성 부분이 타입스크립트 영역으로 바뀌게 됩니다.
따라서 변수에 타입을 먼저 입히지 않고 할당을 하게되면 타입스크립트는 할당된 값의 자료형을 타입으로 추론 하게 됩니다.
타입스크립트 배열, 객체 실습
/* 배열타입 */
// 문자열만 있는 배열
let aaa:string[] = ["원두","은정","혜원"]
// 배열에 문자열과 숫자열을 같이 넣어두고 싶을 때
let fff:(string | number)[] = [1,2,3,"철수","영희"]
// 모두 숫자이거나 모두 문자인 배열
let hhh: string[] | nuber[] =[ "영희","철수" ]
hhh=[1,2,3]
/* 객체타입 */
interface Ipropfile {
name : string
age : number
school : string
}
const profile:Ipropfile = {
name : "원두"
age : 8
school : "코캠 초등학교"
}
//age의 타입이 문자열이거나 숫자열일 때
interface Ipropfile{
name : string
age : string | number
school : string
}
const profile:Ipropfile = {
name : "원두"
age : 8 or "8살"
school : "코캠 초등학교"
} 💡 타입 스크립트에서의 또는, 그리고
→ 타입스크립트에서의 또는과 그리고는 자바스크립트와 비슷하지만 조금 다릅니다.
또는 === |
그리고 === &
객체에서 해당 key에 value가 있으면 보내주고 싶다할 때!
→ ? 를 이용해주시면 됩니다.
? 는 ‘있으면’ 이라는 뜻 입니다.
레벨업!
💡 props의 타입 지정은 어떻게 할까요?
→ props도 객체 입니다. 따라서 객체에 타입을 지정해주는 것과 같이 해주시면 됩니다.
