Typescript - Basic

Typescript

Typescript는 Javascript의 구문이 허용되는 Javascript의 상위집합언어이다.

Defining Types - 타입 정의하기

Typescript는 Type이 무엇이 되어야 하는지 명시 가능한 Javascript 언어의 확장을 지원한다.

const user = {
  name: "Hayes",
  id: 0,
};

name과 id를 가진 user객체에서
name: string, id:number을 포함하는 추론타입을 가진 객체의 형태를 명시적으로 나타내기 위해서는 interface로 선언한다

interface User {
  name: string;
  id: number;
}

const user: User = {
  name: "Hayes",
  id: 0,
};

변수 선언 뒤에, : TypeName 구문을 사용해서 Javascript 객체가 새로운 interface의 형태를 따르고 있음을 선언할 수 있다.
만약 interface에 맞지않는 객체를 생성하면 에러가 발생하게 된다.

Types - 기본 타입

Typescript는 Javascript와 거의 동일한 데이터 타입을 지원한다.

Boolean

let enjoy: boolean = false

Number

let enjoy: number = 10

String

let enjoy: string = "ENJOY"
enjoy = 100;

// Type 'number' is not assignable to type 'string'.ts(2322)

Array

Array는 두 가지 방법으로 쓸 수 있다.

1 - 요소들의 타입 뒤에 []

let enjoy: number[] = [1, 2, 3];

2 - 제네릭 배열 타입

let enjoy: Array<number> = [1, 2, 3];

Tuple

튜플 타입을 사용하면, 요소의 타입과 갯수가 고정된 배열을 표현할 수 있다.
요소들의 타입은 모두 같지 않아도 된다.

let enjoy: [string, number];

-----------------------------

enjoy = ["ENJOY", 10];  // O

enjoy = [10, "ENJOY"];  // X
// Type 'number' is not assignable to type 'string'.
// Type 'string' is not assignable to type 'number'.

Enum

enum Enjoy {Red, Green, Blue}
let a: Enjoy = Enjoy.Red;
let b: Enjoy = Enjoy.Green;
let c: Enjoy = Enjoy.Blue;

console.log(a) // 0
console.log(b) // 1
console.log(c) // 2

기본적으로 enum은 0부터 시작하여 요소들에 번호를 매긴다.
수동으로 번호를 변경할 수 있으며, 매겨진 값을 이용해서 요소의 값을 알 수 있다.

enum Enjoy {Red = 10, Green = 12, Blue = 54}
let c: Enjoy = Enjoy.Green;

console.log(c) // 12

let colorName: string = Enjoy[54];

console.log(colorName) // "Blue"

Any

어떠한 타입이 들어오게 될지 알지 못할 수도 있다. 이 경우에는 타입 검사를 하지 않고 컴파일이 되어야 한다.
이때 any타입을 사용할 수 있다.

let anyEnjoy: any = 10;

anyEnjoy = "ENJOY" // O

anyEnjoy = true;   // O

또한 여러 다른 타입이 섞여있는 배열을 다룰 때 유용하게 쓰일 수 있다.

let enjoyList: any[] = [10, true, "ENJOY"]

enjoyList[1] = 50; // O

Void

void는 어떠한 타입도 존재할 수 없음을 나타내기 때문에, any의 반대의 의미를 가진다.
아무것도 반환하지 않는 함수에 사용하는 타입이다.

const enjoy = (name: string): void => {
 	 console.log(name)
};

위 처럼 return이 없는 함수에 void타입을 지정하게 된다.
void가 지정되면 undefined를 반환한다.
Typescipt는 아무것도 반환하지 않는 함수에 void타입을 지정해주기 때문에 별도로 지정하지 않아도 오류가 발생하지 않는다.

Null and Undefined

TypeScript는 undefined와 null 둘 다 각각 자신의 타입 이름으로 undefined, null로 사용한다.
void처럼 그 자체로 유용한 경우는 거의 없다.

let unEnjoy: undefined = undefined;
let nullEnjoy: null = null;

Object

원시 타입이 아닌 타입을 나타낸다.
number, string, boolean, bigint, symbol, null, undefined가 아닌 나머지를 의미한다.