[TypeScript] 문법 (타입, 함수, 연산자 활용)

TypeScript 타입

TypeScript는 JavaScript와 거의 동일한 데이터 타입을 지원한다.

✅

변수에 대한 타입 표기 아래 예시들과 같이 변수의 타입을 명시하는 것은 선택 사항이며 대부분의 경우 타입 표기는 필요하지 않다. 가능하다면 TypeScript는 자동으로 코드 내에 있는 타입들을 추론하고자 시도한다

❔ 타입 추론 : 변수나 함수의 타입을 선언하지 않아도 TypeScript가 자동으로 유추하는 기능

Number (숫자)

let num1: number = 7;
let num2: number = 0.6878;

Boolean (불리언)

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

String (문자열)

JavaScript처럼 큰 따옴표, 작은 따옴표, 백틱(“ ,’ ,` )으로 문자열을 표현할 수 있다.

let firstName: string = `John`;
let title: string = `Web Developer`;
let profile: string = `I'm ${firstName}. 
I'm a ${title}`;

Array (배열)

두 가지 방법으로 배열 타입을 선언해 사용할 수 있다.

배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있고, 혼용해서 작성하는 것은 불가능하다.

//첫 번째 방법 : 배열의 요소들을 나타내는 타입 뒤에 배열을 나타내는 [] 쓰기
let stringList1: string[] = ["apple", "banana", "grape"];
let numberList1: number[] = [1, 2, 3];

//두 번째 방법 : 제네릭 배열 타입 사용, <>안에는 하나의 인자만 들어갈 수 있다.
let stringList2: Array<string> = ["apple", "banana", "grape"];
let numberList2: Array<number> = [1, 2, 3];

Tuple (튜플)

요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

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

Object (객체)

원시 타입이 아닌 타입을 나타낸다.

원시 타입 : number, string, boolean, undefined, null, symbol

두 가지 방법으로 객체 타입을 선언해 사용할 수 있다.

// 첫 번째 방법
let obj: object = {};

// 두 번째 방법
let user: { name: string; age: number} = {
	name: "kimcoding",
	age: 20
}

각 Property(속성)을 구분할 때 , 또는 ; 을 사용할 수 있다.

Any

특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용할 수 있다.

ex. 클라이언트에서 유저로부터 받은 데이터, 서드파티 라이브러리에서 들어오는 값

변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당 할 수 있다.

let obj: object = {};
//에러가 난다.
obj = "hello";

let maybe: any = 4;
//정상적으로 동작한다.
maybe = true;

//실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지않고, udefined를 출력한다.
console.log(maybe.length);

해당 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용하다.

// 예시 : 여러 타입이 섞인 배열을 받고자 할 때
let list: any[] = [1, true, "free"];

//any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있다. 
list[1] = 100;

TypeScript 함수

named function과 arrow function

TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야한다.

➡️ 타입 추론 기능을 활용하지 않는다고 가정했을 때 필수이다.

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

//arrow function (화살표 함수)
let add = (x: number, y: number): number => {
	return x + y;
}

void

함수에 리턴 값이 없을 때 void를 사용하여 작성한다.

➡️ 타입 추론 기능을 활용하지 않는다고 가정했을 때 필수이다.

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

전달인자

TypeScript는 JavaScript와 달리 매개변수의 개수에 맞춰 전달 인자를 전달해야한다.

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

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

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

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

할당될 매개변수의 값 정해놓기

전달 인자를 전달하지 않거나, undefined 를 전달했을 때 할당될 매개변수 값을 정해놓을 수 있다.

❕ JavaScript에서의default parameter와 같은 동작을 한다

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

//정상적으로 작동한다.
//출력 : hello, coding kim
greeting('coding');

//정상적으로 작동한다.
//출력 : hello, coding kim
greeting('coding', undefined);

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

선택적 매개변수

Property(속성)의 타입을 선택적인 타입으로 지정할 수 있다.

Property(속성)뒤에 ? 붙히면 된다.

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

//정상적으로 작동한다.
// 출력 : hello, coding undefined
greeting('coding');

//정상적으로 작동한다.
//출력 : hello, coding kim
greeting('coding', 'kim');

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

TypeScript 연산자 활용 타입

Union (유니온)

서로 다른 두 개 이상의 타입 허용하는 경우 사용하는 타입이다.

| 연산자를 사용한다.

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 장점

타입에 관련된 API를 쉽게 자동 완성으로 얻어낼 수 있다.

any 타입을 사용하면 타입을 추론할 수 없어, 자동 완성 기능을 사용하기 어렵다.

코드 가독성을 높일 수 있다.

Union 사용 시 유의할 점

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

// 인터페이스를 사용하여 Developer와 Person을 정의했다.
interface Developer {
  name: string;
  skill: string;
}

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

// Developer와 Person이 갖고 있는 공통 프로퍼티인 name에만 접근할 수 있다
function askSomeone(someone: Developer | Person) {
  console.log(someone.name); // 정상 실행
  console.log(someone.skill); // 에러 발생
}

// 타입 가드를 사용해 나머지 프로퍼티에도 접근할 수 있다.
function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

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

✅

타입 가드(Type Guard)

TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나

특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장해 준다.

Intersection (인터렉션)

둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법이다.

& 연산자를 사용한다.

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); // 정상 실행
}

Reference

- 코드스테이츠

- https://www.typescriptlang.org/