typescript

What is typescript?

typescript 는 자바스크립트(ES5)의 superset(상위확장) 언어이다.

typescript 를 브라우저에서 실행하기 위해서는 javascript 로 변환하는 과정을 한번 거쳐야 한다. 이를 컴파일이라고 한다.

www.typescripttutorial.net/typescript-tutorial/what-is-typescript/

typescript 가 핫한 이유는 C나 java 처럼 변수의 타입을 사전에 지정할 수 있기 때문이다. 변수의 타입을 미리 지정하면 에러를 사전에 미리 예방할 수 있을 뿐만 아니라 코드의 가독성이 높아진다. 또한 IDE 의 코드 가이드/자동완성 기능을 통해 개발 생산성을 향상시킬 수 있다.

javascript 는 동적 타입dynamic typed 을 지원하며 비교적 느슨한loosely 타입의 언어를 사용한다. 이는 변수의 타입 선언 없이, 값이 할당되는 과정에서 동적으로 타입을 추론한다는 의미이다. 추론에 의해 변수의 타입이 결정된 후에도 같은 변수에 여러 타입의 값을 교차하여 할당할 수 있다. 동적 타입은 사용하기에는 편리하지만 코드를 예측하기 힘들어 예상하지 못한 오류를 만들 가능성이 높다.

반면에 typescript 는 정적 타입static typed 을 지원한다. 변수를 선언할 때 변수에 할당할 값의 타입에 따라 사전에 타입을 명시적으로 선언declaration 하고 선언한 타입에 맞는 값을 할당해야 한다. 타입이 결정된 후에는 타입을 변경할 수 없고, 잘못된 타입의 값이 할당 또는 반환되면 컴파일러가 이를 감지하여 에러를 발생시킨다. 기존의 타입에서 다른 타입으로 타입 캐스팅하기 위해서는 as 키워드 혹은 <> 연산자를 사용해야 한다.

기본 타입의 정의

let str: string = 'hi';

: 를 어노테이션annotation, 타입표기 라고 한다.

위와 같이 어노테이션을 이용하여 타입을 명시적으로 사용할 수 있고,

let str = 'hi';

따로 타입을 지정하지 않아도 타입스크립트가 처음에 선언된 값을 통해 타입을 유추할 수 있도록 암시적으로 적용할수도 있다.

typescript 는 소문자와 대문자를 구별하므로 주의가 필요하다. 기본으로 제공하는 타입은 모두 소문자이다.

primitive

number, string, boolean

object

object 는 여러 타입의 값을 대입할 수 있는 구조로 되어있으며, interface 로 타입을 정의하여 사용한다.

interface Animals {
    Dog : string,
    Cat : number,
    Dolphin : boolean
}


const animal: Animals = {
    Dog : '개',
    Cat : 123,
    Dolphin : true
}

주의할 점으로는 interface 에서 선언된 프로퍼티 키와 값에 설정된 타입을 모두 사용해야 한다.

Animals 객체의 Cat, Dolphin 프로퍼티가 없다 

Dolphin 프로퍼티의 타입이 선언된 바와 다르다

사용하지 않기 위해서는 ? 기호를 사용하여 선택적optional 프로퍼티 설정을 해야 한다.

Cat 이 없어도 에러가 발생하지 않는다.

 

클래스 선언 문의 implements 뒤에 인터페이스를 선언하면, 해당 클래스는 지정된 인터페이스를 반드시 구현하여야 한다.

interface Animals {
    Dog : string,
    Cat : number,
    Dolphin : boolean
}

class animal implements Animals {
    constructor (
        public Dog: string,
        public Cat: number,
        public Dolphin: boolean
    ) {}
}

인터페이스는 extends 키워드를 사용하여 인터페이스 또는 클래스를 상속받을 수 있다. 복수의 인터페이스를 상속받을수도 있다.

interface Animals {
    Dog : string,
    Cat? : number,
    Dolphin? : boolean
}

interface Animals1 extends Animals {
    Cow : string
}

const animals1 : Animals1 = {
    Dog: '개',
    Cow: '소'
}

array

let Animals: string[] = ['Dog', 'Cat', 'Dolphin']

let Animals1: any[] = ['Dog', 123, true]

let Animals2:(number|string)[] = ['Dog', 123];

// 제네릭generic 배열 타입

let Animals3: Array<string> = ['Dog', 'Cat', 'Dolphin']

Animals1, Animals2 처럼 복합적인 타입으로도 정의 가능하다.

어노테이션으로 명시해주지 않은 타입의 데이터가 들어갈 경우 ts 가 자체적으로 에러라고 알려준다.

tuple

javascript 에서는 tuple 을 지원하지 않지만 typescript 에서는 보다 더 다양한 array 의 형태를 위해 tuple 을 지원한다.

let Animals:[string, string, string] = ['Dog', 'Cat', 'Dolphin']

let Animals1:[string, string, [string]] = ['Dog', 'Cat', ['Dolphin']]

console.log(Animals[0]) // Dog
console.log(Animals1[2]) // [ 'Dolphin' ]

 

인덱스를 통해 요소에 접근할 수 있다.

명시하지 않은 타입의 데이터가 들어갈 경우,

ts 가 자체적으로 에러라고 알려준다.

enum

이넘은 특정 값(상수)들의 집합을 의미한다. 인덱스를 통해서 접근할 수 있다. 기본적으로 0부터 시작한다.

enum Animals { Dog, Cat, Dolphin }

let animal: Animals = Animals.Cat;

각 원소에 숫자 또는 문자열을 할당할 수 있으며, 명시적으로 값을 입력하지 않으면 이전 원소에서 1만큼 증가된 값이 할당된다.

enum Animals { Dog = 2, Cat, Dolphin }

let animal: number = Animals.Cat // 3

enum Animals { Dog, Cat = 5, Dolphin }

let animal: number = Animals.Dog // 0

let animal: number = Animals.Dolphin // 6

let animal: string = Animals[5] // Cat

Any

단어 그대로 모든 타입에 대해서 허용한다는 의미를 갖고 있다.

동적 형 지정 언어인 javascript 는 선언된 변수에 어떤 타입의 값이든 재할당이 가능하나, typescript 는 데이터 유형을 설정해 사용하는 정적형 지정 언어이다. 즉, javascript 는 기본적으로 변수에 any 가 할당된 것과 다름 없다. any 타입은 기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 혹은 어떤 타입을 할당해야 할지 아직 알지 못하는 경우 설정해두면 좋다.

Void

변수에는 undefined 와 null 만 할당하고, 함수에는 반환값을 설정할 수 없는 타입이다. 아무 값도 반환하지 않고 종료된다.

Never

함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입이다. 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미한다.

---

-ref) typescript_deep_dive , https://poiemaweb.com/typescript-typing , https://www.typescriptlang.org/docs/handbook/intro.html , https://www.typescripttutorial.net/typescript-tutorial/what-is-typescript/