[Typescript] 타입스크립트 시작하며 특징 살펴보기 : 기초 규칙 , 선택적 매개변수

섬세한 Typescript

타입스크립트는 선언을 할때마다 어떤 종류의 변수와 데이터인지 설정을 해줘야합니다.

해당 변수가 number인지 string인지 number형 배열인지 object, object의 값은 어떻게 설정되어 있는지,

function의 매개변수값의 타입은 뭔지, 리턴되는 값의 타입은 뭔지 등등 신경써야할 내용이 많습니다.

 

기본 Typescript 규칙

다음과 같은 코드가 있습니다.

name, age, gender 변수를 sayHi 함수로 넘기고 실행시켜 콘솔에 찍게 하는 로직입니다.

// index.ts
const name = "테스트",
  age = 24,
  gender = "male";

const sayHi = (name, age, gender) => {
  console.log(`Hello ${name}, you are ${age}, you are a ${gender}`);
};

sayHi(name, age, gender); // 전달하는 매개변수와 받는 매개변수 수 일치

export {}; 
// Typescript Rule
// export로 내보내기를 해서 이 파일이 모듈이 된다는것을 이해할 수 있도록 해주어야 합니다.

 

해당 파일이 모듈이 된다는 것을 알려주기

export {}; 를 한 이유는 typescript 는 export 로

이 파일이 모듈이 된다는것을 이해할 수 있도록 해주어야한다고합니다.

아무것도 export를 하지 않으면 코드상에서 에러가 발생합니다.

 

npm start 를 통해 컴파일 할때 에러발생

 

전달 하는 매개변수와 받는 매개변수 불일치

그럼 다음으로 sayHi 함수를 실행할때 gender 매개변수를 넘기지 않아보겠습니다.

그럼 다음과 같이 gender 매개변수가 전달받지 못하고 있다라는 메세지가 보여지며 에러를 표출합니다.

당연히 컴파일도 되지 않습니다.

 

선택적 매개변수라는 것을 알려주기

받는 매개변수에 ?를 붙여주면 해당 매개변수는 선택적으로 필요하다라는 것을 알려줄 수 있습니다.

const sayHi = (name, age, gender?) => { // 매개변수에 ?를 붙여주면 됩니다.
  console.log(`Hello ${name}, you are ${age}, you are a ${gender}`);
};

 

이로써 해당 함수는 name 이름, age 나이는 필수 값으로 받아야 하지만

gender 성별은 선택적으로 받을 수 있다는 것을 알 수 있습니다.