[TypeScript] TypeScript 기본지식

🎧 타입 지정

변수 만들 때 타입을 지정해 줄 수 있음

let name :string = 'Mino'

변수명 :타입명 의 형식으로 사용

 

타입으로 사용 가능한 것들

string, number, boolean, bigint, null, undefined, [], {}

 

타입을 지정하는 이유?

JS에서는 에러 메세지를 모호하게 알려주지만,

타입을 지정해서 사용하면 어디서 에러가 나는지 알기 편함

= 타입 관련 버그가 생겨도 빠르게 디버깅 가능

let name :string = 'Mino'
name = 123   // 여기서 에러가 생김

 

만약에 여러가지 타입이 가능하다면?

해당 변수에 여러가지 타입의 데이터가 들어 올 수 있다면 | 기호를 사용함

let name :string | number = 'Mino'
name = 123   // 이번엔 에러가 생기지 않음

 

타입도 변수로 가능함

type이라는 키워드를 이용해서 타입을 변수로 사용 가능!

type nameType = string | number
let name :nameType = 'Yong'

 

근데 여기서 string, number말고도 내가 커스텀도 가능함

type nameType = 'Yong' | 'Bok'
let name :nameType = 'Yong'   // 여긴 'Yong'과 'Bok'밖에 못들어감

이런식으로 쓰는 걸 literal type이라고 함(문서 참고)

 

🎨 함수

TypeScript는 함수의 parameter과 return값도 타입을 지정해줄 수 있음

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

만약 다른 타입이 파라미터나 return되면 에러가 남

 

void 타입

💡 void는 결과 값을 반환하지 않는 함수에 설정합니다.
반면 결과 값을 반환하는 함수의 경우 명시적으로 반환 값의 타입을 기술할 수 있습니다.

라고 가이드북이 그럽니다

그니까 결과 값이 없다면, void 써주면 되는 듯

 

함수에서는 타입을 확실히 하자

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

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

TypeScript에서는 지금의 변수 타입이 확실하지 않다면 연산이 안됨

항상 지금 타입을 체크해주자

 

🛒 array와 object

array와 object에서는 기본적으로 다음과 같이 타입을 지정해 줌

let name :string[] = ['Yong', 'Bok']
let age :{ age : number } = { age : number }

 

array에서 자료마다 타입이 다르면

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

 

object도 타입이 너무 길어진다면 → 빼주자

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

• 여기서 물음표는 뭐임?
• 어떤 속성이 선택 사항이면 ?를 이용해서 나타냄

만약, object에 어떤 속성이 들어갈지 모르겠다면 한번에 지정 가능

→ index signature

type MyObject = {
  [key :string] : number,
}
let 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

 

Class도 가능

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

중괄호 내에 미리 name 이렇게 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용 가능