[노마드코더] 타입스크립트로 블록체인 만들기 1. 타입스크립트 문법_타입

기본적으로는 ts는 js와 비슷한 문법을 사용한다. 하지만 js에서는 그냥 실행하게 뒀던 코드들도 ts에서는 메세지로 틀렸다고 알려준다.

// 자바스크립트
const player = {
  name: 'bong'
}

player.hello() // undefined

// 타입스크립트
const player = {
  name: 'bong'
}

player.hello() // 실행 전에 hello()가 없다고 메세지를 띄워 줌

 

타입 지정해주기

타입을 지정해줄 때는 : 을 사용하면 된다.

const userName : string = "bong";
const userAge : number = 72;
const numsArr : number[] = [1, 2, 3];

 

하지만 매번 변수를 선언할 때마다 타입을 지정해주는 것 보다는 타입스크립트가 알아서 추론하도록 맡기는 편이 더 좋다.

const userName = "bong";
const userAge = 72;
const numsArr= [1, 2, 3];

userAge = 'age'; // 이렇게 해도 타입스크립트가 틀렸다고 해줌

 

 

Alias 타입

객체를 선언할때마다 타입을 지정해주기보다 alias타입에 저장해두고 편하게 사용할 수 있다.

// 하나하나 적었을 때
const player1 : {
  name : string,
  age : number
} = {
  name : 'bong',
  age : 62
}

const player2 : {
  name : string,
  age : number
} = {
  name : 'kim',
  age : 20
}

// alias 타입을 사용했을 때
type Player = {
  name : string,
  age : number
}

const player1 : Player = {
  name : 'bong',
  age : 62
}

const player2 : Player = {
  name : 'kim',
  age : 20
}

 

이렇게 옵션을 줄 수도 있다.

// alias 타입을 사용했을 때
type Player = {
  name : string,
  age? : number // optional
}

const player1 : Player = {
  name : 'bong',
  age : 62
}

const player2 : Player = {
  name : 'kim'
}

 

alias 타입은 어떤 데이터 타입이든 만들 수 있다. 이렇게 해줄수도 있다. 하지만 과하게 사용하는 것은 좋지 않다.

type Name = string;
type Age = number;
type Player = {
  name : Name,
  age? : Age
}

const player1 : Player = {
  name : 'bong',
  age : 62
}

const player2 : Player = {
  name : 'kim'
}

 

 

함수에서 return 값의 타입을 정해주기

이렇게 파라미터에 타입 값을 정해줄 수 있다. 인자를 문자로 받아서 key가 name이고 값도 name인 객체를 반환한다고 했을 때 이 객체에 age를 할당해주려고 하면 에러메세지가 뜬다. 이 문법은 타입스크립트가 보기에는 틀린 문법이기 때문이다.

function playerMaker(name:string) {
  return {
    name
  }
}

const bong = playerMaker(bong);
bong.age = 60; // age가 없다고 에러메세지를 보냄

 

alias타입인 Player로 타입을 정해주고 싶다면 (매개변수) 뒤에 적어주면 된다.

type Name = string;
type Age = number;
type Player = {
  name : Name,
  age? : Age
}

function playerMaker(name:string) : Player { // (parameter:type) : alias type
  return {
    name
  }
}

const bong = playerMaker(bong);
bong.age = 60; // Player에 age가 지정되어있기 때문에 할당 가능함

 

readonly property

값을 변경하지 못하게 하려면 readonly 속성을 적어서 읽기 전용으로 만들 수 있다.

type Name = string;
type Age = number;
type Player = {
  readonly name : Name,
  age? : Age
}

function playerMaker(name:string) : Player {
  return {
    name
  }
}

const kim = playerMaker(kim);
kim.name = 'bong' // name은 readonly이기 때문에 재할당하려고 하면 에러메세지를 띄움

 

배열에도 적용할 수 있다.

const nums : readonly number[] = [1, 2, 3, 4]
nums.push(5) // readonly기 때문에 push하려고 하면 에러메세지를 띄움

 

Tuple

최소한의 길이를 가져야하고 특정 위치에 특정 타입이 있어야 한다. readonly와 결합해서 사용할 수 있다.

// 길이가 최소 3개여야하고 문자, 숫자, 불리언 타입이 순서대로 들어와야함
const player : [string, number, boolean] = ['bong', 60, true]

player[0] = 1 // 문자를 할당해야하는데 숫자를 넣으려고 하면 에러메세지를 보여줌

 

undefined와 null도 지정해줄 수 있다.

const a : undefined = undefined;
const b : null = null;

 

any

빈 값을 작성해주면 타입스크립트는 any라는 타입으로 추론한다. any는 아무 타입이나 될 수 있다. any는 타입스크립트가 아닌 자바스크립트처럼 작동한다고 생각하면 된다.

const a : any[] = [1,2,3,4]
const b : any = true

a + b // 자바스크립트처럼 작동 가능함

 

unknown

자바스크립트에는 없고 타입스크립트에만 존재하는 타입이다. 어떤 타입인지 모르는 변수의 타입을 정할 때 사용한다. 변수를 사용하려고 할 때는 무슨 타입인지 확인을 하고 사용해야한다.

let a : unknown;

let b = a + 1 // 다짜고짜 이렇게 사용하면 안됨, 에러메세지가 뜸. a가 무슨 타입인지 모르기때문에

// 이런식으로 사용해야함
if (typeof a === 'number') {
  let b = a + 1
}
if (typeof a === 'string') {
  let b = a.toUpperCase()
}

 

void

자바스크립트에는 없고 타입스크립트에만 존재하는 타입이다. 아무것도 return하지 않는 함수를 대상으로 사용한다.

function hello() : void {
  console.log('hi')
}

 

하지만 타입스크립트가 알아서 인식하기 때문에 굳이 써주지 않아도 된다.

function hello() {
  console.log('hi')
}

 

 

never

자바스크립트에는 없고 타입스크립트에만 존재하는 타입이다.  그렇게 많이 사용하지는 않는다. 함수가 절대 return하지 않을 때 사용한다. 함수에서 예외상황이 발생할 때 같은 경우이다.

function makeError() : never {
  throw new Error("xxx")
}

 

또는 받는 타입이 두가지 이상일 때 발생할 수 있다.

function hello(name:string|number) {
  if(typeof name === 'string'){
    name
  } else if (typeof name === 'number') {
    name
  } else {
    name // 절대 실행되지 않을 것이기 때문에 never
  }
}