Typescript
에서 사용되는Function
의Type
지정
Javascript
만이 아닌, 웹 애플리케이션을 구현할 때 자주 사용되는 함수는 Typescript
에서 아래와 같은 3가지 타입을 정의할 수 있다.
Parameter
타입Return
타입Structure
타입
기존 Javascript
의 함수는 다음과 같이 선언하여 사용했다.
function add(a, b) {
return a + b;
}
Typescript
의 함수는 기존 Javascript
의 함수에 매개변수, return
값에 타입을 추가한다.
만약 함수 return
값이 없다면 void
타입을 지정한다.
function add(a: number, b: number): number {
return a + b;
}
Typescript
에서는 함수의 인자를 모두 필수 값으로 간주한다.
그래서 함수의 매개변수를 설정하면 undefined
, 혹은 null
이라도 인자로 전달해야 컴파일러에 정의된 매개변수 값이 넘어 왔는지 확인한다.
즉, Typescript
는 정의된 매개변수 값만을 받으며 추가로 인자를 받을 수 없다.
function add(a: number, b: number): number {
return a + b;
}
sum(1, 2); // 3
sum(1, 2, 3); // error, too many parameters
sum(1); // error, too few parameters
만약 정의된 매개변수를 포함하지 않거나, 이외의 다른 값을 전달하고 싶다면 '?'
기호를 사용해 선택적 프로퍼티(Optional Properties)
를 지정한다.
function add(a: number, b?: number): number {
return a + b;
}
sum(1, 2); // 3
sum(1); // 1
ES6에서 지원하는 Rest
문법은 Typescript
에서 다음과 같이 사용할 수 있다.
function add(a: number, ...nums: number[]): number {
const total = 0;
for (let key in nums) {
total += nums[key];
}
return a + total;
}
Typescript
는 다음과 같이 Javascript
의 this
값을 명시할 수 있으며, this
를 확인하여 에러를 감지한다.
interface Model {
count: number;
init(this: Vue): () => {};
}
let model: Model = {
count: 1,
init: function (this: Model) {
return () => {
return this.count;
}
}
}
let getCount = model.init();
let count = getCount();
console.log(count); // 1
TypeScript: JavaScript With Syntax For Types.
React TypeScript Tutorial for Beginners - Codevolution
타입스크립트 입문 - 기초부터 실전까지 - 장기효