🐧Typescript란?

• Typescript는 Java Script 에 타입을 부여한 언어이다.
• Java Script의 확장된 언어이다.
• 동적인 자바스크립트 언어에 타입을 미리 부여함으로써 에러를 미리 잡을 수 있다.
• 한마디로 자바스크립트에서 타입으로 인해 발생되는 에러를 막아주기 위해 생겨난 것으로 생각할 수 있을거 같다.

🐤Typescript를 쓰는 이유

typescript 를 쓰면서 가장 좋은 이유는 타입을 틀리게 해주지 않는다는 장점이 제일 큽니다.

예를 들면,

function sum(a, b) {
  return a + b;
}

보면 두 숫자를 더해주고 싶은것으로 나타낼 수 있습니다. 그러면 한번 a,b에 숫자를 대입해보겠습니다.

sum('30', '30'); // 3030

60이 나와야 했을것이 3030이 나왔습니다. 왜냐하면 타입을 사전에 지정하지 않는 자바스크립트의 동적 타이밍

에 의한 것 때문입니다.

이것을 타입스크립트 로 바꾸면

function sum(a: number, b: number) {
  return a + b;
}

인자들을 다음과 같이 타입명시를 해줄 수가 있습니다. 위와 같은 값을 그대로 넣어주게 된다면

sum('30', '30'); // Error Ts2345

Number 가 아닌 String 형 을 넣어줬기 때문에 바로 오류를 찾을수 있습니다.

이렇듯 자바스크립트에서 놓치기 쉬운 오류를 찾을 수 있게 해주고 이는 디버깅을 쉽게 해준다 라는 말로 해석할 수 있습니다. 그리고 개발자의 의도를 코드로 명확하게 기술할 수 있습니다.

타입스크립트의 정의에 대해 짧게 보았는데 어떻게 쓰는것이냐 는 아래와 같이 코드로 적어보았습니다.

🐤한눈에 알아보기!

Typescript 를 한눈에 알아보자!!

// 타입 추론
let aaa = "안녕하세요!"
// aaa = 3

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

// 타입 명시가 필요한 상황 => 서로 다른 타입을 동시에 사용할 때!
let ccc: number | string = 1000
ccc = "1000원"

// 숫자 타입
let ddd: number = 10
// ddd = "철수"

// boolean 타입
let eee: boolean = true
// eee = "철수"
eee = false
// eee = "false" // true 로 작동함

//거짓을 나타낸는 것 
0
""
NaN
null
undefined

//참을 나타내는 것
1
-1
" "  //==> 문자열 안에 하나라도 들어가있는경우 공백포함 
"false"  // 참 왜냐 문자열안에 들어갔기 때문!

//배열타입
let fff:number[] = [1,2,3];
let ggg:string[] = ["철수", "영희", "훈이", "10"]
let hhh: ( string | number )[] = ["철수", "영희", "훈이", 10] // 여기는 () 생략 불가

//객체타입
interface IProfile {  
    name : string
    age : number | string
    school : string
    hobby? : string   // ?는 있다가 없어도 되는 메서드 
}

const profile: IProfile = {
    name : "철수",
    age: 8,
    school : "다람주초등학교"
}
profile.name = "훈이" //타입추론으로는 이것만 가능
profile.age = "8살" // 못바꾼다 이미 숫자열이기 때문에 스트링형식으로 재할당 하지 못한다.하지만 interface 추가해주면 가능!
profile.hobby = "수영" 

// function type
//인자 안에는 any(타입추론이 되지 않는 것)이기 때문에 타입명시를 해줘야 한다!
// 함수타입 ==> 어디서 몇번이든 호출가능하므로 타입추론 할수 없음! 반드시 타입명시 필요
function add(num1:number, num2:number, unit:string){
    return num1 + num2 + unit
}

const result = add(1000, 2000, "원") // 결과의 리턴 타입도 예측 가능!!!
add(1000, 2000, "원")

const add2 = (num1:number, num2:number, unit:string) => {
    return num1 + num2 + unit
}

const result2 = add(1000, 2000, "원")

//any 타입 (자바스크립트와 동일!) 가급적이면 사용 하지 말것.
let qqq:any = "철수"
qqq = 123
qqq = true
qqq = []