[TypeScript] 기초연습

✅ Why TypeScript?

솔직히 이제 막 타입스크립트를 배우는 입장에서 typescript가 왜 유용한지.... 저는 잘 모르겠읍니다...🙃
일단 지금 인턴으로 일하고 있는 기업의 사수분의 강력추천이 있었고, 신입에게 사수의 말씀===법 이기에 아묻따 공부를 시작하게 되었다.

서치를 해보니, ts를 이용하면 자바스크립트의 동적 타이핑(Dynamic Typing)으로 인한 오류를 사전에 잡아낼 수 있다고 한다.

자바스크립트의 동적 타이핑(Dynamic Typing)이란, 변수나 반환값의 타입을 사전에 지정하지 않는 특성으로, 아래와 같은 경우를 말한다.

function isItZero(el) {
  return el == 0;
}

isItZero(0); //true;
isItZero([]); //true;
isItZero(""); //true;
isItZero(false); //true;

위 isItZero() 함수는 인자의 타입을 제한하지 않기때문에, 아무 타입이나 인자에 대입할 수 있고, '0'과의 비교를 할 때 예기치 못한 오류가 발생한다.

만약 이를 타입스크립트로 변환하여 작성한다면,

function isItZero(el : number): boolean {
  return el == 0;
}

isItZero(0); //true;
isItZero([]); //error;
isItZero(""); //error;
isItZero(false); //error;

isItZero() 함수의 인자 타입을 number로 제한하기 때문에, 숫자가 아닌 다른 타입의 인자는 에러가 발생하게 된다.

동적으로 타입을 검사하는 자바스크립트는 사소한 오류도 프로그램을 실행하기 전까지는 오류인지 알 수 없기 때문에 프로젝트가 커지면 이런 사소한 오류들이 모여 큰 에러를 초래할 수 있다.

타입스크립트는 이렇게 예측할 수 없는 상황을 개발자에게 알려주어 버그를 미연에 방지할 수 있도록 도와줄 수 있다.

✅ ts 기본타입

const message: string = 'hello world';

const done: boolean = true; 

//배열 타입
const numbers: number[] = [1, 2, 3]; 
const messages: string[] = ['hello', 'world']; 

let mightBeUndefined: string | undefined = undefined; // string 일수도 있고 undefined 일수도 있음
let nullableNumber: number | null = null; // number 일수도 있고 null 일수도 있음

let color: 'red' | 'orange' | 'yellow' = 'red'; // red, orange, yellow 중 하나임

⏩ 함수에서 타입 정하기

function sum(x: number, y: number): number {
  return x + y;
}

sum(1, 2);

만약 아무것도 리턴하지 않는 함수라면 아래와 같이 void로 설정해야 한다.

function returnNothing(): void {
  console.log('I am just saying hello world');
}

***Refernce: https://velog.io/@velopert/typescript-basics