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

✏️    TypeScript의 타입

➤ Boolean(불리언) 타입

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

➤ Number(숫자) 타입

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

➤ String(문자열) 타입

let fruits: string = "apple";
let color: string = 'white';

➤ Array(배열) 타입

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

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

➤ Tuple(튜플) 타입

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

console.log(user[2].toString());
// user[2]에 있는 요소는 boolean 타입이기 때문에 타입 에러가 발생

➤ Object(객체) 타입

typeof 연산자를 사용했을 때 “object”을 반환하는 모든 타입 (number, string, boolean, undefined, null, symbol)

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

➤ Any 타입

알지 못하는 타입을 표현해야 할 때, 타입 검사를 하지 않고자 할 때 any 타입을 사용.

let maybe: any = 4;

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

maybe = true;

let maybe: any = 4;

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

console.log(maybe.length);  //undefined

let list: any[] = [1, true, "free"];

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

//any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당 가능.

list[1] = 100;

 

✏️    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를 사용하여 작성할 수 있다.

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

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

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

greeting('coding');    //error

greeting('coding', 'kim');    //“hello, coding kim”

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

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

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

greeting('coding');    //“hello, coding kim”

greeting('coding', undefined);    //“hello, coding kim”

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

# 3. 선택적 매개변수를 사용하려면 매개변수의 이름 끝에 ?를 붙여준다.

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

greeting('coding');    //“hello, coding undifined”

greeting('coding', 'kim');    //“hello, coding kim”

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

 

✏️    TypeScript의 연산자 활용 타입

➤ 유니온(Union) 타입

둘 이상의 타입을 합쳐서 만들어진 새로운 타입.  |  연산자를 사용한다. number | string 은 숫자 또는 문자열 타입을 의미.

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

printValue(10); // The Number is a number: 10
printValue("ten"); // The Number is a string: ten

위의 printNumber 함수는 숫자 또는 문자열 값을 입력받고 있다.

유니온 타입을 사용해 number | string 타입으로 지정하고 입력된 값의 타입을 typeof 연산자를 사용하여 검사한 후, 해당 값이 숫자인 경우와 문자열인 경우 각각 다른 로그를 출력한다. 유니온 타입은 다양한 타입의 값을 처리해야 하는 경우 유용합니다.

 

유니온(Union) 타입의 장점

• 타입 추론을 할 수 있기 때문에, 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있다.
• 코드의 가독성을 높일 수 있습니다.
• 타입이 명시적으로 표시되어 코드를 이해하기 쉽게 만들어 준다.

 

유니온(Union) 타입 사용 시 유의할 점

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

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

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

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

askSomenone 함수 내부에서는 Developer와 Person이 갖고 있는 공통 프로퍼티인 name에만 접근할 수 있다.

나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용해야 한다.

타입 가드(Type Guard)란? TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나입니다. 타입 가드는 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장해 줍니다.

//Type Guard 사용

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

  if ('age' in someone) {
    console.log(someone.age);
  }}
  
  //유니온 타입은 전달인자를 전달할 때 선택지가 생긴다.
  askSomeone({name: '김코딩', skill: '웹 개발'});
  askSomeone({name: '김코딩', age: 20});

in 연산자는 객체의 프로퍼티 이름과 함께 사용되며, 해당 프로퍼티가 객체 내에 존재하는지 여부를 검사한다.

 

➤ 인터섹션(Intersection) 타입

둘 이상의 타입을 결합하여 새로운 타입을 만든다. & 연산자를 사용한다.

let value: string & number & boolean;

value 변수는 string, number, boolean 타입을 전부 받을 수 있다.

//인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드는 필요하지 않다.

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

인터섹션 타입은 타입 가드는 필요 없는 반면 Developer와 Person이라는 새로운 합집합을 만들어 내는 것이기 때문에, 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야 한다.

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

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

function askSomeone2(someone: Developer & Person) {
// 타입 가드를 사용하지 않아도 모든 프로퍼티에 접근할 수 있다.
  console.log(someone.age);
  console.log(someone.name);
  console.log(someone.skill);
}

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

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