Typescript 타입 정리

 

1. basic

basic 타입은 number, string, boolean, undefined, null, any, unknown, never, void, object 이 존재한다.

보통 변수를 선언할 경우

 

const name:string = '이름';

const num:number = 4;

 

이렇게 변수명:type 형식으로 작성이 가능하다

 

만약 변수에 하나의 타입이 아닌 다른 타입도 함께 받고 싶다면,

let name: string | undefined; 로 작성이 가능하다. 여기서 | 는 or을 의미한다

 

void는 생략이 가능하며

any, unknown은 어떤 타입이든 다 담을 수 있지만 이러한 이유로 사용을 권장하지 않는 편이다

never은 함수에서 절대 리턴되지 않는 (ex. 에러를 던지거나 while 반복문 사용) 경우에 사용되며

object는 모든 오브젝트 및 배열에 사용은 가능하지만 이 또한 타입이 애매? 하여 더 구체적으로 타입을 명시하는 것이 권장된다

 

2. function

function addNum(x:number, y?:number) {}라는 함수가 있다고 가정할 때

만약 y를 optional 타입으로 지정해주려면 y 옆에? 를 붙여준다 (함수 호출 시, 값을 넣어주지 않으면 undefined로 출력)

 

function getMessage(message: string = 'default') {}

아무런 인자를 받지 못했을 경우, 기본 출력 값으로 'default'가 출력되도록 지정해준다

 

3. array

const animals: string [] = ['cat', 'dog'...];

const animals2:Array <string> =  ['cat', 'dog'...];

 

두 가지 방법으로 array 타입을 지정할 수 있으며 차이점은 string []으로 작성 한 형식에만

readonly가 가능하다. 이는 읽기만 가능한 프로퍼티를 선언할 때 사용하며 만약 다른 값으로 할당하려는 경우

에러가 발생한다

 

4. alias

직접 타입의 이름을 정해줄 수 있다

 

type Text = string;

const name:Text = '이름';

 

5. union

타입 스크립트 공부하면서 현재까지 제일 많이 사용했던 타입이다

OR이라고 생각하면 편하다

 

type Size = 14 | 16 | 20 | 23;

const pickSize:Size = 20;

 

Size라는 타입을 지정하여 이 타입의 옵션에는 14,16,20,23이 존재한다

그리고 pickSize라는 상수에 Size타입을 주어서 위의 4개의 옵션 중 하나를 선택할 수 있다.

 

6. discrimination

여러 타입의 객체들에서 하나의 공통적인 프로퍼티를 만들어 if문이나 switch 같은 조건문에 편리하게 사용이 가능하다

 

type Success = {

message: 'good' }

 

type Fail = {

message: 'bad' }

 

type State = Success | Fail;

 

여기서 State 타입을 이용해서 함수를 만들 때,

 

function Signup (state:Stage) {

if(state.message === 'good') {

....

} else if(state.message === 'bad') {

......

}

 

이렇게 같은 프로퍼티를 이용하여 편하게 조건문 작성이 가능하다.

 

7. intersection

Intersection 타입은 여러 타입을 하나로 결합하여 기존에 존재했던 타입들을 원하는 대로 추가하여 필요한 기능을 갖춘 타입으로

만들 수 있다

 

8. enum

관련된 상수값을 모아서 정의가 가능하지만 타입이 정확하게 보장되지 않는다는 단점이 존재한다

그래서 Enum보단 앞의 union을 통해서 타입을 더 보장하면서 같은 효과를 낼 수 있다

 

9. inference

말 그대로 타입 추론을 뜻한다.

let name = '이름';

이라고 작성하면, name에 :string으로 타입을 지정해주진 않았지만, 대입된 값 자체가 string 타입이라

자동으로 stirng type으로 인식이 된다.

 

원시적인 타입에는 괜찮지만, 함수를 작성할 때는 추천하지 않는다 (타입을 명시적으로 작성하는 것이 좋다)

 

10. assertion

만약 함수의 타입이 지정되지 않은 상태라면 이 함수와 관련된 api 사용이 불가하다

(예를 들어, string타입인데 타입을 모르는 경우라. length를 사용하지 못하는 경우)

하지만 함수에서 리턴되는 값이 string type이라고 확신하는 경우,

as string 또는 <string>으로 타입에 대한 확신을 표시하면 관련 api 사용이 가능해진다

만약 리턴되는 값이 string이 아니면 undefined가 뜬다