타입스크립트 유틸리티 타입에 대해 알아보자.
이걸 다 외우려고 하는 건 너무 무식한 것 같고 필요할 때마다 찾아서 보는게 젤로 좋을 듯 하다.
let p1: {name: string, age: number} = {
name: "elice",
ageL 13
};위처럼 타입을 직접 정의할 수 있지만, 매번 타입을 정의하는 것은 불편하기 때문에 아래와 같이 타입 자체에 이름을 직접 붙여 변수를 만들 수 있다.
type Human = {
name: string;
age: number;
};
let p2: Human = {name: "changhyeonOh", age: 25};여기서 name과 age를 프로퍼티라고 하고 인터페이스와 유사하다.
그래서 유틸리티 타입이란 이미 정의해 놓은 타입을 변환하고 싶을 때 사용하면 좋은 타입이다.
유틸리티 타입을 이용하면 기존의 타입을 이용해 새로운 타입을 만들 수 있다.
(인터페이스에도 유틸리티 타입 적용이 가능하다.)
유틸리티 타입에서 사용되는 <T>와 같은 꺾쇠 형태는 제네릭 문법이다. 제네릭이란 어떤 함수나 클래스가 사용할 타입을 생성 단계가 아닌 사용 단계에서 정의하는 프로그래밍 기법이다
Partial<T> : T의 프로퍼티를 선택적으로 구성할 수 있다.
ReadOnly<T> : T의 프로퍼티를 읽기 전용으로 설정하여, 값을 재할당 하는 경우 에러가 발생한다.
Record<K, T> : 프로퍼티 키를 K, 값을 T로 하는 타입을 만들 수 있다.
-여러 키들을 지정하기 위해 타입을 선언한 방식
(type Page = 'home' | 'about' | 'contact';)처럼 두 개 이상의 타입을 선언하는 방식이 유니온 타입이다.
Pick<T, K> : T 타입 중에서 K 프로퍼티만 지정하여 타입을 만들 수 있다.
Omit<T, K> : T 타입의 모든 프로퍼티 중 K를 제거하여 타입을 구성한다.
Exclude<T, U> : T 타입에서 U와 겹치는 타입을 제외한 타입을 구성한다.
Extract<T, U> : T 타입에서 U와 겹치는 타입만을 포함하여 타입을 구성한다.
NonNllable<T> : T 타입에서 null과 undefined를 제외한 타입을 구성한다.
Parameter<T> : 함수 타입 T의 매개변수의 타입들의 튜플로 타입을 구서안다.
ConstructorParameters<T> : 클래스의 생성자를 비롯한 생성자 타입의 모든 매개변수 타입을 추출한다.
ReturnType<T> : 함수 T가 반환한 타입으로 타입을 구성한다.
Required<T> : 타입 T의 모든 프로퍼티가 필수로 설정된 타입을 구성한다.
타입스크립트를 이용해 함수 사용하는 법.
일급객체
-다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 일급 객체라고 한다.
-자바스크립트의 함수는 다른 함수에 매개변수로 제공할 수 있다.
let changhyeonO = function(func) {
func();
};
changhyeonO(function() {
console.log('코딩너무어렵당'); // "코딩너무어렵당"
});-자바스크립트의 함수는 함수에서 반환이 가능하다.
function changhyeonO(){
return function(){
console.log('코딩너무어렵당'); // "코딩너무어렵당"
}
}
let test = changhyeonO();
test();-자바스크립트의 함수는 변수에 할당이 가능하다.
let changhyeonO = function() {return "코딩너무어렵당"};
console.log(changhyeonO());-따라서 자바스크립트의 함수는 일급 객체이고, 타입스크립트도 동일하다.
이러한 타입스크립트 함수의 특성 때문에 함수를 선언하는 5가지 방식이 있다.
-선언 방법 함수 선언식, 함수 표현식, 화살표 함수 표현식, 단축형 화살표 함수 표현식, 함수 생성자 -> 각 함수 선언 방식의 차이를 알고 사용하자.
-함수 선언식은 호이스팅이 되지만, 함수 표현식은 호이스팅이 되지 않는다.
-일반 함수는 함수가 호출될 때 this에 바인딩할 객체가 동적으로 정해지지만, 화살표 함수 는 함수를 선언할 때 정적으로 정해진다.
타입스크립트와 함수
-타입스크립트에서 함수를 사용할 때는 매개변수에 타입을 지정하여 올바른 인수가 전달되도록 한다.
-타입스크립트는 타입 추론이 가능하기에, 함수 사용 시 모든 타입을 일일이 명시하지 않아도 되는 경우도 있다.
function add(a: number, b: number) {
const res = a + b;
return res.toString();
}위의 경우 res 변수는 number, 반환값은 string이라는 것이 명백하기 때문에 따로 타입을 명시하지 않아도 된다. 코드가 짧아지는 이점이 존재한다.
