-
TypeScript 입문..React/TypeScript (with- React) 2019. 11. 30. 16:12
TypeScript란?
- 자바스크립트의 superset으로, 다른 언어 위에서 동작하는 언어이다.
- TypeScript = 자바스크립트 + 자바스크립트엔 없는 기능
TypeScript가 하는일
- 개발자들이 하는 실수를 줄여주고, 더 좋은 코드를 짤 수 있게 도와준다.
TypeScript의 여러 기능
// 예시1 => 개발자의 의도와는 달리 "String2"가됨 const plus = (a,b) => a + b; console.log(plus("lalala",2)) // lalala2 // 예시1 해결방안 다른 예 => if문으로 거를수있지만 번거로움 const plus = (a,b) => a + b => { if(typeof a === "string") }; console.log(plus("lalala",2)) // lalala2 // TypeScript const plus = (a:number,b:number) => a + b; console.log(plus("lalala",2)) // 오류발생!에러를 알려줌! // 에러발생함 let hello:string="hello"; hello = 4; //이 함수의 리턴값은 string이여야한다! 실행 결과 O const greet = (name:string, age:number): string => { return `Hello ${name} you are ${age} years old` } console.log(greet("정중식",26)); //이 함수의 리턴값은 string이여야한다! 실행 결과 X => 리턴이없음 const greet = (name:string, age:number): string => { console.log( `Hello ${name} you are ${age} years old`) } console.log(greet("정중식",26)); //마찬가지로 실행결과X const greet = (name:string, age:number): string => { return age; } console.log(greet("정중식",26)); // 인터페이스를 활용한 타입스크립트 const nicolas = { name: 'Nicolas', age:18, hunhry:true } const lynn = { name: 'Lynn', hungry:false } interface IHuman { name:string; age?:number; // ?는 optional value로써 ?의 의미는 number이거나 undefined이다. 라는 뜻 hungry:boolean; } const helloTozHuman = (human: IHuman) => { console.log(`Hello ${human.name}` you are ${human.age} old`) } helloToHuman(nicolas); helloToHuman(lynn); // => 에러발생함 ,lynn안에 age가 없음 // => 이제 오류발생안함 IHuman.age? 를 해줬기 때문
'React > TypeScript (with- React)' 카테고리의 다른 글
TypeScript와 React를 같이쓰는법 (0) 2019.12.01 - 자바스크립트의 superset으로, 다른 언어 위에서 동작하는 언어이다.