비전공자의 공부일지 - TypeScript

TypeScript????

1. Type의 종류

---

Primitive tpyes

• String : 문자열을 나타낸다
• Number : 숫자를 나타낸다.
• Boolean : true(참)와 false(거짓)을 나타낸다.
• null : 하나의 값을 가진다. null
• undefined : 하나의 값을 가진다. 초기화되지 않은 변수의 기본값
• symbol : 고유한 상수의 값을 나타낸다.

 

Object tpyes

• function : 함수를 나타낸다.
• array : 배열을 나타낸다.
• classes : 클래스를 나타낸다.
• object : 객체를 나타낸다.

 

1. TypeScript 추가 제공 type

---

Any

프로젝트를 만들 때 잘 알지 못하는 타입을 표현해야 될 수도 있는데 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 컨텐츠에서 올 수도 있다.

이 경우 타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하길 원해 any타입을 사용 한다.

하지만 any타입은 많이 사용하지 않는 걸 추천한다.

let arr : any[] = ["abc", 1, true];
let abc: any = "가나다라";
abc = 1234;
abc = ['123']

이렇게 어떤 타입이든 사용할 수 있다. JS에서 그냥 평소에 사용하던 변수 방식과 같다고 생각하면 된다.

 

Union

둘 이상의 데이터의 유형을 사용할 때 사용한다.

let abc : (string | number);
abc = 123;
abc = "abc"
abd = true //error

 

 

Tuple

tuple은 JavaScript에서는 지원하지 않는 데이터 타입이지만, TypeScript에서는 배열 타입을 보다 특수한 형태로 사용할 수 있는 tuple 타입을 지원합니다. tuple에 명시적으로 지정된 형식에 따라 아이템 순서를 설정해야 되고, 추가되는 아이템 또한 tuple에 명시된 타입만 사용 가능하다

 

let book__name_price:[string, number] = ['카밍 시그널', 13320];

// [오류]
// [ts] '[number, string]' 형식은 '[string, number]' 형식에 할당할 수 없습니다.
//      'number' 형식은 'string' 형식에 할당할 수 없습니다.
// let book__name_price: [string, number]
book__name_price = [13320, '카밍 시그널'];

// [오류]
// [ts] 'false' 형식의 인수는 'string | number' 형식의 매개 변수에 할당될 수 없습니다.
book__name_price.push(false);

 

Enum

TypeScript는 enum 열거형 데이터 타입을 지원합니다. 멤버라 불리는 명명된 값의 집합을 이루는 자료형으로 기억하기 어려운 숫자 대신 친숙한 이름으로 접근/사용하기 위해 활용할 수 있습니다. 열거된 각 멤버는 별도의 값이 설정되지 않은 경우 기본적으로 0부터 시작합니다. 아래 코드에서 sarha 변수에 할당된 값은 3입니다. 설정된 Team 열거형 데이터의 Designer 멤버 값이 숫자 3이기 때문이다.

enum Team {
  Manager,   // 0
  Planner,   // 1
  Developer, // 2
  Designer,  // 3
}

let sarha:number = Team.Designer; // (enum member) Team.Designer = 3

값을 할당하지 않으면 0부터 자동으로 값이 할당된다.

enum Team {
  Manager   = 101,
  Planner   = 208,
  Developer = 302,
  Designer, // 302 + 1
}

let yamoo9:number = Team.Manager; // (enum member) Team.Manager = 101
let sarha:number = Team.Designer; // (enum member) Team.Designer = 303

값을 할당하여 사용할 수도 있다. 값을 할당하지 않는 데이터는 자동으로 전의 데이터에서 +1 해서 할당된다.

그런데 처음 할당한 값은 수정이 안된다고 한다.

 

Void

데이터가 없는 경우 사용한다. return을 사용하지 않는 function들을 void로 선언해주면 된다.

// 리턴 값 타입이 명시적으로 설정되지 않는 함수
function assignClass(name:string): void {
  document.documentElement.classList.add(name);
}

 

Never

never는 일반적으로 함수의 리턴 타입으로 사용됩니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프(loop)에 빠지는 것과 같습니다.

 

// 항상 오류 발생
function invalid(message:string): never {
  throw new Error(message);
}

// never 타입을 결과 추론(Inferred)
function fail() {
  return invalid('실패');
}

// 무한 루프
function infiniteAnimate(): never {
  while ( true ) { infiniteAnimate(); }
}

 

 

Type annotation, Type Inference

작성자가 TypeScript보다 사용하는 값에 타입을 명확하게 알고 있을 때 사용한다.

예를 들어 아래의 코드를 보면

const aa:number = 5

aa 값에 number를 사용할 거다. aa값에 들건 값의 타입은 number이다 이렇게 선언을 할 때 사용한다.

 

그와 반대로  type inference는 TypeScript가 알아서 타입을 추론한다.

const aa = 5

하지만 항상 정확한 타입을 추론하는 건 아니다.

const json = '{"a":4, "y":7}';
const jsonPar = JSON.parse(json);
console.log(jsonPar);

이렇게 작성하면 작성자는 타입이 object인걸 알지만 타입스크립트는 어떠한 값이 올지 몰라 any라고 반환된다.

이럴 때는 x의 타입은 뭔지 y의 타입은 뭔지 선언해 주면 된다.

let aaa;
aaa = "hi"

라고 변수를 먼저 선언하고 그 뒤에 값을 넣어도 any라고 뜬다. 하지만 

let aaa = "hi"

이렇게 입력하면 타입은 자동으로 string으로 선언된다.

 

Type assertion

TypeScript에서는 시스템이 추론 및 분석할 타입 내용을 우리가 원하는 대로 얼마든지 바꿀 수 있다. 이때 타입 표명(Type Assertion)이라 불리는 메커니즘이 사용된다. 타입표명은 개발자가 컴파일러에게 '내가 더 타입을 잘 알고 있으니 내가 정의한 타입이 맞아'라고 말하는 것이다.

var hi = {};
hi.bar = 123; // error bar이란 key가 없음
hi.bas = 'hi';  // error bas이란 key가 없음



interface Foo {
	bar:number;
    bas:string;
}
var hi = {} as Foo;
hi.bar = 123;
hi.bas = 'hi';

위코드를 보면 처음 hi는 오류가 나고 밑에 hi는 오류가 안 난다. 

미리 object의 타입이며 안에는 어떠한 key들이 있고 key에는 어떤 타입이 정의돼야 될지 적혀있다.

 

위의 코드처럼 as Foo를 해서 타입을 선언해 줄 수 있으며 <Foo>라고 적어 주어도 상관이 없다.

그런데 react에서는 <Foo />이런 컴포넌트들을 만들 때가 있어서 as Foo라고 하는 게 가독성 및 유보를 하는 데 있어서 더 좋다.

 

 

 

이 정도로 간단하게 타입스크립트를 알아보았다.