Typescript / Typescript Type

 

자바스크립트에 타입을 부여한 언어

자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야함 (→ 컴파일 compile)

정적 타입(static)                                                                              동적 타입(dynamic)

컴파일 타임                                                                                       런타임에서 동작할 때

코드 작성 단계에서                                                                             타입 오류 확인

오류 확인

타입스크립트는 자바스크립트 기능 + 그 외에 더 많은 기능 (타입 시스템)

 

Type System

개발 환경에서 에러 잡는 걸 도와줌

오직 개발 환경에서만 활성화 됨

타입 스크립트와 성능 향상과는 관계가 없음

 

? Typescript 사용하는 이유

 

- 자바스크립트 코드를 단순화하여 더 쉽게 읽고 디버그 할 수 있게 함

- 코드 유형 검사를 통해 자바스크립트를 작성할 때 개발자가 일반적으로 겪는 버그를 피하는데 도움이 됨

 

 

Typescript Type

타입이란, value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법

 

모든 value는 type을 가지게 되는데

타입스트립트에서의 타입은

자바스크립트에서 기본으로 제공하는 기본 제공 유형을 상속함

 

• primiive types

Name	Description
string	문자열
numbers	숫자 값
boolean	true / false
null	하나의 값 null
undefined	하나의 값 undefined - 초기화 되지 않은 변수의 기본값
symbol	고유한 상수 값

 

• object types

Name	Description
function	함수
array	배열
classes	클래스
object	객체

 

 

Typescript 추가 제공 타입

• Any 

애플리케이션을 만들때, 잘 알지 못하는 타입을 표현해야할 경우

컴파일 시간에 검사를 통과하길 원할 때 any 타입을 사용

하지만, 최대한 쓰지 않는 게 좋음

let arr:any[] = ["John", 212, true]
arr.push("Smith")
console.log(arr) // ["John",212, true, "Smith"]

• Union

변수 또는 함수 매개변수에 대해 둘 이상의 데이터 유형을 사용할 수 있는데 

이걸 union 타입이라고 함

 

let code: (string | number)
code = 123 //ok
code = "ABC" //ok
code = false // Compiler Error

 

• Tuple

배열의 서브타입 / 크기와 타입이 고정된 배열

 

• Enum

열거형

값들의 집합을 명명하고 이를 사용하도록 만듬

enum PrintMedia {
	Newspaper, //0
    Newsletter, //1
    Magazine, //2
    book //3
}

let mediaType: number = PrintMedia.book  // 3

 

enum PrintMedia {
	Newspaper = 1,
    Newsletter= 50, 
    Magazine = 55, 
    book    // 55+1
}

이렇게 각 값을 할당 해줄 수도 있음

(마지막은 할당을 안해주면 그 직전 값 + 1)

let type:string = PrintMedia(55)  // Magazine

 

❗️enum과 객체의 차이점

object	enum
코드 내에서 새로운 속성 추가	선언할 때 이후 변경 불가
js가 허용하는 모든 타입 가능	문자열/숫자만 허용

 

• void

데이터가 없는 경우

함수가 값을 반환하지 않으면 반환 유형으로 void 지정

↔ any 타입

 

소문자로 사용해줘야하고, 함수의 리턴이 없을 때 사용

function sayHi(): void {
	console.log('Hi')
}
let speech: void = sayHi()
console.log(speech) // undefined

undefined / null 값을 가지게 됨

 

• Never

절대 발생하지 않을 값

일반적으로 함수의 리턴 타입으로 사용됨

function throwError(errorMsg: string): never {
	throw new Error(errorMsg)
}
function keepProcessing(): never {
	while(true) {
    	console.log('I always does something and never')
    }
}

에러를 throw 해주거나, while로 끝이 없는 무한 루프로 돌릴 때

어떠한 값도 가질 수 없음