[타입스크립트] 타입스크립트의 타입, 클래스와 인터페이스

타입스크립트의 타입

---

any 타입

• 동적 타입
• 컴파일러가 타입을 확인하지 않음 → 사실상 타입이 없음

unknown 타입

• unknown으로 타입을 선언하면 해당 변수에 모든 타입의 값을 설정할 수 있고 다른 어떤 타입으로 변경될 수도 있다
• any 타입과는 다르게 먼저 변수의 유형이 무엇인지 확인하는 과정을 거쳐야 변수의 멤버를 호출하거나 다른 변수의 값으로 설정할 수 있다

인터섹션 타입과 유니온 타입

• 인터섹션 타입: 최종 객체가 여러 속성을 갖는 것

let obj: {name: string} & {age: number} = {
	name: 'tom',
	age: 25
}

• 유니온 타입: 최종적으로 하나의 타입을 갖는 것. 아래 예제에서 unionObj는 null 이거나 {name: string} 타입이 된다

let unionObj: null | {name:string} = null;
unionObj = {name: 'jon'};

리터럴 타입

• 하드코딩한 문자열이나 숫자 값의 집합을 사용하여 해당 값과 같은 값만 변수로 받는다

let literal: "tom" | "linda" | "jeff" | "sue" = "linda";
literal = "sue";
console.log(literal); // 오류 없음
literal = "john";
console.log(literal); // 오류 발생

타입 별칭

• 타입에 다른 이름을 지정하는 방식

type Points = 20 | 30 | 40 | 50;
let score: Points = 20;

함수 반환 타입

• 함수에서 어떤 타입이 반환 되는 지 정의

function runMore(distance: number): number {
	return distance + 10;
}

// void
function eat(calories: number){
	console.log("I ate " + calories + "calories"); 
}

function sleepIn(hours: number): void {
	console.log("I selpt " + hours + " hours");
}
let ate = eat(100);
console.log(ate); // undefined 출력
let slept = sleepIn(10);
console.log(slept); // undefined 출력

함수 타입

• 타입스크립트에서 타입은 전체 함수 시그니처가 될 수 있다

type Run = (miles: number) => boolean;
let runner: Run = function(miles:number): boolean {
	if(miles > 10)
		return true;
	return false;
}
console.log(runner(9)); // false 

never 타입

• 반환하지 않는 함수 또는 null을 포함하여 아무것도 설정하지 않는 변수

function oldEnough(age: number): never | boolean {
	if(age > 59)
		throw Error("Too old!");
	if(age <= 18)
		return false;

	return true;
}

 

 

클래스와 인터페이스

---

클래스

• 접근 제어자: private, readonly

class Person {
	constructor(private msg: string){}
	speak(){
		console.log(this.msg);
	}
}
const tom = new Person("hello");
tom.msg = "hello"; // 오류 발생
tom.speak();

class Person {
	constructor(private readonly msg: string){}
	speak(){
		this.msg = "speak " + this.msg; // 오류 발생
		console.log(this.msg);
	}
}
const tom = new Person("hello");
tom.speak();

• getter, setter

class Speaker {
	private message: string;
	constructor(private name: string){
	
	}
	get Message(){
		if(!this.message.includes(this.name)){
			throw Error("message is missing speaker's name");
		}
		return this.message;
	}
	set Message(val: string){
		let tmpMessage = val;
		if(!val.includes(this.name)){
			tmpMessage = this.name + " " + val;
		}
		this.message = tmpMessage;
	}
}

• 정적 속성과 메서드

class ClassA{
	static typeName: string;
	constrctor(){}
	static getFullName(){
		return "ClassA " + ClassA.typename;
	}
}
const a = new ClassA();
console.log(a.typeName);
// 컴파일 실패: typeName이 ClassA의 정적 멤버이기 때문

class ClassA{
	static typeName: string;
	constrctor(){}
	static getFullName(){
		return "ClassA " + ClassA.typename;
	}
}
const a = new ClassA();
console.log(ClassA.typeName);
// 컴파일 성공

인터페이스

• 타입의 내부 동작을 보여주지 않고 인터페이스를 사용해 시그니처만 보여주는 추상화 방법
• 규칙의 집합
• 코드가 동작하려면 해당 규칙을 구현해야 함

interface Employee {
	name: string;
	id: number;
	isManager: boolean;
	getUniqueId: () => string; // 구현 없이 시그니처만 존재
}

const linda: Employee = {
	name: "linda",
	id: 2,
	isManager: false,
	getUniqueId: (): string => {
		let uniqueId = linda.id + "-" + linda.name;
		if(!linda.isManager)
			return "emp-" + uniqueId;
	return uniqueId;
	}
}

const pam: Employee = {
	name: "pam",
	id: 1,
	isManager: true,
	getUniqueId: (): string => {
		let uniqueId = pam.id + "-" + pam.name;
		if(pam.isManager)
			return "mgr-" + uniqueId;
	return uniqueId;
	}
}

상속

class Vehicle {
	constructor(protected wheelCount: number){}
	showNumberOfWheels(){
		console.log(`moved ${this.wheelCount} miles`);
	}
}

class Motorcyle extends Vehicle{
	constructor(){
		super(2);
	}
	updatedWheelCount(newWheelCount: number){
		this.wheelCount = newWheelCount;
	}
}

class Automobile extends Vehicle{
	constructor(){
		super(4);
	}
}

추상 클래스

• 인터페이스는 동작하는 코드를 구현하지 않음
• 클래스는 동작하는 코드를 구현
• 하나의 객체 타입에서 동작하는 코드와 시그니처가 필요한 경우를 위함

namespace AbstractNamespace{
	abstract class Vehicle {
		constructor(protected wheelCount: number){}
		abstract updateWheelCount(newWheelCount: number): void;
		showNumberOfWheels(){
			console.log(`moved ${this.wheelCount} miles`);
		}
	}
}

class Motorcycle extends Vehicle{
	constructor(){
		super(2);
	}
	updateWheelCount(newWheelCount: number){
		this.wheelCount = newWheelCount;
		console.log(`Motorcyle has ${this.wheelCount}`);
	}
}

class Automobile extends Vehicle{
	constructor(){
		super(4);
	}
	updateWheelCount(newWheelCount: number){
		this.wheelCount = newWheelCount;
		console.log(`Automobile has ${this.wheelCount}`);
	}
	// 오버라이딩
	showNumberOfWheels(){
		console.log(`moved Automobile ${this.wheelCount} miles`);
	}
}

 

 

 

reference: 풀스택 리액트, 타입스크립트, 노드 (데이비드 최 저 / 양정열 역)