TypeScript 기초 연습

  React Native와 TypeScript의 조합이 자주 쓰이는 요즘, TypeScript의 기초에 대한 연습을 해보려고 한다.

---

기본 타입 정의

let count = 0; // 숫자
count += 1;
count = '갑분문' // 이러면 에러

const message: string = 'hello world'; // 문자열
const done: boolean = true; // 불리언 값 (논리값)

const numbers: number[] = [1,2,3]; // 숫자 배열
const messages: string[] = ['hello', 'world']; // 문자열 배열

messages.push(1); // 문자열 배열인데 숫자를 넣게 되면 에러

let mightBeUndefined: string | undefined = undefined; // string 일수도 있고 undefined 일수도 있다.
let nullableNumber: number | null = null; // number 일수도 있고 null 일수도 있다.

let color: 'red'|'orange'|'yellow' = 'red'; // color는 red, orange, yellow 중에 하나이다.
color= 'yellow'; // color = 'green' 은 오류.

  - 타입스크립트를 사용하면 이렇게 특정 변수 또는 상수의 타입을 지정 할 수 있다.

  - 사전에 지정한 타입이 아닌 값이 설정 될 때 바로 에러를 발생시킨다.

  - 에러가 발생했을 때는 컴파일이 되지 않는다.

 

함수에서 타입 정의하기

function sum(x: number, y: number): number {
    return x+y;
}
sum(1,2);

function sumArray(numbers: number[]):number {
    return numbers.reduce((acc, current) => acc + current, 0);
}

const total = sumArray([1,2,3,4,5]);

  - 타입스크립트를 사용하면 코드를 작성하는 과정에서 함수의 파라미터로 어떤 타입을 넣어야 하는지 바로 알 수 있다.

  - 코드 첫 째 줄의 가장 우측을 보면 ): number는 해당 함수의 결과물이 숫자라는 것을 명시한다.

  - 배열의 내장 함수를 사용할 때에도 타입 유추가 매우 잘 이루어진다.

 

Interface 사용해보기

클래스에서 interface를 implements 하기

 

  클래스를 만들 때, 특정 조건을 준수해야 함을 명시하고 싶을 때 interface를 사용하여 클래스가 가지고 있어야 할 요구사항을 설정한다. 그리고 클래스를 선언 할 때 implements 키워드를 사용하여 해당 클래스가 특정 interface의 요구사항을 구현한다는 것을 명시한다.

 

interface Shape {
    getArea(): number;
}

class Circle implements Shape {
    radius: number;

    constructor(radius: number){
        this.radius = radius;
    }
    getArea(): number {
        return this.radius * this.radius * Math.PI;
    }
}

class Rectangle implements Shape{
    width: number;
    height: number;

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }
    getArea(): number {
        return this.width * this.height;
    }
}

const shapes: Shape[] = [new Circle(5), new Rectangle(10, 5)];

shapes.forEach(shape =>{
   console.log(shape.getArea());
});

 

<실행결과>