[TypeScript] 기본 타입과 인터페이스

 

 

타입스크립트를 쓰는 이유

🤔 브라우저는 타입스크립트를 이해하지 못한다. 근데 왜 이걸 사용할까? 

✅ JavaScript는 동적언어. 런타임에 타입이 결정되고 오류가 발견된다.

        → 만약 개발자가 실수를 하게되면 오류가 사용자에게 그대로 노출된다.

✅ Java, TypeScript는 정적언어. 컴파일시 타입이 결정되고 오류가 발견된다.

 

타입스크립트 기본타입

타입스크립트의 기본 타입에는 크게 열두가지가 있다.

Boolean, Number, String, Object, Array, Tuple, Enum, any, void, null, undefined, never

 

String, Number, Boolean, Array

// number, string, boolean
let age:number = 30;
let name:string = 'gyeol';
let isAdult:boolean = true;

// Array
let numbers1:number[] = [1,2,3];
let numbers2:Array<number> = [1,2,3];
// 타입이 배열인 경우 
// 위처럼 간단하게 선언할 수도 있고, 아래처럼 제네릭을 사용해서 선언할 수도 있다.

let week1:string[] = ['mon', 'tue', 'wed'];
let week2:Array<string> = ['mon', 'tue', 'wed'];

 

Tuple(튜플)

✅ 배열의 길이가 고정되고 각 요소의 타입이 지정되어있는 배열 형식

✅ 배열과 비슷한데 index별로 타입이 다를 때 이용 가능

let arr3:[string, number];
arr3 = ['z', 1];
// arr3 = [1,'z']; // type 에러 발생

arr3[0].toLowerCase();
// arr3[1].toLowerCase(); // Property 'toLowerCase' does not exist on type 'number'.

 

void

✅ 반환 값이 없는 함수의 반환 타입

✅ return이 없거나 return이 있더라도 반환하는 값이 없으면 함수의 반환 타입을 void로 지정한다.

function sayHello():void{
    console.log('hello');
}

 

 

Never

✅ 함수의 끝에 절대 도달하지 않는 다는 의미를 지닌 타입

// 1. 항상 에러를 반환할 때 
function showError():never{
    throw new Error();
}

// 2. 끝나지는 함수의 타입으로 선언
function infLoop():never{
    while(true){
        // do something...
    }
}

 

Enum

✅ 특정 값(상수)들의 집합을 의미한다. (C, Java와 같은 다른 언어에서 흔하게 쓰임)

✅ 특정 값만 입력하도록 강제하고 싶을 때, 그리고 그 값들이 뭔가 공통점이 있을 때 사용

 

✅ 기본적으로 Enum은 0부터 시작하여 번호를 매긴다. (배열의 index와 비슷)

       하지만 수동으로 값을 명시하면 그 부분부터 1씩 증가하여 값이 매겨진다.

enum Os {
    Window = 3,
    Ios = 10,
    Android
}

 

✅ 자바스크립트로 컴파일된 코드

"use strict";
var Os;
(function (Os) {
    Os[Os["Window"] = 3] = "Window";
    Os[Os["Ios"] = 10] = "Ios";
    Os[Os["Android"] = 11] = "Android";
})(Os || (Os = {}));

 

 

✅ 문자열 값으로 초기화한 경우 역방향 매핑은 불가능하며, 개별적으로 초기화해줘야한다.

enum Os2 {
    Window = 'win',
    Ios = 'ios',
    Android = 'and'
}

 

✅ 자바스크립트로 컴파일된 코드

"use strict";
var Os2;
(function (Os2) {
    Os2["Window"] = "win";
    Os2["Ios"] = "ios";
    Os2["Android"] = "and";
})(Os2 || (Os2 = {}));

 

 

null

let aa:null = null;

 

undefined

let bb:undefined = undefined;

 

---

인터페이스(interface)

✅ 프로퍼티를 정의해서 객체로 사용할 때는 interface로 정의를 해야한다. 안 그럼 에러가 발생한다. (아래 코드 참고)

 

let user:object;

user = {
    name: 'gyeol',
    age:30
}

console.log(user.name); // Property 'name' does not exist on type 'object'.

 

✅ 인터페이스로 정의한 코드

interface User {
    name : string;
    age : number;
    gender? : string; // 옵션 속성 
    readonly birthYear : number; // 읽기전용 속성
}


let user:User = {
    name: 'gyeol',
    age:30,
    birthYear:2000, // 최초 생성시 할당 가능
}

user.gender = 'female';
user.birthYear = 1990; 
// 읽기 전용 속성인 프로퍼티는 수정이 불가능하다.
// Cannot assign to 'birthYear' because it is a read-only property.

console.log(user.name); // 'gyeol' 출력

 

옵션 속성의 장점

✅ 단순히 인터페이스를 사용할 때 속성을 선택적으로 적용할 수 있다는 것 뿐만 아니라 인터페이스에 정의되어 있지 않은 속성에 대해서 인지시켜줄 수 있다.

 

읽기 전용 속성

✅ 읽기 전용 속성은 인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성을 의미한다.

✅ 앞에 readonly 속성을 붙여준다.

 

 

✅ 만약 User라는 interface에 학년이라는 key에 성적을 value로 여러 개 넣어주고 싶다면 아래처럼 사용하면 된다.

interface User {
    name : string;
    age : number;
    gender? : string; // 옵션 속성 
    readonly birthYear : number; // 읽기전용 속성
    [grade:number] : string; 
    // number를 key로 하고 string을 value로 받는 프로퍼티를 여러개 받을 수 있다는 뜻
}


let user:User = {
    name: 'gyeol',
    age:30,
    birthYear:2000, // 최초 생성시 할당 가능
    1 : 'A',
    2 : 'B',
}

 

✅ 위처럼 처리하게 되면 숫자도 문자도 무한정으로 사용할 수 있게 된다. 여기에 제한을 주고 싶으면? → type을 사용하면 됨

type Score = 'A' | 'B' | 'C' | 'D' | 'F';

interface User {
    name : string;
    age : number;
    gender? : string; // 옵션 속성 
    readonly birthYear : number;
    [grade:number] : Score;
}


let user:User = {
    name: 'gyeol',
    age:30,
    birthYear:2000, // 최초 생성시 할당 가능
    1: 'zz', // Type '"zz"' is not assignable to type 'Score' 에러발생!
    2: 'B',
    6: 'A'
}

 

✅ 여기서 의문..!

🤔 key 값인 grade도 타입을 정의할 수 있을까? → 안됨! 에러가 발생한다.

 

type Score = 'A' | 'B' | 'C' | 'D' | 'F';
type Grede = 1 | 2 | 3 | 4 ;

interface User {
    name : string;
    age : number;
    gender? : string; // 옵션 속성 
    readonly birthYear : number;
    [grade:Grede] : Score; // 여기서 에러 발생 !
    // An index signature parameter type cannot be a literal type or generic type. 
    // Consider using a mapped object type instead.
}

...

 

An index signature parameter type cannot be a literal type or generic type. Consider using a mapped object type instead.

→

index signature 타입으로는 literal type or generic typed은 사용할 수 없으니 대신에 mapped object type을 사용하라는 뜻. index signature 타입으로는 string, number, symbol 등의 타입만 사용이 가능하다.

 

 

interface로 함수 타입 정의하기

interface Add {
    (num1:number, num2: number):number;
}

const add : Add = function(x,y){
    return x+y;
}

add(10,20); // 30 리턴

interface IsAdult { 
    (age:number):boolean;
}

// 화살표 함수 사용해서 함수 만들기
const checkAdult:IsAdult = (age) => {
    return age > 19;
}

checkAdult(33) // true 리턴

 

 

 

interface로 class 타입 정의하기 → implements

✅ C#이나 Java처럼 클래스가 일정 조건을 만족하도록 타입 규칙을 정할 수 있다.

 

interface Car {
    color: string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    color;
    wheels = 4;
    constructor(c:string) {
        this.color = c;
    }

    start(){
        console.log('go!!!!')
    }
}

const newCar = new Bmw('yellow');
console.log(newCar);
newCar.start();

 

 

interface 확장

✅ extends 키워드를 사용하여 확장이 가능하다.

interface Benz extends Car {
    door : number;
    stop() : void;
}

const benz : Benz = {
    color : 'red',
    wheels: 4,
    start(){
        console.log('go!!!!')
    },
    door : 5,
    stop(){
        console.log('stop!!!!');
    }
}

benz.stop(); // 'stop!!!!' 출력

 

여러 개의 interface 확장하기

interface Car {
    color: string;
    wheels:number;
    start(): void;
}
interface Toy {
    name: string;
}

interface ToyCar extends Car, Toy {
    price :number;
}

 

 

---

Reference

https://www.youtube.com/watch?v=5oGAkQsGWkc&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=2 

 

https://joshua1988.github.io/ts/guide/interfaces.html#%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%83%80%EC%9E%85

인터페이스 | 타입스크립트 핸드북