리액트 2주 4일차
-더 안전한(에러가 없는) 코드
-기존의 자바스크립트를 타입스크립트로 바꾸자 더 안전한 코드 (TypeScript)
오늘 강의에선 타입스크립트에 대해 배웠다.
타입스크립트란 무엇인가??
타입스크립트는 기존 자바스크립트에 일부 기능들이 추가된 것이다.
오늘 배운 내용은 변수,함수,배열,객체 등에 데이터형식을 선언하여
그 데이터형식만 사용 가능하게 만드는 것이였다.
예를 들어 aaa라는 변수가 있을때 js에서는 숫자,문자 상관없이
할당할 수 있엇지만, 타입스크립트에서는 숫자형 변수에 문자형이 들어가면
빨간줄이 그어지며 에러가 난다.왜 타입스크립트를 써야하는가??
멘토님께서 예를 들어주셧는데
타입스크립트가 생기기 이전
한 서비스에서 한명당 게시글을 5개만 쓸수있게 제한을 걸어놨다
그런데 자꾸 5개 이상의 글이 올라올 수있엇다고 한다.
왜 그런지 살펴보니 조건문 부분에 숫자 0이 숫자가 아닌
문자열 0으로 되어있어 계속 true가 나온 것 이였다.
말로 풀어보면 쉽게 발견할 수 있을 것 같고 별거아니게 들리지만
만약 그 서비스가 굉장히 거대한 서비스 였고 코드의 양이 방대하다면.
에러메시지도 뜨지않는 그 코드를 찾는다는것은 굉장히 많은시간과 개발자들의
리소스가 쓰이는 일인 것이다.
만약 저 상황에서 타입스크립트를 사용해 서비스를 개발했다면,
저런 상황은 나오지 않았을것이다.
숫자형변수에 문자열이 들어가면 빨간줄이 그이고 사용이 되지 않았을테니
배포이전에 문제를 잡아낼 수 있엇을 것이다.타입스크립트는 어떻게 써야하는가?
타입스크립트의 사용법은 간단하다.
js에서 변수를 지정해줄때let aaa = 123 aaa = "dasd"
이런식의 코드를 사용할 수 있엇다.
타입스크립트는 아래처럼 사용하면된다. let aaa:number = 1231; aaa = "하위~"
이렇게 사용하면 문자열이 들어가지 않는다 물론 파일 확장자를 ts로 바꿔야한다.
아래부턴 타입스크립트 사용법을 일괄정리하겠다.//타입 추론
let aaa = '안녕하세요'
aaa = 132
//타입 명시
let bbb:string = "반갑습니다."
bbb = 12313131
//문자타입
let ccc:string
ccc = "반가워요"
//숫자타입
let ddd:number
ddd = 1231
//블린타입
let eee:boolean = true
eee = "false" //자주 발생하는 실수 (빈문자열이 아니라 true로 동작한다 타입스크립트에서는 이를 막아준다.)
//배열 (숫자가 들어가는 배열, 문자가들어가는 배열, 등ㄷ으)
let fff:number[] = [1,2,3,4,5,6,1,6,12,43,2]
let ggg:string [] = ["철수", "영희" , "훈이" , 10]
// 명시를하지않으면 10이 들어간다. (문자string 또는 숫자number 가 들어갈 수 있는 배열이라고 판단함)
let ooo = ["철수", "영희" , "훈이" , 10]
//객체 (타입이 없고 사용자가 직접 만들어야함.)
//타입이 없더라도 타입추론은 가능하다.
interface IProfile {
name:string,
age:number | string, // 추론으로 만들면 이런방식을 사용하지 못함.
school:string
}
const profile: IProfile = {
name: "철수",
age: 8,
school: "다람쥐초등학교"
}
profile.age="8살" //추론으로 만들면 age가 넘버로 추론되어 문자열 입력이 되지 않는다.
//함수타입
const add = (money1:number , money2:number , unit:string):string => {
return money1 + money2 + unit
}
const result = add(1000,2000,"won")
console.log(result)자세한 사용법은 위 코드들을 천천히 살펴보고 익혀보자 객체말고는 사용법이 어렵지 않다.
타입스크립트와 JSX
타입스크립트를 사용하기 위해선 타입스크립트를 글로벌하게 다운로드받거나 각 디렉토리에 다운받는
방법이 있는데 오늘 수업에서는 각 디렉토리별로 다운받는 방법을 썻다.
다운로드는 구글에 typescript를 검색하면 나온다. yarn 혹은 npm이 필요하다.
타입스크립트의 확장자는 ts 와 tsx가 있다.
ts는 일반 자바스크립트만 사용할때 필요한데
tsx는 무엇이냐면 우리가 그동안 사용하던 jsx를 사용한 혹은 사용할 파일에는 tsx라는 확장자를
붙여줘야지만 사용이 가능하다.
그렇지 않으면 jsx는 사용이 불가능하다.