TypeScript - 기본타입, 인터페이스

 

자바스크립트와의 차이점

 

Javascript(동적언어)

런타임에 타입이 결정되며, 오류를 발견함

function add(num1, num2) {
	console.log(num1 + num2);
}

add();//NaN
add(1);//NaN
add(1,2);//3
add(3,4,5);//7
add("hello","world");//helloworld

 

Java, TypeScript(정적언어)

컴파일 타임에 타입 결정되며, 오류를 발견함

function add(num1:number, num2:number) {
	console.log(num1 + num2);
}

add();//error
add(1);//error
add(1,2);//3
add(3,4,5);//error
add("hello","world");//error

 

 

 

타입 스크립트의 기본타입

 

변수명 : 타입 의 형태로 작성한다

 

숫자

let age:number = 30;

 

불린

let isAdult:boolean = true;

 

문자열

let name:string = "Yujeong";

 

배열

let a:number[] = [1,2,3];
let a:Array<number> = [1,2,3];


a.push(4);
a.push("hi");//error

 

type

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

Score타입의 변수는 A,B,C,D,F중 한개만 값으로 가질 수 있는 변수임

 

튜플

let b:[string, number];
b = ["yujeong", 22];


//b[0] : yujeong
//b[1] : 22

 

void

함수에서 아무것도 반환하지 않을 때 주로 사용

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

 

never

무한루프를 돌거나, 에러를 반환하는 함수에서 주로 사용 

function showError():never{
	throw new Error();
}


function infLoop():never{
	while(true){
    	//....
    }
}

 

 

enum

특정값 만을 입력하고 싶을 때, 공통점이 있을 때 사용하면 좋다.

 

enum OS{
	Window, //0
	Ios, // 1
	Android// 2
}

enum OS{
	Window = 3, //3
	Ios, // 4
	Android// 5
}


console.log(Os[3]) // Window
console.log(Os['Ios']) // 4

 

참고 js버전 

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

 

문자열 enum

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


let myOs:Os;

myOs = Os.Window; //OS 중 3가지 만 입력가능한 변수

 

참고 js 버전으로 선언시

var Os;
(fuction (Os) {
	Os["Window"] = "win";
	Os["Ios"] = "ios";
	Os["Android"] = "and";
})(Os || (Os = {}));

 

 

null & undefined

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

 

 

 

 

인터페이스

 

객체 (object)

let user:object;

user = {
	name : 'xx',
	age : 20
}

//user.name 접근이 불가능함

 object는 name이라는 속성값을 가지고 있지 않아서 user.name으로 접근이 불가능함

 

이를 해결하기 위해 '인터페이스'를 사용함

 

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


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

//user.age 접근가능

이렇게 되면 User라는 인터페이스가 name이라는 속성값을 가지고있게 되므로 오류가 나지않는다.

 

이때, 속성(property)값들에 여러가지 조건을 줄 수 있다.

지금 위의 name, age값은 default property로 자유롭게 수정이 가능하며, 필수로 입력해야만 오류가 나지 않는 값이다.

 

다양한 Properties 속성들 

interface User {
	name : string;
	gender ? : string; //optional : 필수로 입력하지 않아도 되는 값
	readonly birthYear : number; //선언 후 변경이 불가능한 값
	[grade:number] : string; //key(number) : value(string) property 
}

 

 

함수

인터페이스로 함수의 형태(파라미터의 타입과 리턴타입)를 미리 정의할 수도 있다.

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

const add : Add = function(x, y){ //변수명(num1, num2)은 변경 가능 
	return x + y;
}

add(10,20);
add(10, 'str'); //파라미터의 타입이 둘다 number였으므로 에러임

 

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


const a:IsAdult = (age) => {//화살표함수로 선언
	return age > 19;
}


a(33);

 

 

 

클래스 

인터페이스를 이용하여 클래스를 만들 수 있음 (implements)이용

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 mycar = new Bmw('green');

Car라는 인터페이스를 이용하여, 해당 인터페이스가 보유한 모든 프로퍼티를 가진 클래스를 만들 수 있다.(implements)

 

extends를 이용하면, 인터페이스가 가진 프로퍼티 외 다른 값을 가진 인터페이스 를 생성할 수 있다.

(인터페이스가 가진 속성은 모두 가져야한다.)

또한, extends로 여러 인터페이스를 가질 수도 있다.

 

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


interface Toy {
	name : string;
}


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

다음과 같은 (ToyCar)인터페이스로 클래스를 생성한 경우

모든 인터페이스(Car, Toy, ToyCar)가 가진 프로퍼티(color, wheels, name, price, start() )를 전부 보유해야만 한다. 

 

 

참고영상

https://youtu.be/5oGAkQsGWkc