[Typescript] Typescript Function, Interface, Object

https://pixabay.com/ko/photos/오래-된-마-건물-거리-황혼-6300696/

 

Typescript에서의 Function, Obejct, Interface를 정리해 보았습니다.

 

Function

Typescript에서는 매개 변수와 반환 값에 타입을 명시할 수 있습니다. 지정한 값과 다른 값이 전달 또는 반환되면 컴파일 에러를 발생시킵니다.

 

function sum(a: number, b: number): number {
    return a+b;
}

const res: number = sum(100, 11);

console.log(res); // 111

sum(100, "100"); // error

 

Function 관련 유용한 기능으로는 선택 매개 변수가 있습니다. 매개 변수 이름 옆에 ?를 붙이면, 함수 사용 시 해당 매개 변수의 전달을 생략 가능합니다.

 

function greet(name?: string): void {
    console.log(`hello ${name}~!`);
}

greet(); // hello undefined~!
greet("lemon"); // hello lemon~!

 

선택 매개 변수에 대해서 method 사용이 필요하면 아래와 같이 사용 가능합니다.

 

function test(name?: string): string|undefined {
    let upperName = name?.toUpperCase(); // name 옆에 ?가 없으면 compile 에러 발생

    return upperName;
}

const res = test("lemon");

console.log(res);

 

당연히 arrow function을 사용할 때도 타입을 지정할 수 있습니다.

 

const greet = (name: string): void => {
    console.log(`hello ${name}~!`);
}

greet("lemon");

 

Interface와 Object

interface는 object의 타입을 선언하는 방법이다.

 

// interface 사용 예시
// object의 타입을 선언하는 데 사용된다.
interface Person {
    name: string,
    age: number
}

let person1: Person;

person1 = {
    name: "lemon",
    age: 34
}

console.log(`person1의 이름: ${person1.name}`);
console.log(`person1의 나이: ${person1.age}`);

 

 interface의 확장은 extends로 가능합니다.

interface Person {
    name: string,
    age?: number // 선택 속성으로 지정하지 않아도 된다.
}

interface Progremmer extends Person {
    language: string,
}

const lemon: Progremmer = {
    name: "lemon",
    language: "typescript",
}

console.log(`name is ${lemon.name}`);
console.log(`language is ${lemon.language}`);

 

---

 

참고 자료

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html - Typescript 공식 문서

실전 리액트 프로그래밍 리액트 훅부터 Next.js까지(개정판) - 이재승

 

혹시 본 게시글 중 틀린 내용이 있다면 댓글을 통해 알려주세요 :)

감사합니다.