Constructor(생성자)
파라미터들을 써주기만 하면 TypeScript가 알아서 Constructor 함수를 만들어줌
class로부터 객체를 생성할 때 호출되고 객체의 초기화를 담당
- TypeScript
class Player {
constructor(
private firstName:string,
private lastName:string
) {}
}- JavaScript
class Player {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}자바스크립트에서는 접근제한자가 사라짐.
하지만 TypeScript에서는 에러가 생기기전에 코드를 보호해줌
ex) nico.firstName //TypeScript에서는 Error가 발생하지만 자바스크립트에선 문제없음
class Player{
constructor(
private firstName:string,
private lastName:string,
public nickname:string
) {}
}
const nico = new Player("nico", "las", "니꼬");
Abstract Class(추상클래스)
추상클래스: 다른 클래스가 상속받을 수 있는 클래스로 오직 다른 곳에서 상속받을 수만 있고 직접 인스턴스를 생성하지 못함!
abstract class User{
constructor(
private firstName:string,
private lastName:string,
public nickname:string
) {}
getFullName(){
return '${this.firstNme} ${this.lastName}'
}
}
class Player extends User {
}
Abstract Method(추상함수)
메소드를 추상클래스 안에서 구현하지 않고 메소드의 call signature만 적어둬야 함
abstract class User{
constructor(
protected firstName:string,
protected lastName:string,
protected nickname:string
) {}
abstract getNickName():void
getFullName(){
return '${this.firstNme} ${this.lastName}'
}
}
class Player extends User {
getNickName(){
console.log(this.nickname);
}
}
Access Modifiers(접근 제한자)
- public : 클라스의 외부에서 접근 가능
- private : 클라스 내에서만 접근 가능, 클라스의 외부에서 접근 불가능
- protected : 클라스 내부, 그리고 상속받은 자식 클라스에서 접근 가능
type Words = {
[key:string]: string
}
let dict: Words = {
"potato" : "food"
1 : "food //Error!
}-> Words는 타입이 string만을 property로 가지는 오브젝트임
type Words = {
[key:string]: string
}
class Dict {
private words: Words
constructor(){
this.words = {}
}
add(word:Word){
if(this.words[word.term] === undefined){
this.words[word.term] = word.def;
}
}
def(term:string){
return this.words[term]
}
}
class Word {
constructor(
public term:string,
public def: string
){}
}
const kimchi = new Word("kimchi", "한국의 음식");
const dict = new Dict();
dict.add(kimchi);
dict.def("kimchi");
readonly (읽기전용)
public 이지만 더 이상 변경할 수 없도록 만들 때 사용
주로 다른 누군가가 데이터를 덮어쓰는걸 방지하기 위해서
class Word{
constructor(
public readonly term: string,
public readonly def: string
){}
}
const kimchi = new Word("kimchi", "한국의 음식");
kimchi.def = "xxx" //Error!
Interface
- type : 오브젝트의 모양을 묘사하는데 쓸 수도 있고 타입 alias를 만들 수 있음
type Team = "red" | "blue" | "yellow"
type Health = 1 | 5 | 10
type Player = {
nickname : string,
team : Team,
health : Health
}
const nico : Player = {
nickname : "nico",
team : "pink", //Error!
health : 5
}- interface : 오브젝트의 모양을 특정해주기 위해 사용
interface Player {
nickname : string,
team : Team,
health : Health
}What is the difference between a type and an interface?
> Interfaces can only be used to type an object, a Type can be used for any type.
(인터페이스는 오로지 오브젝트의 모양을 타입스크립트에게 설명해주기 위해서만 사용되는 키워드임)
abstract class User{
constructor(
private firstName:string,
private lastName:string,
) {}
abstract sayHi(name:string):string
abstract fullName():string
}
class Player extends User {
fullName(){
return '${this.firstName} ${this.lastName}'
}
sayHi(name:string){
return 'Hello ${name}. My name is ${this.fullName()}'
}
}What is the difference between an abstract class and a "normal" class?
> We can't make an instance of an abstract class. but Abstract class will become a normal class in JS.
추상 클래스는 인스턴스 만드는 것을 허용하지 않음. new User() //Error!
추상 클래스는 단지 상속받는 클래스가 어떻게 동작해야할지 알려주기 위해(표준화하기위해)서 사용됨
하지만 자바스크립트에서는 abstract의 개념이 없기 때문에 일반적인 클래스로 바꿔버림.
- javascript (abstract -> class)
class User {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
class Player extends User {
fullName() {
return '${this.firstName} ${this.lastName}';
}
sayHi(name) {
return 'Hello ${name}. My name is ${this.fullName()}';
}
}
인터페이스는 컴파일하면 자바스크립트에서 바뀌지않고 사라짐
interface User{
firstName:string,
lastName:string
sayHi(name:string):string
fullName():string
}
class Player implements User{
constructor(
public firstName:string,
public lastName:string,
) {}
fullName(){
return '${this.firstName} ${this.lastName}'
}
sayHi(name:string){
return 'Hello ${name}. My name is ${this.fullName()}'
}
}class Player {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
fullName() {
return '${this.firstName} ${this.lastName}';
}
sayHi(name) {
return 'Hello ${name}. My name is ${this.fullName()}';
}
}하지만 인터페이스를 상속하면 private property들을 사용하지 못하고 매번 constructor를 선언해줘야한다는 문제점이 있지만
인터페이스를 만들어두고 원하는 각자의 방식으로 클래스를 상속할 수 있다는 장점도 있음
Polymorphism(다형성)
제네릭을 사용하여 다형성(다른 모양의 코드를 가질 수 있게 해줌)을 이룰 수 있음
제네릭을 클래스로 보내면 클래스는 제네릭을 인터페이스로 보내줄 수 있음
- 일반적인 자바스크립트에서 사용한 로컬 스토리지 API와 같은 API를 가지는 클래스 만들기
interface SStorage<T> {
[key:string]: T
}
class LocalStorage<T> {
private storage: SStorage<T> = {}
set(key:string, value:T){
this.storage[key] = value;
}
remove(key:string){
delete this.storage[key]
}
get(key:string):T {
return this.storage[key]
}
clear(){
this.storage = {}
}
}
const stringsStorage = new LocalStorage<string>();
stringsStorage.get("key"); //get(key: string): string
stringsStorage.set("hello", "how are you"); //set(key:string, value:string): void
const booleansStorage = new LocalStorage<boolean>();
booleansStorage.get("key"); //get(key: string): boolean
stringsStorage.set("hello", true);728x90
'Frontend > Typescript' 카테고리의 다른 글
| [Typescript] Typescript로 블록체인 만들기 #3 FUNCTIONS 과제 답안 (0) | 2023.06.30 |
|---|---|
| [Typescript] Typescript로 블록체인 만들기 #3 FUNCTIONS (0) | 2023.06.29 |
| [Typescript] Typescript로 블록체인 만들기 #2 OVERVIEW OF TYPESCRIPT (1) | 2023.06.27 |
