24) Typescript interface

ppparkta·2023년 1월 1일
1

웹개발

목록 보기
25/26

요약

  • Typescript
    • 사용 이유
    • 기본 타입
    • interface
    • function

Typescript

타입스크립트를 사용하는 이유

자바스크립트는 동적 언어이다. 그래서 런타임에 타입이 결정되고 오류도 런타임에 발견된다. 따라서 코드를 작성할 때는 오류를 발견하기 어렵다.

타입스크립트는 자바 등과 같은 정적 언어이다. 컴파일 타임에 타입이 결정되고 오류도 컴파일할 때 함께 발견된다. 따라서 오류를 더 쉽게 찾아낼 수 있다.

기본 타입

number, string, boolean

자바스크립트에 존재하는 기본 자료를 변수명 뒤에 :와 함께 붙인다.

let age:number = 30;
let isAdult:boolean = true;

undefined, null

let a:null = null;
let b:undefined = undefined;

배열

배열을 타입스크립트로 사용하는 방법은 두가지가 있다.

let a:number[] = [1, 2, 3];
let b:Array<string> = ["a", "b", "c"];

튜플

튜플은 여러가지 자료형을 한 배열에 넣는 타입이다.

타입스크립트

//튜플
let b:[string,number];
b=['z',1];
// b=[1,'z'];

자바스크립트

//튜플
let b;
b = ['z', 1];
// b=[1,'z'];

함수

void, never

타입스크립트

//void, never
function sayHello():void{
    console.log('hello');
}
function sayError():never{
    throw new Error();
}
function infLoop():never{
    while(true){
        //do something...
    }
}

자바스크립트

//void, never
function sayHello() {
    console.log('hello');
}
function sayError() {
    throw new Error();
}
function infLoop() {
    while (true) {
        //do something...
    }
}

enum

타입스크립트에서 enum이라는 타입을 사용할 수 있다.

타입스크립트

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

자바스크립트

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

자바스크립트에 enum 자료가 없기 때문에 다소 낯설게 느껴진다. console.log(Os['Ios']); 를 콘솔창에 입력했을 때 10 이 나오고, console.log(Os[10]); 을 입력했을 때 'Ios'가 나오는 자료이다.

enum안의 값을 따로 설정하지 않으면 기본적으로 0부터 1씩 늘어난 수가 값으로 매겨진다. 위의 예시에서는 Window에 3을 할당하고 Ios에 10을 할당했는데, Android에는 값을 할당하지 않았다.

일부에만 값이 없는 경우 할당된 값의 다음 값부터 값이 매겨진다. 그래서 Android의 값은 11이다.

enum에 숫자가 아니라 문자열도 할당할 수 있다. 그러나 이 경우 양방향 맵핑이 아닌 단방향 맵핑만 지원한다.

interface

특정 property를 지정해서 사용할 때는 interface를 사용한다. 기본타입처럼 :object 를 붙이지 않는 이유는 어떤 property의 값이 무엇인지 타입스크립트가 구분할 수 없기 때문이다.

따라서 어떤 property를 담은 오브젝트를 사용할지에 대해 interface를 만들어야 한다.

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

let user:User = {
 	name:'xx',
  	age:30,
};

option

타입스크립트의 특성으로 인해 인터페이스에 포함된 모든 property를 작성하지 않으면 오류가 난다. 그렇다면 일부 property만 필수로 작성하고 나머지는 옵션으로 처리하고 싶다면 어떻게 할까?

interface User{
	name:string;
  	age:number;
  	gender? : string;
}

let user:User = {
 	name:'xx',
  	age:30,
};

인터페이스 안의 property에 ?를 붙이면 된다. gender? : string; 으로 작성했기 때문에 user라는 객체에 gender값을 입력하지 않아도 오류가 나지 않는다.

readonly

이렇게 생성된 객체는 값에 접근하고 변경할 수 있다. 값에는 접근할 수 있지만 값을 변경하지 못하게 하려면 readonly를 사용하면 된다.

interface User{
	name:string;
  	age:number;
  	gender? : string;
    readonly birthYear : number;
}

let user:User = {
 	name:'xx',
  	age:30,
  	birthYear:2000,
};

인덱스 서명

어떤 값이 몇개가 필요한지 정확히 알 수 없는 경우 인덱스 서명을 사용하면 내가 원하는 타입의 자료를 여러개 받아올 수 있다.

interface User{
	name:string;
  	age:number;
  	[grade:number]:string;
}

위의 예시에서 숫자인 property에 대한 값을 문자열로 할당받는 것을 여러번 반복할 수 있다.

리터럴 타입

리터럴 타입을 사용하면 문자열이나 숫자에 정확한 값을 지정할 수 있다.

예를 들어 성적property가 있을 때 이 속성에 들어올 수 있는 값은 항상 A, B, C, F 중 하나여야 한다. 이럴 때 문자열 리터럴 타입을 사용할 수 있다.

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

interface User{
	name:string;
  	age:number;
  	[grade:number]:Score;
}

함수 interface

함수도 인터페이스로 정의할 수 있다.

interface Add {
	(인자값) : 리턴값;
}

다음과 같은 형식으로 지정하여 함수를 작성할 때 붙여서 사용할 수 있다.

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

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

순서만 맞추면 이름 바꾸는건 상관없음

함수

앞서 함수를 사용하기 위해 인터페이스를 지정할 수 있다고 설명했다. 그러나 인터페이스를 작성하지 않고 함수에 바로 타입을 붙여서 사용하는 것도 가능하다.

function add(name) {
	return (`hello ${name || "world"}`);
}

다음과 같은 함수를 타입스크립트로 변환하기 위해 다음과 같이 만들면 된다.

function add(name:string): string {
	return (`hello ${name || "world"}`);
}

입력받는 매개변수가 나머지 매개변수일 때는 타입을 배열로 지정해야 한다.

function add(...nums: number[]) {
	return nums.reduce((result,num) => result + num, 0);
}

add(1, 2, 3); //6
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); //55
profile
겉촉속촉

0개의 댓글