[TypeScript] Types of TypeScript

Sang Young Ha·2022년 1월 2일

TypeScript variable types

TypeScript에선 변수를 선언 할 때 type 도 같이 선언 해 준다.

let id: number = 3;
let myName: string = "Sean"
let isHungry: boolean = true

와 같이 선언이 가능하며,

let x: any = "Hello"
x = true

let age: number
age = 28

위와 같이 type 을 any로 지정 해 주면 처음 선언시 "Hello"라는 string type을 초기값으로 주었지만 밑에 x = true 라고 값을 다시 줘도 에러가 뜨지 않는다.

Array 의 경우는, Array 의 type 에 따른 value들 만 넣어줄 수 있다.

let ids: number[] = [1,2,3,4,5]
ids.push('Hello') //에러 생성

와 같은 상황에서, ids 라는 Array 를 Array of number 로 선언 해 주었기 때문에 hello 라는 string을 push 할 수 없다.

any[] 로 array type을 선언 하였다면 ids.push('hello')가 가능 했을 것이며 해당 어레이 끝에 hello 라는 string 이 담긴다.

Tuple & Tuple Array

다음과 같이 Tuple 을 통해 array 안의 각각의 값에 type을 정해 줄 수도 있다. (순서를 맞춰 줘야 한다)

let tuple: [string, number, boolean, any] = ['Sean', 3, false, 10]

다음과 같이 Tuple Array 도 선언이 가능하다.

let tupleArray: [number, string][] = [
  [1, "John"],
  [2, "Sean"],
  [3, "Logan"],
];

Union

let unionExample: string | number = '30'

위와 같이 type 을 정해주는 것을 union 이라고 하는데, 30을 숫자로 값을 줘도 되고 "30"으로 string 으로 줘도 되게 된다.

Enumerated Type (Enum)

lets us define a set of named consants.
auto-incrementing behavior 을 가진다.

enum Direction {
    Up,
    Down,
    Left,
    Right
}

위와 같은 코드에서, Direction.Up 은 초기값으로 0을 가지며, Down 은 1, Left 는 2와 같은 식으로 증가한다.
Up = 1 이라고 초기값을 1이라고 줬다면, Down 은 2가 된다.

Objects

TypeScript 의 object 생성 방식.
1)

const students: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "Sean",
};

2) 또는 object의 타입을 type 키워드를 통해 선언 해 주고, 그것을 object 의 타입으로 받아 올 수 있다.

type Students = {
  id: number;
  name: string;
};

const students2: Students = {
  id: 1,
  name: "Sean",
};

Type Assertion (타입 표명)

아래와 같이 컴퓨터가 분석한 타입 내용을 type assertion을 통해 프로그래머가 원하는 대로 바꿀 수 있다.
사용에 주의가 필요하다.

let pid: any = 2

let productId = <number>pid //JSX 문법과 헷갈릴 수 있으므로 아래와 같이 as 를 쓰는게 더 좋다
let prodId = pid as number

Function Declaration

function addNum(x: number, y:number): number {
    return x + y
}

x: number, y: number을 통해 파라미터들의 type을 꼭 정해 주어야 하며, 괄호 뒤에붙은 :number은 return value 의 type을 정한다.
아래와 같이 return value 가 없는 함수에는 :void 로 type을 정해준다.
(함수의 파라미터 또한 union 이나 다른 방식으로 타입 설정이 가능하다)

function log(text : string | number) : void {
	console.log(text)
}

Interfaces

type 과 달리 interface에는 union을 사용 할 수 없다.

type Example = number | string //가능
const example: Example = 1

interface Example = number | string //불가능

interface Example. Object 를 declare할 때 사용하면 좋다.

interface User {
    readonly id: number; //readonly를 통해 다른 value를 assign할 수 없게 한다.
    name: string;
    age?: number; // ? 를 통해 age 는 optional로 설정한다.
  };
  
  const user: User = {
    id: 1,
    name: "Sean" // age가 없지만 ?를 통해 optional property가 있으므로 에러가 안뜬다.
  };
  user.name = "Tommy" // 가능
  user.id = 3 // interface의 readonly 키워드 때문에 불가능

interface as a template for functions

  interface MathFunc {
      (x: number, y:number) : number
  }
  const add: MathFunc = (x: number, y: number): number => x + y
  const subtract: MathFunc = (x: number, y: number): number => x - y

Classes

class Person {
  private id: number; //private == access modifier
  name: string;

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }

  register() {
    return `${this.name} is registered`;
  }
}
const sean = new Person(1, "Sean Mendez");

Access(data) Modifier

id, name 은 기본적으로 public인데, access modifier 을 통해 private 이나 protected 로 변경 할 수 있다.

interface를 통한 class

interface PersonInterface {
  id: number
  name: string
  register(): string
}

로 interface를 설정 해 주고,

class Person implements PersonInterface {

:이 아닌 implements 키워드를 통해 설정 한다.

Subclasses

class Player extends Person {
  position: string
  
  constructor(id:number, name:string, position:string){
    super(id, name)
    this.position = position
  }
}

const footBall = new Player(3, 'Tommy', 'Line Back')

extends 키워드를 통해 Person class를 받아오고, position 이라는 property를 추가 해 주었다.
Person class로 부터 extend 한 property id 와 name은 constructor 에서 super(id,name)을 통해 받아온다.

Generics

function getArray(items: any[]): any[] {
  return new Array().concat(items)
}

let numArray = getArray([1,2,3,4])
let strArray = getArray(['sean','tommy','john','mike'])

위의 예시 코드에서, getArray 함수를 통해 각각 숫자, 스트링 어레이를 하나씩 만드려고 하는데, items 의 type 이 any 이므로 아래와 같이 숫자 어레이에 스트링을 push 해도 에러가 나지 않는다.

numArray.push('hihi')

숫자 어레이에는 숫자만 넣을 수 있게 아래와 같이 generic을 사용 할 수 있다.

function getArray<T>(items: T[]): T[] {
  return new Array().concat(items)
}

let numArray = getArray<number>([1,2,3,4])
let strArray = getArray<string>(['sean','tommy','john','mike'])