[코드캠프 2주차]Javascript vs Typescript

자바스크립트와 타입스크립트의 차이점은 자바스크립트에 강제성을 둔다는 개념이라 생각하면 된다.
자바스크립트는 기존의 변수 안에 아무거나 다넣을수 있다. 하지만 타입스크립트는 타입에 대한 강제성을 두기 때문에, 좀더 안전한 코드 작성이 가능하다.
타입스크립트는 타입만 설정해줄분 브라우저가 인식하는 것은 자바스크립트로 인식한다.

//for JS
let aaa = "MIN"
aaa = 123;
console.log(a)
//123

//for TS
let aaa : string = "안녕하세요"
aaa = 123'
//에러

[TS의 객체 타입 선언]

TS 에서 객체 타입을 지정해야 한다면 interface를 선언하여 사용한다.
가상의 객체에 맞는 타입들을 interface를 통해 설정 해 둔 다음에 그 부분을 이용하여 타입을 지정해 준다.

interface IProfile{
  name:string;
  age:number;
}
//사용
let profile:IProfile = {name:"철수",age:13}

[.ts와.tsx의 차이]

먼저 .ts는 뭐냐면 일반적으로 자바스크립트에서 쓰이는 부분이다.
.tsx는 컴포넌트를 의미한다. 주로 Container 부분이나 presenter 부분에서 tsx을 사용한다.

이 두가지를 알기 전에 뒷자리의 X의 뜻을 알아봐야한다.
뒷자리 X의 뜻은 XML의 약자이다. Xml은 (extensible Markup Language) 즉 확장 가능한 마크업 언어 라는 뜻이다.

태그를 달아서 사용하는 마크업이긴 마크업인데 직접 스스로 확장이 가능해지는 마크업 언어이다.
즉 태그에다가 자기 스스로 직접 명시해서 사용할수 있다는 것이다.

[타입스크립트의 기본적인 타입 지정 방법]

//타입스크립트는 굳이 별도의 타입을 지정해주지 않아도 자동으로 값이 들어간 타입으로 설정된다
  //이러한 부분을 타입추론 이라고 한다.
     let aaa: String = "안녕하세요";
     aaa = 3;

  //타입명시
  /  let bbb:String = "반갑습니다"

  //문자타입
  //미리 선언만 해두고 let의 기능은 똑같이 동작되게 할수 있음
   let ccc:String
   ccc = 3

  //숫자타입
   let ddd:Number = 10;
   ddd =1;

  //불린타입
   let eee:Boolean = true
    eee = false

  //배열타입
    let fff :Number[] = [1,2,3,"안녕하세요"];
    let ggg :String[] = ["ccc","ccc","cccc",13];

  //하나의 배열에 여러가지 값을 넣고 싶을때는 String|Number 로 사용
     let hhh : (String|Number)[] = [1,2,3,"안녕하세요"];

  //객체타입
  //타입을 명시해 준다면 무조건 interface 한 타입 부분을 무조건적으로 명시 시켜줘야한다.
   interface IProfile {
     name: String;
     age: String | Number;
     school: String;
     hobby?: String; // 물음표를 찍으면 얘는 있어도 좋고 없어도 좋다
   }
   let profile: IProfile = {
     name: "철수",
     age: 8,
     school: "다람쥐초등학교",
   };

//   profile.age = "8살";

//함수타입
//함수타입에서는 받아올 값에 타입을 지정해준다 
 const add =(money1:number,money2:number,unit:string):string=>{
 return money1 + money2 + unit
 }
add(1000,2000,"원");