항상 오류가 나는 내 코드.. 검증해주는 방법은 없을까 의문이 들때쯤 '타입'에 관련된 오류를 정확히 검증해주는 typescript라는 아이를 배우게 되었다!!
이 아이를 통해 조금이나마 오류에서 벗어나고 싶다ㅠ
Typescript란 Javascript의 타입을 강제시키는 언어를 말한다.
let aaa = "안녕하세요"
aaa = 123 (가능)위의 javascript에서는 변수를 지정하고 내용을 어떻게든 바꾸는 것이 가능하다.
let aaa: String = "안녕하세요"
aaa = 123 (오류 발생)하지만 typescript에서는 어떤 형태로 나올지 타입을 지정해주면 정해진 형태로만 인식하기 때문의 위의 상황에서는 오류가 발생하게 된다.
(aaa라는 상자에 String 값만 넣어달라고 지정했으니 aaa에는 숫자가 들어갈 수가 없다.)
변수명 뒤에 : 타입명을 붙여주면 typescript의 기본구조가 된다.
하지만 typescript에서 타입을 지정해주지 않아도 처음에 입력한 초기값을 토대로 타입을 인식하는데 이것을 '타입추론'이라고 한다.
위의 사진에서 String 쓰지 않았음에도 오류를 찾아내는 이유는 '타입추론'을 하고 있기 때문이다!
(처음에 들어간 데이터인 "안녕하세요"를 String이라고 인식하여 숫자인 3이 들어갔을 때 오류가 난다.)
그렇다면 타입명이 없는 객체는 어떻게 사용할까?
객체는 객체에 적용할 나만의 타입을 만들어 주어야 한다!
📌 참고: IProfile은 이름 아무거나 사용 가능하지만 관례로는 프로필에 타입을 적용할거면 Interface의 I와 Profile을 합쳐서 IProfile로 사용한다.
📌 참고: .js .jsx .ts .tsx 구분
.js와 .jsx는 어떻게 쓰던 상관 없지만 .ts는 함수만 있을 때 사용하고 .tsx는 컴포넌트 즉 jsx(함수의 return 부분)가 리턴될 때 사용한다.
📌 더알아보기!
typescript를 설치하고 package.json을 보게 되면 devDependencies에 들어간 것을 볼 수 있다.
dependencies는 실행용이며, devDependencies는 개발용(vscode용)으로
typescript는 틀린 부분을 알려주기 위한 용도로 브라우저에서는 typescript를 읽지 못해 javascript로 변경되어 실행된다.
typescript가 설치 후에 tsconfig.json을 만들고 yarn dev를 해준 후 내용을 채워줘야 하는데 Next.js가 있다면 자동으로 내용을 채워준다.
