TIL 22) TypeScript

1. Ts와 Js의 차이점

ts는 js의 한계점을 극복하기 위해 만들어졌다.

let add = (x,y)=>{
  return x+y;
}
add(5,"7"); // "57"

Javascript는 위와 같은 코드에서 number타입의 변수를 강제적으로 문자열로 변환시켜서 원하지 않는 결과를 초래한다.

이런 문제점을 보완한 게 TypeScript다.

let add = (x:number,y:number):number=>{
  return x+y;
}
add(5,7); // 12

2. TypeScript의 타입

1. Boolean 타입

let imtrue:boolean = true;
let imfalse:boolean = false;

2. Number 타입

let number1:number = 5;
let number2:number = 0.1;

3. String 타입

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.

4. Array 타입

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

5. Tuple 타입

let user: [string, number, boolean] = ["kimcoding", 20, true];

요소의 타입과 갯수가 고정된 배열을 표현한다.

6. Object 타입

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

7. Any 타입

any 타입을 사용하게 되면 변수의 타입에 구애받지 않고 값을 재할당 가능하다.

let maybe: any = 4;


maybe = true;// 값 재할당이 정상적으로 이루어진다.

3. TypeScript의 함수

다음과 같은 함수를 Ts로 변환해보겠다.

// Javascript
function add(x, y){
	return x + y;
}

let add = (x, y) => {
	return x + y;
}


// TypeScript
function add(x: number, y: number):number {
	return x + y;
}

let add = (x: number, y: number): number => {
	return x + y;
}

함수의 리턴 값에도 Type을 명시해줘야 하며, 함수에 리턴값이 없는 함수는 void를 이용한다.

let consolePrint = ():void=>{
  console.log("hello");
}

또한 타입스크립트는 매개변수의 갯수에 맞춰서 인자를 전달해야한다.

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//error
greeting('coding');

//Good
greeting('coding', 'kim');

//error
greeting('coding', 'kim', 'hacker');

위 코드에서 선택적으로 매개변수를 보낼 경우(2갠데 1개만 보낼때) 매개변수의 이름 끝에 ?를 붙인다.

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//Good
greeting('coding');

//Good
greeting('coding', 'kim');

//error
greeting('coding', 'kim', 'hacker');

4. Union & InterSection

1. Union Type

유니온 타입은 둘 이상의 타입을 합쳐서 만든 새로운 타입이다.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

value에 number또는 string형태의 인자가 들어갈 수 있다.

다만, 아래와 같은 경우는 주의를 해야한다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}



function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

name은 공통이지만, skill과 age는 공통이 아니라 사용할 수 없다.

위와 같은 경우는 in 연산자를 사용한다.

2. InterSection Type

인터섹션 타입은 유니온 타입과 마찬가지로 둘 이상의 타입을 결합한다.

다만 in 연산자를 사용하지 않아도 된다.(타입 가드가 필요 없음)

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

대신 모든 프로퍼티를 전부 보내줘야한다.