타입스크립트_특징 간단 정리

  let name :string = "kim"

• 변수를 만들 때 타입 지정이 가능하다.
• 변수명 : 타입명의 형식으로 기록한다.
• 타입으로 쓸 수 있는 자료형은 string, number, boolean, bigint, null, undefined,[].{} 등이 있다.

---

  let name :string = "kim"
  name = 123;

이렇게 타입이 변경되면 에러 메세지를 띄워 타입관련 버그들을 찾아 없애준다.

---

  let name :string[] = ['kim', 'park']
  let age :{ age : number } = { age : number }

array 혹은 object 자료는 이렇게 타입지정을 해준다.

---

  let name :string | number = 'kim';

이 변수에 여러 타입의 데이터가 들어올 수 있다면 | 기호를 이용해 연산자를 표현할 수 있다.

---

  type nameType = string | number;
  let name :nameType = 'kim';

type키워드를 이용해 타입을 변수처럼 사용 가능하다.

---

  type NameType = 'kim' | 'park';
  let name :NameType = 'kim';

string, number 뿐 만 아니라 나만의 타입을 만들어 사용 가능하다. 이렇게 원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim', 'park'만 들어올 수 있다. 이를 literal type이라고 한다.

---

  function 함수명(x :number) :number{
    return x * 2
  }

• 함수는 파라미터와 return 값이 어떤 타입일지 지정가능하다. 살수로 다른 타입이 파라미터로 들어오거나 return될 경우 에러를 발생시킨다.
• 함수는 return 타입으로 void를 설정가능한데 return이 없는지 체크할 수 있는 타입이다.

---

  //에러
  function 함수명(x :number | string) {
    return x * 2
  }

  //가능
  function 함수명(x :number | string) {
    if (typeof x === 'number'){
      return x * 2
    } 
  }

타입스크립트는 현재 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없다. 항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 쓸 수 있다.

---

  type Member = [number, boolean];
  let john:Member = [100, false]

array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면 tuple 타입을 쓰면 된다. 대괄호 []안에 들어올 타입을 차례로 적어주면 된다.

---

  type MyObject = {
    name? : string,
    age : number
  }
  let 철수 :MyObject = { 
    name : 'kim',
    age : 50
  }

• object 타입도 정의가 너무 길면 type키워드로 변수에 담아 사용 가능하다. 특정 속성이 선택사항이면 물음표를 기입할 수 있다.
• 비교적 최근에 나온 interface 키워드를 사용해도 무방하다.

---

  type MyObject = {
    name? : string,
    age : number
  }
  let Cheolsu :MyObject = { 
    name : 'kim',
    age : 50
  }

object안에 어떤 속성이 들어갈지 아직 모른다면 전부 싸잡아서 타입 지정이 가능하다. 이를 index signature 라고 한다.

---

  class Person {
    name;
    constructor(name :string){
      this.name = name;
    }
  }

class도 타입설정이 가능하다. 중괄호 내에 변수를 미리 만들어놓아야 constructor 안에서 this.name 이렇게 사용 가능하다.

---