[TypeScript][노마드코더] #2 OVERVIEW OF TYPESCRIPT 정리(1)

참고로 티스토리에서도 TypeScript 코드블럭을 지원한다.

 

변수의 타입

basic

let a = 1;
let b = "123";
let c = true;

let a: number = 1;
let b: string = "123";
let c: boolean = true;

타입을 명시해줘도 되지만 

TS에서 알아서 추론하여 지정해주기 때문에 웬만하면 직접 명시해주지 않는걸 추천한다.

 

let a = [1, 2];
let b: string[] = ["123", "abc"];  // let b = ["123", "abc"]
let c: boolean[] = [true];  // let c = [true]

let d: number[] = [];

배열도 마찬가지. 다만 d처럼 명확히 알 수 없을 경우에는 명시해주는 것이 좋다.

 

Optional

const player: {
  name: string, 
  age?: number
} = {
  name: "seonghun"
}

Object인 player에 대해 타입을 지정해줄 수 있다.

이 때, age가 없을 때도 있음을 고려해 뒤에 ?를 붙여 optional로 만들어 줄 수 있다.

 

Alias

위에서 만든 Player Object처럼 여러개의 Object가 존재할 경우

const A_player: {
  name: string, 
  age?: number
} = {
  name: "AAA"
}

const B_player: {
  name: string, 
  age?: number
} = {
  name: "BBB", 
  age: 15
}

이렇게 만드는건 좋지 않다. 대신 이렇게 쓸 수 있다.

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

const A_player: Player = {
  name: "AAA"
}

const B_player: Player = {
  name: "BBB", 
  age: 15
}

이렇게 하면 Player 타입에 대해 재사용이 가능해진다.

 

return값의 타입

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

function playerMaker(name: string) {
  return {
    // name: name
    name  // 이렇게 생략 가능
  }
}

const seonghun = playerMaker("seonghun")
seonghun.age = 12  // Error!

return하는 값중 age에 대해 따로 타입을 지정하는 부분이 없기 때문에 

seonghun.age는 오류가 발생한다.

하지만 return 타입을 아래와 같이 지정해주면 문제는 해결된다.

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

const seonghun = playerMaker("seonghun")
seonghun.age = 12

const playerMaker = (name: string): Player => {
  return {
    name
  }
}

arrow function을 쓴다면 이렇게도 표현 가능

 

readonly 속성

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

Player의 name을 수정하려고 시도하면 TypeScript가 막게 된다.

const playerMaker = (name: string): Player => {
  return {
    name
  }
}
const seonghun = playerMaker("seonghun")
seonghun.name = "nico"  // Error!

 

또 다른 예시

const numbers: readonly number[] = [1, 2, 3, 4]
numbers.push(5)  // Error!

 

Tuple

const player: [string, number, boolean] = ["seonghun", 1, true]

Tuple(튜플)은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.

Tuple 타입을 사용하면

• 항상 정해진 개수의 요소
• 원하는 순서에 맞는 타입

에 맞는 array를 지정할 수 있다.

 

null, undefined

let a: undefined = undefined
let b: null = null

이렇게 지정해줄 수도 있으며

 

type Player = {
  age?: number
}

위에서 다뤘던 optional 타입에 대해 마우스를 갖다 대면

number 또는 undefined 타입이라는 것을 확인할 수 있다.

 

any

비어있는 값을 쓰면 any 타입이 된다.

any 타입은 아무 타입이나 될 수 있다. TypeScript를 빠져나오고 싶을 때 사용하는데, 

쓰지 않는 것을 추천한다.