230111 - TIL

타입 어노테이션 기초

• 변수의 타입을 정할 때는 항상 소문자 기준으로 작성해야합니다.

변수 타입

변수 이름 뒤에 콜론(:)을 적고 타입을 적어주면 됩니다

const name:string = "jaden";
let myNumber: number = 42;
const myBoolean: boolean = true;

컴파일링

typescript를 javascript 로 변환하게 되면 새롭게 생성한 javascript 파일에는 두가지 일이 발생합니다.
일단 어노테이션이 사라질 것 입니다. 자바스크립트에서는 어노테이션이 없기 때문이죠. 그리고 변수를 var로 선언하게 됩니다. 이는 변환시 자바스크립트 버전을 설정할 수 있기 때문에 최신 js로 설정하면 해당하는 let이나 const로 유지시킬 수 있습니다.

타입 추론 (Inference)

일반적인 경우 위에 예시처럼 콜론(:) 을 작성하지 않아도 선언될 때 만들어진 변수의 type을 유지합니다. 즉, const name:string = "jaden" 이라고 쓸 필요 없이 => const name = "jaden"이라고 타입을 추론해준다는 말입니다.

Any type

any 타입을 사용하면, 어떤 데이터든 할당 할 수 있습니다. typescript를 사용하는 이유가 타입을 명시하기 위해서인데, 어떤 값이든 가능하도록하는 any는 옳지 않아보입니다. 일반적으로 잘 사용하지 않습니다.

하지만 특정상황에서는 any가 필요할 수도 있습니다.

함수

함수 파라미터 어노테이션

function square(num: number) {
  return num * num;
}

// Arrow function:
const add = (x: number, y: number) => {
  return x + y;
};

위의 코드처럼, 파라미터(num)에 숫자만 올 수 있도록 어노테이션 설정을 할 수 있습니다.

return 타입 어노테이션

function square(num: number): number {
  return num * num;
}

// Arrow function:
const add = (x: number, y: number): number => {
  return x + y;
};

위 코드 처럼 함수 선언 이후에 타입을 어노테이션 하여 사용할 수 있습니다. 하지만 굳이 안해도 되는 상황이 주로 입니다. 타입 추론이 여기서도 동작하기 때문입니다.
그래도 명시하고 싶다면 어노테이션을 넣어주면 됩니다.

익명 함수 문맥상 타입지정

const colors = ["red", "orange", "yellow"];
colors.map((color) => {
  return color.toUpperCase();
});

map 함수 안에 color라는 매개변수가 있습니다. 이는 굳이 명시하지 않아도 자동적으로 string 이라는 문자열 어노테이션이 적용됩니다. 하지만 명시하고 싶다면, color: string이라고 명시해줄 수 있습니다.

void 타입

function printTwice(msg: string): void {
  console.log(msg);
  console.log(msg);
}

반환값이 없는 함수도 void로 명시 해줄 수 있습니다.