[TIL] 2021년 12월 18일

1. 오늘 공부한 것

타입 할당과 타입 추론

객체 형태

배열 형태

튜플 형태

 

2. 타입 할당과 타입 추론

타입 할당은 아래와 같이 '변수: 타입'으로 타입을 할당한다.

 

function addGame(gname: string, count: number){
	console.log('현재' + gname+ '을 추가하였습니다. 인원수는' + count+ '입니다.');
}
const gameName = 'Leaue of Legend';
const numberOfPeople = 5;
addGame(gameName, numberOfPeople);

const name: string;
name = 'Hello'; //동적 할당

 

그리고 타입 추론은 말 그대로 TypeScript가 타입을 추론하는 것이다.

  gameName이 string인지 추론을 해서 string이면 오류를 안 내고,

다른 타입이라면 오류를 발생시킨다.

 

즉, 타입을 설정 안했을 때 타입스크립트가 타입을 추론해 나가는 것이다.

3. 객체 형태

타입스크립트에서 object를 타입 없이 만들었을 때는 typescript의 객체가 된다.

우리가 알고 있는 object 형식 하고는 정말 다르다.

 

//일반 자바스크립트
const animal = {
  name: 'haru',
  age: 1,
  kind: 'cat'
}

//타입스크립트
const aninal: {
  name: string;
  age: number;   
  kind: string;
} = {
  name: 'haru';
  age: 1;
  kind: 'cat';
}

const animal:{
 //객체 안의 key들에 대해 세부적으로 타입 설정
 //key: type
} = {
  //real object
  //key: value
}
//아래 변수에 할당한 타입들은 같은 것임
const obj1: {};
const obj2: object;

//중첩 객체
const animal: {
  name: string;
  age: number;
  kind: string;
  master_list: string[];
  details:{
    birth: string;
  }
} = {
  name: 'haru',
  age: 1,
  kind: 'cat',
  master_list: [],
  details:{
    birth: '2020-12-05'
  }
}

4. 배열 형태

const list: string[]; //초기화하지 않고 타입만 설정하기


//만약 array의 값들의 타입이 복합적이라면?
const list: any[];

//대신, 타입스크립트가 제공해주는 기능을 지원 못 받는 느낌이 강하다.
//타입이 자유로워지니까!

5. 튜플 형태

타입스크립트가 자바스크립트를 아우르고 있기 때문에

자바스크립트에 없는 것을 추가할 수 있다. 

---

그게 바로 튜플이다.

 

튜플이란 길이와 타입이 고정된 array라고 생각하면 된다.

 

물론 타입스크립트에서만 존재한다.

 

//튜플의 형태
const person: {
  name: string;
  age: number;
  hobbies: string[];
  role: [number, string];
}= {
  name: 'gunbro',
  age:24,
  hobbies: ['Sports', 'Games'],
  role: [2, 'author']
};

//role의 첫 번째 요소가 숫자이고, 두 번째 요소가 문자형인건 typescript는 알고 있다.
//타입을 설정해줬기 때문인데,
//타입을 설정 안해줬다면, 첫 번째 요소가 숫자이고, 두 번째 요소가 문자형인건 typescript는 모른다.

 

위의 코드처럼 설정되어 있으면, person.role = [0, 'admin', 'user'] 이런 형식은 용납이 안된다.

무조건, [숫자, 문자열]로 끝나야 한다.

 

결국, 세 번째 프로퍼티는 생기면 안 된다는 것이다.

 

하지만, 배열 뒤에 쓸 수 있는 함수 push는 허용된다.

이게 참으로 신기하다...

 

튜플이란 타입을 이번에 처음 알게 되었다.

 

튜플은 배열에 정확히 X개의 값이 필요하고 각 값의 유형을 미리 알고 있는
시나리오가 있다면 작업 중인 데이터 유형을 훨씬 더 명확하게 하기 위해서 

array 대신 tuple을 사용해보는 것이 좋다.

6. 느낀 점

시험 끝나서 시간을 내면서 계속 코딩을 하고 싶었는데,

연말이라 쉽지가 않은 것 같다.

 

그래도 계속 의식하면서 TIL을 쓰다 보면 달라질 것이라고 믿는다. 

 

빠른 시간 내에 타입에 대해서는 끝내고,

타입에 대한 것 말고도 타입스크립트의 다른 기능도 느껴보고 싶다.