TypeScript 입문..

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? 를 해줬기 때문