[TypeScript] 기본타입 (객체, 배열)

 

자바스크립트 : 동적 타입 언어

타입스크립트 : 정적 타입

 

타입추론

 특정 변수나 상수에 어떤 타입을 사용했는지 타입스크립트가 식별한다

 선언을 하면서 아무것도 할당하지 않는다면 어떤 값을 할당할지 알려주는 것이 좋다

 값을 할당하게 되면 타입 추론기능이 있으니까 굳이 타입을 명시해주지 않는게 좋다고 한다.

 한번 값을 할당하면 타입 추론으로 타입이 지정되니까 다른 타입을 재할당 할때 오류로 지적한다

 

function add(n1: number, n2: number, showResult: boolean, phrase: string) {
  const result = n1 + n2;

  if (showResult) {
    // console.log(phrase + n1 + n2);
    // 이러면 버그가 나타남
    // phrase + n1 + n2 연산에서 모두 문자열로 인식됨
    // 그니까 n1+n2 숫자 연산만 따로 빼서 수행해줘야 올바른 결과가 나타난다.
    console.log(phrase + result);
  } else {
    return result;
  }
}

---

objectType

기본적으로 아래와 같은 형태로 객체를 선언할 수 있다.

const someObject: {
  name: string;
  age: number;
} = {
  name: "Park",
  age: 27,
};

만약 타입없이 객체를 선언하게 된다면 타입스크립트는 아래와 같이 someObject의 타입을 추론할 것이다

const someObject: {
    name: string;
    age: number;
}

그리고 없는 프로퍼티에 접근하게 된다면 에러로 지적해준다.

console.log(someObject.nickname)
//'{ name: string; age: number; }' 형식에 'nickname' 속성이 없습니다.

빈 객체를 타입으로 지정

const emptyObject: {} = {};

빈객체를 타입으로 선언하게 되면 객체는 빈 객체만 할당할 수 있게 된다.

object 자체를 타입으로 선언하는 행위는 타입을 빈 객체로 설정하는 것과 같다고 봐도 된다

---

ArrayType

배열 타입을 설정할 때는 타입 뒤에 대괄호를 붙이는 식으로 설정하거나 추론시킬 수 있다.

// 문자열 배열 선언
let someArray: string[];
someArray = ['sports'];

const stringArray = ['sports'];

다양한 타입의 값이 들어가는 배열을 선언하는 방법

const anyArray: any[];
anyArray = ['sports',1];

 

배열 순회에서의 타입 추론

아래 코드의 경우, 접근자 hobby의 타입은 string으로 추론되어 toUpperCase 메서드를 부르는데 이상이 없다

objectWithArray 객체의 hobbies 프로퍼티가 문자열 배열이라는 것을 타입스크립트가 알고 있기 때문에

접근자 hobby의 타입이 string이라고 추론되기 때문이다.

 

const objectWithArray = {
  name: "Park",
  age: 27,
  hobbies: ["Sports", "Cooking"],
};

for (const hobby of objectWithArray.hobbies){
  console.log(hobby.toUpperCase());
}

---

tupleType

배열을 만들어 사용하다보면, 형태와 갯수가 고정된 배열을 만들고 싶을때가 있을 수 있다

그래서 튜플타입이 유용할 수 있다.

튜플타입은 형태와 크기가 고정된 배열이라고 한다.

const TUPLE: [number, string] = [1,'a'];
TUPLE.push(2)
// 예외적으로 push는 동작한다고 한다.

const TUPLE2: [number, string] = [1,'a','b'];
//'[number, string, string]' 형식은 '[number, string]' 형식에 할당할 수 없습니다.

튜플타입을 사용하게 되면, 배열의 형태를 고정시켜주기 때문에 위처럼 형태에 맞지 않는 값은 할당할 수 없게 된다.

예외적으로 push는 동작한다

 

만약 아래처럼 추론시키는 방식으로 코드를 작성하면 union 타입의 배열로 추론하게 되어 의도했던 배열과 다른 방식으로 동작할 수 있다.

let ARRAY = [2,'string']
// let ARRAY: (string | number)[]

이렇게 된다면, ARRAY에 ['string',2] 를 할당해도 문제없이 코드가 컴파일 될거다

그러면 의도했던 [number,string] 타입의 배열에서 벗어나도 문제가 없는 것이다.

 

enumType

enum키워드를 활용해서 enumerate 를 만들 수 있다

enum Role {
  admin,
  read_only,
  author
}

const someObjectWithEnum = {
  name: "Park",
  age: 27,
  hobbies: ["Sports"],
  role: Role.admin,
};

enum 키워드를 사용해서 키워드와 index를 연결하여 사용할 수 있다.

enum을 선언할때 필요에따라 특정 키워드에 특정 값을 할당해줄 수 있다.

---

reference : 유데미 타입스크립트 강의

https://www.udemy.com/course/best-typescript-21/