[Typescript 기본개념] JS보다 타입이 더 많은 TS

드디어 타입스크립트를 배우게 되었다.

CSS 만 사용하다가 SCSS를 배웠을 때, CSS 만 사용하던 시절이 답답하게 느껴졌었다마치 이처럼 JS 도 TS 배우다가 JS 만 쓰려고 하면 답답해지겠지,,?

 

조금 더 확장된 기술을 배우는 것 같아서 기쁜 마음으로 강의를 수강했다.

 

타입스크립트는 무엇일까? 그리고 타입스크립트를 사용하는 이유는 무엇일까?

타입스크립트를 정적 타입의 컴파일 언어라고 하는데 

쉽게 말하자면 브라우저가 TS 를 직접적으로 읽지 못해서 꼭 컴파일 과정을 거쳐야 하는 언어이다

그리고 컴파일 후에는 브라우저나 Node.js 환경에서 동작한다

 

그리고 정적 타입?? 은 무슨 말일까

동적 / 정적 타입은 오류 확인을 어느 과정에서 할 수 있는지 이 부분이 차이점이다

 

자바스크립트(동적 타입) - 런타임에서 동작할 때 타입 오류 확인

타입스크립트(정적 타입) - 코드 작성 단계에서 타입 오류 확인

 

그렇다면 당연히!! TS 가 작업할 때 훨씬 편하겠다는 생각이 들었다

사실 스크립트 작성할 때 내가 제일 많이 내는 오류가 타입에 관련된 것이다

배열 메소드에 넣어야 할 데이터를 문자열로 넣는다던지

문자열을 배열로 바꿔야 하는데 그냥 사용했다던지

 

 

 

타입스크립트는 자바스크립트의 슈퍼셋 super() 으로 완벽하게 호환하며 자바스크립트가 더 상위 개념이다

위 그림처럼 TS는 JS의 기능을 포함하되 더 확장된 기능들을 제공한다

그리고 대부분의 라이브러리, 프레임워크가 타입스크립트를 지원하기도 한다

 

본격적으로 타입 지정을 어떻게 할 수 있는지! 그리고 기존 타입에서 또 추가된 타입은 무엇이 있는지 알아보자

 

number, boolean, null, undefined

null이나 undefined는 지정해 줄 필요가 거의 없다

 

// 숫자
let num: number
let integer: number = 6
let float: number = 3.14
let infinity: number = Infinity
let nan: number = NaN

// 불린
let isBoolean: boolean
let isDone: boolean = false

// Null / Undefined
let nul: null
let und: undefined

// null 이나 undefined 는 사용성이 별로 없음

 

---

 

배열

배열은 꼭 타입을 지정해줘야 한다

 

const fruits: string[] = ['Apple', 'Banana', 'Cherry']
const numbers: number[] = [1, 2, 3, 4, 5, 6, 7]
const union: (string|number)[] = ['Apple', 1, 2, 'Banana']

 

---

 

객체

객체를 생성할 때마다 매번 타입을 지정해 주기에는 번거롭기 때문에 interface를 사용한다

 

const obj: object = {}
const arr: object = []
const func: object = function () {}

const userA: {
  name: string
  age: number
  isValid: boolean
} = {
  name: 'Heropy',
  age: 85,
  isValid: true
}

//객체가 여러개일 경우 매번 작성할 수 없기 때문에

interface User {
  name: string
  age: number
  isValid: boolean
}

const userA: User = {
  name: 'Heropy',
  age: 85,
  isValid: true
}

// 대신 다른 속성 추가 불가

 

---

 

함수

타입을 지정해주는 함수를 '타입 가드' 혹은 '타입 체크 함수'라고도 불린다

 

const add: (x: number, y: number) => number = function (x, y) {
  return x + y
}

const a: number = add(1, 2)

// 위 함수를 어떻게 바꿀 수 있냐면
const add = function(x: number, y: number): number {
  return x+y
}

const hello: () => void = function () {
  console.log('Hello world')
}

// 위 함수를 어떻게 바꿀 수 있냐면
const hello = function (): void {
  console.log('Hello world')
}

const h: void = hello()

// void 가 무엇인가?
함수에 리턴할 값이 없으면 void 라는 타입을 명시함으로써 
이 함수에 타입을 지정하는 것은 의미가 없음을 알려줌

 

---

 

Any (사용성 X)

말그대로 Any type is possible

 

let hello: any = 'Hello world'
hello = 123
hello = false
hello = null
hello = {}
hello = []
hello = function () {}

// any는 ts 쓰는 의미가 사라질 수 있어서 쓰지 않는 것이 필요함

 

---

 

Unknown

런타임에 어떤 값이 될지 모르는 값을 나타내는 타입

 

const a: any = 123
const u: unknown = 123

// any 는 아무거나 들어갈 수 있다
// unknown 은 일단은 알 수 없다는 

const any: any = a
const boo: boolean = a
const num: number = a
const arr: string[] = a
const obj: { x: string, y: number } = a

 

---

 

Tuple

각 요소의 타입이 미리 정해진 순서를 가지는 데이터 구조이다

 

const tuple: [string, number, boolean] = ['a', 1, false]
const users: [number, string, boolean][] = 
[[1, 'Neo', true],[2, 'Evan', false],[3, 'Lewis', true]]

// 배열과 흡사해보임
// 갯수와 타입의 순서를 정해주고 있음
// 사용자의 정보를 담을 때 유용하게 사용하기도 함 (사용도가 높지는 않음)

 

---

 

Void

함수가 값을 반환하지 않음을 나타내는 타입이다

 

function hello(msg: string): void {
  console.log(`Hello ${msg}`)
}

const hi: void = hello('world')

// 아무런 값도 반환하고 있지 않음

 

---

 

Never

절대로 발생하지 않는 값을 나타내는 타입이다

 

const nev: [] = []  이것과
const nev: [never] = [] 이것과 같음

nev.push(3)  -->  숫자를 넣어주지 못함

// 배열의 타입을 정해주지 않으면 아무것도 값을 넣을 수 없음

 

---

 

Union

두 개 이상의 다른 타입을 허용하는 타입이다. | 기호를 사용해서 타입을 union 시킨다

 

let union: string | number
union = 'Hello type!'
union = 123
union = false  -->  오류

 

---

 

Intersection

두 개 이상의 타입을 결합하는 방법 중 하나이다. & 기호를 사용해서 타입을 교차시킬 수 있다

 

interface User {
  name: string,
  age: number
}

interface Validation {
  isValid: boolean
}

const heropy User & Validation = {
  name: 'Neo',
  age: 85,
  isValid: true
}