1. 타입 선언

ts 는 변수명 뒤에 타입을 명시하여 타입 선언이 가능하다.

let foo: string = "heelo";

함수의 선언은 다음과 같이 할 수 있다.
반환값과 매개변수의 타입을 선언해줄 수 있다.

function multiply1(x: number, y: number): number {
  return x * y;
}

ts의 타입 종류는 Js 와 같으며, ts 고유의 타입이 추가로 제공된다.

• array : 배열
• tuple : 고정된 요소수 만큼의 타입을 미리 선언 후 배열로 표현
• any : 타입 추론을 할 수 없거나, 타입 체크가 필요없는 변수에 사용
• void : 함수에서 반환값이 없을 때 사용
• never : 결고 발생하지 않는 값 ?
• enum : 숫자값 집합에 이름을 지정한 것

const obj: object = {};
let list3: Array<number> = [1, 2, 3]; // 제네릭 배열 타입

tuple

let tuple: [string, number];
tuple = ["hello", 10]; // OK

enum

숫자값 집합에 이름을 지정한 것

enum Color1 {
  Red,
  Green,
  Blue,
}
let c1: Color1 = Color1.Green;

console.log(c1); // 1

enum Color2 {
  Red = 1,
  Green,
  Blue,
}
let c2: Color2 = Color2.Green;

console.log(c2); // 2

enum Color3 {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c3: Color3 = Color3.Blue;

console.log(c3); // 4

string 타입에 String 타입을 할당하면 에러가 난다.
String은 객체이기 때문이다.

그 외의 타입들

• Date
• HTMLElement
• class

2. 정적 타이핑

js 는 동적 타입 언어로 변수의 타입 선언 없이 할당되는 과정에서 동적으로 타입을 추론한다.

ts 는 타입을 명시적으로 선언하며, 타입이 결정된 후에는 타입을 변경할 수 없다.

정적 타이핑의 장점은 아래와 같다.

• 코드 가독성
• 예측성
• 안정성의 향상

3. 타입 추론

타입 선언을 생략하면 값이 할당되는 동안 동적으로 타입이 결정된다.
타입 추론을 통해 타입이 결정되면, 다른 타입의 값을 할당할 수 없다.

타입 선언만 하고 할당하지 않으면 any 타입이 되기 때문에, 어떤 값이라도 할당 가능하다.

let foo;
foo = 4;
foo = "4";

하지만! TS 의 장점을 없애기 때문에 사용하지 않는 것이 좋다.

4. 타입 캐스팅

기존의 타입에서 다른 타입으로 타입 캐스팅 하려면 as 키워드나 <> 연산자를 사용한다.

const $input = document.querySelector('input["type="text"]');
// => $input: Element | null

const val = $input.value;
// TS2339: Property 'value' does not exist on type 'Element'.

(이걸 해결 가능하게 하네..)

document.querySelector('input["type="text"]')는 Element 혹은 null 타입이다.
이 타입에는 value 프로퍼티가 없기 때문에 에러가 발생한다.

value 프로퍼티는 Element의 하위 타입인 HTMLInputElement 에만 존재한다.

타입 캐스팅을 통해 문제를 해결할 수 있다.

const $input = document.querySelector(
  'input["type="text"]'
) as HTMLInputElement;
const val = $input.value;

as 대신에 <> 연산자를 이용할 수도 있다.

const $input = <HTMLInputElement>document.querySelector('input["type="text"]');
const val = $input.value;