----9일차----

오늘은 타입스크립트에 대해서 포스팅을 하겠습니당
~~

1.TypeScript란 무엇일까요??

정의먼저 이야기 드리겠습니다!
바로
자바스크립트의 타입을 강제시키는 언어입니당!
어떤의미냐
자세히 설명 드리기위해서는 먼저 자바스크립트를 설명드려야하는데요

Javascript Vs TypeScript

javascript

자바스크립트는 동적언어로써 타입을 지정해주지 않고 사용을 하게됩니다!
쉽게 말해

C언어같은 정적언어에서는

int a = 정수
float b =실수 

이렇게 타입을 작성하면서 변수의 타입이 정해저있지만

자바스크립트와 같은 동적언어에서는

let a
let b 

이런식으로 작성하여 타입을 지정해주지 않고 사용을 할수있습니다
이렇게 되면 순간순간 개발하는데는 편하지만 결과론적으로
서비스 규모가 커지면 커질수록 알수없는 버그들이 다수 발생하게 됩니다!

왜?

바로 타입을 지정하지 않기때문에 어떤 타입으로 오는지 알수없는데서 발생하는 오류들이 생깁니다.!
예를들어
문자열에 1을 더해주고싶은데

let str=''
str=str+1

이런식으로 하면 문자열에 숫자 1을 더해주는것이 아닌
타입이 문자열로 나오게 됩니다!
이러면 작은서비스에서는 쉽게 핸들링할수있지만
큰 서비스에서는 다수의 사용자들이 사용하기 때문에 어디서 똑같은 오류가 발생할수있을지 모르니 더욱 당황스럽겠죠??

그래서 나온것이 바로!!!

Typescript입니다!

오늘 설명드릴 주요한 내용인데요!
한번 알아볼까요~~

Typescript는 javascript에 타입을 설정하여서
기존에 가지고 있는 자바스크립트에 타입을 지정해줄수있게되어
이러한 취약점을 해결할수있습니다!

어떻게 해결하는 건지 알아볼까요??

let aaa:string ="안녕하세요"
let bbb:number =123
let ccc:boolean =true

자 위의 자바스크립트와는 조금다르죠?
위의 자료를 활용해 보겠습니다!
어떻게 다를까요??

네! 맞습니다! 바로
변수 aaa 뒤에 : string이라고 타입을 지정해 주게 된 것입니다!
즉 aaa라는 상자를 만들고 string이라는 타입지정후 안녕하세요라는 문자열을 넣어주게 되는겁니다!

여기서 주의할점 !!!

객체는 타입이 제공되지 않습니다 !
그럼 어떻게 객체는 타입을 해결할수있을까요??
바로 타입을 개발자가 직접 작성해 줄수 있습니다!
예시를 한번 봐보겠습니다

Interface IProfile{
name:string;
age:number;
}
let profile:IProfile={name:"철수"
,age:13}

이렇게 작성을 해주고

interface라는 객체명을 지정해주고 IProfile이라는 타입을 지정해줍니다
그러면 사용법은
let profile의 타입을 : IPorfile로 지정해서 넣어라 라는 것이죠!

객체의 사용법을 알아두면 훨씬 유익하겠죠!

타입스크립트는 파일명도 다릅니다!
어떻게 다를까요??
자바스크립트는 파일명을 js로 작성했었죠!
타입스크립트는 파일명을 ts로 작성하게 됩니다!

파일명을 보니 이런것도 생각해볼수 있겠네요??

"어?! js파일이 아니면 웹이 못 읽는거아니에요??"

정답입니다!
실제로 ts 로 작성하면 이 파일은 웹이 읽지못하지만
vscode와 같은 개발툴에서 변경을 해서 보내주기때문에 웹이 읽을수 있게 됩니다!
ts는 이해가 됬는데

그럼 ts와 tsx의 차이는 무엇일까요??

ts파일이 jsx를 리턴하고 있으면 tsx로 써야합니다!
왜 그럴까요??
js의 경우에는 발전이 많이 되서 js를 작성해도 jsx파일을 인식할수있지만
ts의 경우에는 아직 발전이 부족하여 ts에 jsx파일을 삽입하게 되면 인식할수가 없게됩니다!
그렇기에 ts에 jsx파일을 출력하기 위해서는 파일명을 .tsx로 만들어야겠죠??

물론 jsx가 들어가지 않는 단순 함수들은 ts만 붙여도 되겠죠~??