TypeScript

타입스크립트란??

JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었습니다.

아래는 JS코드의 한계 예시입니다.

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

add(5, "7"); // "57"
// 입력값의 타입을 고려하지 않고 JS가 강제적으로 문자열을 만든 모습.

타입스크립트의 타입

1. Boolean

let isShow: boolean = true;
let isDone: boolean = false;

2. Number

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

3. String

let firstName: string = "coding";
let lastName: string = 'kim';
// 백틱을 사용한 문자열인 템플릿 리터럴을 사용해 여러 줄의 문자열을 작성할 수 있다.
let longString: string = `Kimcoding is a developer.
He is 20 years old.` 

4. Array

//첫 번째 방법 => 요소들의 타입을 적고 그다음에 []를 사용.
let items: string[] = ["apple", "banana", "grape"];


//두 번째 방법 => Array를 작성하고 <>안에 요소들의 타입을 작성.
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이다.
any 타입을 사용하게 되면, 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있게 된다.

let obj: object = {};

obj = "hello"; // error ❎

let maybe: any = 4;

maybe = true; // success ✅

또한 엄격한 타입 검사를 진행하지 않기 때문에, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러 대신에 undefined가 반환된다.

let maybe: any = 4;

//undefined로 출력됩니다.
console.log(maybe.length);

타입스크립트의 함수

기본 사용법

TypeScript에도 함수는 JavaScript와 마찬가지로 기명 함수(named function)와 화살표 함수(arrow function) 등으로 만들 수 있다.

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

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

새로운 점

1. 함수에 리턴값이 없다면 void를 사용한다.

let printAnswer = (): void => {
	console.log("YES");
}

2. 매개변수의 개수에 맞춰서 전달인자를 전달해야한다.

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

//에러가 납니다.
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

3. Default parameter

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

//정상적으로 작동합니다. 
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', undefined);

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

4. 선택적 매개변수

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

//정상적으로 작동합니다.
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

타입스크립트의 연산자 활용

Union 타입

JavaScript에서 or의 역할을 했던 ||와 같은| 연산자를 이용한 타입을 말한다.

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

Union 타입의 장점

1. 다양한 타입의 값을 처리해야 하는 경우 유용하다.

2. 유니온 타입을 사용하면 타입을 추론할 수 있기 때문에, 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있다.

3. 코드의 가독성을 높일 수 있습니다.

Union 타입 사용 시 유의할 점

유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 합니다.

다음의 예시를 보자.

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

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

function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

위와 같은 예시가 존재할 때 askSomeone 함수에서 접근할 수 있는 프로퍼티는 name하나 뿐이다.

만약 이외의 프로퍼티에도 접근하고 싶다면 타입가드를 사용해야한다.

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

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

Intersection 타입

JavaScript에서 And의 역할을 했던 &&와 같은& 연산자를 이용한 타입을 말한다.

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

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

type User = Developer & Person;

이 경우에는 union 타입과 달리 Developer, Person 각각에 정의된 속성 모두를 받게 된다. 이런 식으로 인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않다.

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);
}

그러나 인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없다.

askSomeone2({name: '김코딩', skill: '웹 개발', age:20});