타입스크립트 기본 - 추론, 명시, 인터페이스 등

타입 추론 - type inference

 

일단, 타입스크립트는 자바스크립트를 기반으로 한 언어이므로 자바스크립트에서 유효한 코드는 타입스크립트에서도 유효하다.

 

그러나 아래와 같은 코드가 있다면,

 

let a = 5
a = '10'

 

자바스크립트에서는 당연히 되지만, 타입스크립트는 오류를 뱉어낸다.

재할당하려는 변수값이 숫자가 아니기 때문에 a 변수에 할당될 수 없다고 하는 오류가 뜬다.

 

이러한 현상이 나타나는 이유는 타입스크립트의 타입 추론 때문이다.

 

타입스크립트에서는 타입이 없으면 타입 정보를 제공하기 위해 타입을 추론한다.

 

즉, 타입 표기가 없는 경우 타입스크립트에서는 코드를 읽고 분석해 타입을 유추해낸다는 것이다.

 

---

타입 명시 

 

말 그대로 변수를 선언할 때 변수 값의 타입을 명시함해 데이터 타입을 지정하는 것이다.

 

문법은

let a:string = '문자열'

이런 식으로 사용하면 된다.

---

타입 인터페이스

 

만약 함수의 타입이 객체라 

function getStudentDetails(studentId:number): {
	studentId: number;
    studentName: strign;
    age: number;
   } {
   	return null;
   }

이런 식으로 작성하면 복잡해보이는데, 그렇다면 인터페이스를 사용할 수 있다.

 

먼저 인터페이스를 작성하고 이름을 지어준다.

 

interface Student {
}

 

그리고 비어있는 부분을 넣어준다. 그대로 분리할 내용을 넣어주면 된다.

 

interface Student {
	studentId: number;
    studentName: strign;
    age: number;
}

 

그리고 

function getStudentDetails(studentId:number): student{
	{
   	return null;
   }

이렇게 써주면 읽기가 쉬워지는 것이다.

 

<인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다.>

= student 인터페이스에서 정의된 age 프로퍼티가 student type의 반환값에 포함되어야 하는데

없으면 age 프로퍼티가 반환 값에 없다는 에러가 뜬다.

 

이걸 좀 더 유연하게 사용하기 위해서 인터페이스에 정의된 프로퍼티에 ?를 붙여주면 된다.

interface Student {
	studentId: number;
    studentName: strign;
    age?: number;
}

function getStudentDetails(studentId:number): void{
   }

---

메소드는 객체 내에서 선언된 함수고, 인터페이스 내에서 정의할 수 있다.

방법은

1. addComment (comment: string): string;

2. addComment: (comment: string) => string;

 

이렇게 두 방법으로 쓸 수 있다.

---

readonly 프로퍼티는 읽기 전용 프로퍼티로 객체 생성시 할당된 프로퍼티의 값을 바꿀 수 없다.

---

enum, 리터럴 타입

 

만약 데이터 타입을 male, female로 나누고 싶다면 단순히 string으로 정의하는 것 말고도 다른 방법이 있다.

 

먼저 열거형(enum)이 있다.

연관된 아이템을 함께 엮어서 표현할 수 있는 수단이다.

 

enum은

enum GenderType {
	male,
    female,
   }

이렇게 작성해서 필요한 곳에 GenderType을 써주면 된다.

 

그런데 student 인터페이스를 반호나값의 타입으로 가지는 함수에

gender를 그냥 male로 써주면 오류가 생기는데,

GenderType.male로 바꿔줘야 한다.

 

이때 컴파일된 자바스크립트 코드를 보면 숫자가 할당된다. 이것을 숫자 열거형(numeric enum)이라고 한다.

문자형 열거형인(string enum)도 허용하고 있다. 이것은 간단하게 ''를 붙여주면 된다.

 

 

리터럴 타입은 enum보다 훨씬 간단한 방법이다.

gender: 'male' | 'female' | 'genderNeutral',

그냥 이렇게 써주면 끝난다.

 

---

any

 

어떤 타입이든 괜찮단 것이다.

하지만 타입에 관한 더 많은 정보를 명시할 수록 좋다.

그래서 any는 최대한 피하는 것이 좋다.

변수의 타입을 알 수 없어 타입 지정을 할 수 없는 경우 등에 한해 제한적으로 쓰는 것이 좋다.

 

그런데 무슨 타입이 들어올지는 모르는데, 변수의 타입이 숫자 & 문자열 같은 경우 유니언 타입을 쓰는 것이 좋다.

유니언 타입은

let someValue: number | string

이렇게 써주는 것이다.

 

두 타입의 값 중 아무 타입의 값이 할당될 수 있다.

 

그런데 만약 코드를 짤 때 저 위 코드가 반복된다면 같은 코드를 반복해서 쓰는 것보다

코드를 타입으로 지정하고 재활용하는 것이 좋다.

 

이럴 때 type aliases를 쓸 수 있다.

type strOrNum = number | string

type을 쓰고 이름을 지어줘서 필요한 곳에 쓰는 것이다.

 

그런데 숫자도, 문자도 될 수 있으므로 그냥 사용하면 에러가 뜨는데

이것은 typeof 연산자와 조건문을 사용하면 된다.

 

if (typeof price === 'string') { //type of - 변수의 데이터 타입 반환 연산자
	itemPrice = 0;
   } else {
   itemPrice = 0;
   }
 }

그럼 코드의 에러가 사라진다.

유니언 타입을 사용할 때 이렇게 type of을 사용하여 코드 검증을 수행하는 것을 

타입스크립트에서는 타입가드라고 부른다.

 

---

타입스크립트에서의 함수 작성

 

타입스크립트에서는 함수를 작성하기 위해 

함수 자신이 반환될 타입과, 함수 매개변수의 타입을 명시해줄 수 있다.

 

먼저 함수 최종 리턴값인 함수의 반환 타입을 명시하는 것은

function 함수이름(매개변수1, 매개변수2): 함수의 반환타입//여기에 명시 {
}

이렇게 하면 된다.

 

아무것도 반환하지 않는 함수의 경우 void를 써주면 된다. (void는 아무것도 반환하지 않는 함수의 반환값으로만 사용)

 

 

이번엔 함수 매개변수의 타입을 명시해주자.

function 함수이름(매개변수1:string, 매개변수2:string): 함수의 반환타입//여기에 명시 {
}

이렇게 해주면 된다. 다른 타입을 전달하려고 하면 에러 메세지가 뜬다.

그런데 매개변수1만 전달하고 싶다면 매개변수2를 빼고 전달하면 안 된다.

타입스크립트는 함수에 정의된 모든 매개변수가 함수에 필요하다고 가정하기 때문이다.

 

그래서 이런 문제를 설명하고 싶다면

function 함수이름(매개변수1:string, 매개변수2?:string): 함수의 반환타입//여기에 명시 {
}

이렇게 하면 된다.

 

기본 매개변수도 만들 수 있다.

function 함수이름(매개변수1:string, 매개변수2 = 'name'): 함수의 반환타입//여기에 명시 {
}

이렇게만 써주면 된다.

 

 

 

유튜브 강의 영상을 보고 정리했는데 쉽고 잘 알려주셔서 좋았다!

https://youtu.be/VJ8rvsw2j5w?si=45_EzYsYrWlrkYdl