[스터디 with 실전 리액트 프로그래밍] 19편 - 타입스크립트

실전 리액트 프로그래밍

 

동적 타입 언어 <> 정적 타입 언어

 

변수에는 여러가지 타입이 있다.

언어마다 조금씩 상이하긴 하지만 숫자, 문자열, 배열 등이 있다.

이 변수의 타입이 런타임에 결정되는 언어가 있고, 컴파일 타임에 결정되는 언어가 있다.

전자를 동적 타입 언어라 하고 후자를 정적 타입 언어라 한다.

 

자바스크립트는 동적 타입 언어다.

동적 타입 언어이기 때문에 숫자로 초기화한 변수에 문자열을 할당해도 문제가 없다.

동적 타입 언어는 코드의 양이 적을 때는 생산성이 높지만,

코드가 복잡해지면 런타임 시 예상치 못한 오류가 발생할 가능성이 높아지고 그 에러를 찾기도 힘들어진다.

그래서 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 타입스크립크(TypeScript)가 등장했다.

 

 

 

 

타입스크립트의 여러 타입들

 

타입스크립트에서는 여러가지 타입을 정의할 수 있다.

// 숫자
const num1: number = 123;
    
// 문자열
const str1: string = 'abc';
    
// 숫자나 문자열
const var1: number | string = 123;
    
// 숫자 배열
const arr1: number[] = [1, 2, 3]
const arr2: Array<number> = [1, 2, 3]
    
// null
const var2: null = null;
    
// undefined
const var3: undefined = undefined;

 

 

문자열 리터럴과 숫자 리터럴도 타입으로 정의할 수 있다.

숫자 리터럴 타입

 

 

any 타입은 모든 종류의 값을 허용한다.

타입을 알 수 없거나 타입 정의가 안된 외부 패키지를 사용하는 경우에 사용하면 된다.

그 밖에 any를 사용하는 것은 타입스크립트를 사용하는 의미가 퇴색되기 때문에 사용을 피하자.

const v1: any = '123';

 

 

type 키워드로 타입에 별칭을 줄 수도 있다.

type Width = number | string;
let width: Width;
width = 123;
width = '123';

 

 

 

 

인터페이스

 

인터페이스로 객체의 타입을 정의해보자.

인터페이스로 정의할 때는 interface 키워드를 사용한다.

interface Person {
    name: string;
    age: number;
}

const p1: Person = { name: 'Junhee', age: 25 };

 

만약 속성값의 타입이 interface로 정의한 것과 다르거나, 정의하지 않은 속성을 사용하는 경우 에러가 발생한다.