Typescript - Basic Type-2

★코딩하는 인문학도 ☆·2022년 3월 13일

<TypeScript -Basic type-2>

전편에 다룬 것 외에 다른 기본 basic type에 대해서 알아보자

Type in Function

2-1. basic use in function

//math 의 add의 덧셈 함수의 경우 예시
function add(num1: number, num2: number): number {
    return num1 + num2;
  }

2-2. promise return function

// JavaScript
function jsFetchNum(id) {
  // code..
  // code..
  return new Promise((resolve, reject) => {
    resolve(200);
  });
}

// TypeScript
// string인 id를 받아서 Promise를 return 하는데,fetch가 완료된 이후에 숫자의 데이터를 반환하는 것을 예측할 수 있다.
function fetchNum(id: string): Promise<number> {
  // code ...
  return new Promise((resolve, reject) => {
    resolve(200);
  });
}

2-3. optional parameter

함수의 매개변수에서 특정 매개변수가 없는 경우가 없는 경우가 있을 수 있을 때, optional parameter를 사용한다.
parameter?: type 과 같이 인자 옆에 물음표를 붙여서 사용가능하다.

// 이름을 찍어주는 함수로, 이름과 성이 있을 수도 있지만 어떤 경우는 이름만 출력하는 함수로도 이용하고 싶다고 하면 아래와 같이 optional parameter를 사용하여 활용 가능하다.
function printName(firstName: string, lastName?: string) {
  console.log(firstName);
  console.log(lastName);
}
printName('Steve', 'Jobs'); // 'Steve', 'Jobs'
printName('heungmin');        // 'Heungmin', undefined(ts 변환뒤 undefined 출력)
printName('kane', undefined); // 'kane', undefined
printName('python', 123) // 뒤에 인자가 숫자임으로 에러

//union type을 활용하여서도 가능하지만 이 경우에는 명시적으로 인자 값에 undefined로 해주어야 한다.
function printName(firstName: string, lastName: string | undefined) {
  console.log(firstName);
  console.log(lastName);
}
printName('Steve', 'Jobs'); // 'Steve', 'Jobs'
printName('heungmin');        // 이 경우는 에러가 난다.  printName("heungmin",undefined)로 명시해주어야 에러가 안남.
printName('kane', undefined); // 'kane', undefined
printName('python', 123) // 뒤에 인자가 숫자임으로 에러

2-4. default parameter

js와 동일하게 default로 파라미터를 줄 수 있다. optional paramter을 비슷하지만, 값을 전달하지 않으면 기본값이 전달된다.

function printMessage(message: string = 'default message') {
  console.log(message);
}

printMessage(); // 'default message'

2-5. rest parameter

JS에서 사용가능한 rest parameter는 를 typescript에서도...parameter 의 형태로 매개변수를 지정하고, 인수로 여러 개의 값들을 parameter로 받을 수 있다.
그리고 typescript에서는 ...parameter의 타입을 지정해 줄 수 있다. 즉, 매개변수로 들어올 배열들의 각 요소의 타입을 지정할 수 있다.

// JavaScript
function addNumbers(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

// TypeScript
//여러개의 인수를 받을 경우 rest parmter적용 가능
// numbers array의 여러 인수 배열이 들어옴
function addNumbers(...numbers: number[]): number {
  return numbers.reduce((a, b) => a + b);
}
console.log(addNumbers(1, 2));             // 3
console.log(addNumbers(1, 2, 3, 4));       // 10
console.log(addNumbers(1, 2, 3, 4, 5, 0)); // 15
console.log(addNumbers(1, '1'));           // compile error

Array vs Tuple

Array

아래처럼 배열을 표기 할 수 있음

const alphabet: string[] = ['a', 'b'];
const scroes: Array<number> = [1, 3, 4];

//readonly를 적용시
const alphabet1: readonly string[] = ["a","b","c"]
const alphabet2: Readonly Array<string> =["a","b","c"]
const alphabet3: Readonly <string[]> = []

readonly 의 경우: 전달된 인자를 함수 내부에서 변경 할 수 없도록 타입에서 보장하도록 표기하는 것
pop() , push() 같이 배열의 속성을 변경하는 메서드의 경우 호출이 안되지만, concat() 같이 원본을 수정하지 않는 경우는 사용이 가능하다.

// readonly를 추가할 경우 매개변수 alphabet의 값을 읽을 수만 있다.
// alphabet의 값을 수정할 수 없다.
// 아래의 print 함수에서는 push() 같은 메서드를사용할 수가 없다.

function printArray(alphabet: readonly string[]) {}

Tuple

서로 다른 타입의 데이터를 담을 수 있는 배열의 특수한 형태의 타입이다.
tuple에 명시적으로 지정된 형식에 따라 아이템 순서를 설정해야 되고, 추가되는 아이템 또한 tuple에 명시된 타입만 사용만 가능하다.
interface나 type alias, class로 대체 하는 편이 낫다.
tuple의 사용예시로는 react의 useState가 있다고 할 수 있다.

let student: [string, number];
student = ['name', 123];
student[0]; // name
student[1]; // 123

//object destructuring 활용하여 가독성을 높일 수 있다. 
// 그래도 데이터를 사용하는 곳에서 임의로 데이터를 name,age로 설정해줘야 하는 단점이 존재한다.
const [name,age] = student;로