[Typescript] Section 03. 기본타입

1. 문자열, 숫자, 배열

function sum(a: number, b: number) {
  return a + b;
}
sum(10, 20);
// sum('10', '20');

// 문자열
const str: string = "hello";

// 숫자
const num: number = 10;

// 배열
const arr: Array<string> = [];
arr.push("hi");

// 배열 - 리터럴 적용
const items: string[] = [];
// items.push(10);

// 튜플
const address: [string, number] = ["판교", 40];

// 객체
const obj: object = {};
// obj.a = 10;

// 타입 객체
const person: { age: number; name: string } = { age: 100, name: "Capt" };
person.age = 101;

// 진위값
let isLogin: boolean = false;

Array <Type> vs Type []

가독성 측면

//Array<Type> : 중첩시 혼란 야기 가능
let arr1: ComputedRef<Array<number>>;

//Type[] : 보다 간결함
let arr2: ComputedRef<number[]>;

readonly 사용 방법

//Array<Type> : ReadonlyArray 활용
let arr1: ReadonlyArray<number>;

//Type[] : readonly 추가
let arr2: readonly number[];

데이터 유형과 길이를 모두 알 수 없는 경우 Array <type | type> 수 사용할 수 있습니다.

const firstArray:Array<string|number> = [1,2,'alpha'];

단일 데이터 유형이 있고 길이를 알 수 없는 경우 type [] 사용할 수 있습니다.

const secondArray:string[] = ['alpha','beta','gama'];

2. 튜플, 객체, 진위값

튜플

튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다.

let arr: [string, number] = ['hi', 10];

만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 납니다.

arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.

객체

const obj: object = {};
const person: { age: number; name: string } = { age: 100, name: "Capt" };
person.age = 101;

진위값

let isLogin: boolean = false;

3. 파라미터, 반환값

function sum(a: number, b: number): number {
  return a + b;
}

위 코드를 보면 기존 자바스크립트 함수의 선언 방식에서 매개변수와 함수의 반환 값에 타입을 추가하였습니다.

4. 파라미터를 제한하는 특성

function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // error, too few parameters

• 타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주합니다. 따라서, 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야 하며 컴파일러에서 정의된 매개변수 값이 넘어왔는지 확인합니다.
• 달리 말하면 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다는 의미라 자유로운 자바스크립트와 달리 억압적인 느낌을 받을 수 있습니다.

5. 옵셔널 파라미터 & REST 문법이 적용된 매개변수

옵셔널 파라미터

function sum(a: number, b?: number): number {
  return a + b;
}

sum(10, 20); // 30

sum(10); // 타입 에러 없음

sum(10, 20, 30); // error, too many parameters

타입스크립트의 파라미터를 제한하는 특성은 정의된 매개변수의 개수만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성과 반대됩니다. 만약 이러한 특성을 살리고 싶다면?(옵셔널)를 이용해서 위와 같이 정의할 수 있습니다.

 

REST 문법이 적용된 매개변수

function add(a: number, ...rest: number[]): number {
  const totalOfNums = 0;
  for (let key in rest) {
    totalOfNums += rest[key];
  }
  return a + totalOfNums;
}

add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

하지만 옵셔널 파라미터를 사용해도 설정된 매개변수 타입 개수보다 초과하면 타입 에러가 발생합니다. 이를 해결하기 위해 REST 문법을 활용하면 됩니다.

5. Any & void 소개

any

단어 의미 그대로 모든 타입에 대해서 허용한다는 의미를 갖고 있습니다.

 

void

변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입입니다.

let unuseful: void = undefined;

function notuse(): void {
  console.log('sth');
}