TS - 새로운 타입과 기본 문법

1. 타입 추론과 타입 표기

1-1. 타입 추론

타입스크립트의 타입 체커는 추론을 통해 타입을 정한다.

let a = 'hello'
let b = false
let c = 1
let d = [1,2,3]

 

위 코드에서 각 변수의 타입은 타입 체커에 의해 추론되어 정해진다.

a - string

b - boolean

c - number

d - number[ ]

---

1-2. 타입 표기(Type Annotation)

개발자가 직접 타입을 명시할 수 있다.

: type 을 사용한다.

let a : string = 'hello'
let b : boolean = false
let c : number = 1
let d : number[] = [1,2,3]

 

가능하다면 타입 체커가 추론을 통해 타입을 지정하도록 하는게 좋다.

코드의 길이나 가독성이 좋아진다.

 

타입 체커가 추론할 수 없는 상황이거나 명확한 이유가 있다면

명시적으로 타입을 표기한다.

---

2. Optional Parameter ( ? )

선택적인 프로퍼티, 파라미터를 만들어야 한다면  '?' 를 사용할 수 있습니다.

const player : {
  name: string,
  age?: number
} = {
  name: 'bob'
}

위 코드에서

age 프로퍼티의 type은 number, undefined 입니다.

때문에 age 프로퍼티의 값을 전달하지 않아도 에러가 발생하지 않습니다.

---

3. Type alias

자주 사용되는 타입을 변수의 형태로 지정할 수 있습니다.

type 변수명 = 타입 의 형태로 사용합니다.

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

const player1 : Player = {
  name: 'bob'
}

---

4. 함수의 arguments, return type

함수 코드에서는 인자의 타입과, 반환되는 값의 타입을 명시할 수 있습니다.

함수의 return type은 파라미터 다음에 명시합니다. 

ex) function xxx ( ) : type { }

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

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

const bob = playerMaker('Bob')
bob.age = 27

위 코드에서

playerMaker 함수는 Player type을 return 하므로

함수의 실행으로 생성된 객체 bob에서

optional property인 age 프로퍼티를 추가할 수 있습니다.

---

화살표 함수의 경우 다음과 같이 명시합니다.

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

const bob = playerMaker('Bob')
bob.age = 27

---

5. readonly 속성

readonly 속성은 type 정의나 interface 정의에서 사용할 수 있습니다.

해당 값을 읽기전용으로 만들 수 있습니다.

type Player = {
  readonly name: string,   // --> readonly 적용
  age?: number
}

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

const bob = playerMaker('Bob')
bob.name = 'god' // Cannot assign to 'name' because it is a read-only property.

 

---

6. Tuple

타입스크립트에서 고정된 길이와 각 요소의 타입이 지정된 배열을 Tuple이라 부릅니다.

const player: [string, number, boolean] = ['bob', 27, false]

---

7. any

모든 타입을 허용하는 타입을 의미합니다.

떄문에 JS 프로젝트를 TS프로젝트로 점진적 마이그레이션 할때 유용합니다.

 

하지만

TypeScript의 타입 체커로 부터 자유로워지는 것은 반대로 보호를 받지 못하는 것과 같습니다.

const a : any[] = [1,'2',true]
const b : any = false

console.log(a + b) // "1,2,truefalse"

위 코드처럼 의도한 바가 아닐수도 있는 코드가 에러없이 실행 될 수 있습니다.

때문에 명확한 이유로 any를 사용해야 합니다.

---

8. unknown

해당 값이 어떤 type인지 알수 없는 경우 unknown 타입을 사용합니다.

let a : unknown = 'hello'

a.toUpperCase() // error : object is of type unknown

unknown의 경우 타입체커는 해당 값의 타입을 알지 못하므로

타입을 체크하는 코드로 타입 확인 후 사용가능합니다.

let a : unknown = 'hello'

if(typeof a === 'string'){
  console.log(a.toUpperCase())
} 

// HELLO

---

9. void

void는 아무것도 return하지 않는 함수를 대상으로 사용합니다.

function hello(){
  console.log("Hello!")
}

// function hello() : void

---

10. never

never는 모든 타입의 하위타입 입니다.

때문에 어떤값도 never타입에 할당할 수 없습니다.

 

 

함수가 절대 return하지 않을 때

function error(text: string): never{
  throw new Error(text) 
}

 

특정 타입 값을 할당받지 않도록 할 때 사용합니다.

type NonString<T> = T extends string ? never : T;

 

 

 

 

운동하고 싶다