프론트엔드/TypeScript31 type alias 와 interface type alias : 어떤 타입을 부르는 이름 interface : 어떤 새로운 타입을 만들어 내는 것 함수를 선언할 때 차이 // function // type alias type EatType = (food: string) => void; // interface interface IEat { (food: string): void; } 배열을 선언할 때 차이 // array // type alias type PersonList = string[]; // interface interface IPersonList { [index: number]: string; } interscection을 선언 할 때 차이 interscection: 여러 타입을 합쳐서 사용하는 타입 interface ErrorHandl.. 2021. 6. 19. 인터페이스에 readonly 설정하는 방법 인터페이스 변수에 readonly를 설정하면 처음 선언했던 변수를 수정할 수 없다. // 인터페이스 선언 interface Person8 { name: string; age?: number; readonly gender: string; } const p81: Person8 = { name: 'Mark', gender: 'male' } // readonly 이기 때문에 변경 불가 // p81.gender = "female"; console.log(p81); console.log(p81.name); console.log(p81.gender); 2021. 6. 19. 함수선언할때 인터페이스 사용하는 방법 함수선언할때 인터페이스 사용하는 방법 interface HelloPerson { (name: string, age?: number): void; } // 함수 생성 const helloPerson: HelloPerson = function(name: string, age?: number){ console.log(`안녕하세요! ${name} 입니다.`) } // 함수 사용 helloPerson("mark", 22); 2021. 6. 19. 인터페이스에서 인터페이스 상속 인터페이스에서 인터페이스를 상속 받는 방법 ts interface IPerson2 { name: string; age?: number; } // IPerson2를 상속받음 interface IKorean extends IPerson2 { city: string; } // 상속받은 인터페이스의 변수값을 입력 const k: IKorean = { name: "홍길동", city: "서울" }; console.log(`${k.name}, ${k.city}, ${k.toString}`); 2021. 6. 19. 인터페이스를 이용해 class 생성 인터페이스를 상속받는 class 생성 예제 interface IPerson1 { name: string; age?: number; hello(): void; } class Person implements IPerson1 { name: string; age?: number | undefined; // name을 초기화 constructor(name: string){ this.name = name; } hello(): void { console.log(`안녕하세요! ${this.name} 입니다.`); } } const person = new Person('Mark'); person.hello(); const person11: IPerson1 = new Person("Mark2"); person11.hell.. 2021. 6. 18. 인터페이스 내부에서 함수 사용 인터페이스 내부에서 함수 사용 예제 interface Person4 { name: string; age: number; hello(): void; } const p41: Person4 = { name: 'Mark', age: 22, hello: function(): void{ console.log(`안녕하세요! ${this.name} 입니다.`); }, }; const p42: Person4 = { name: 'Mark', age: 22, hello(): void{ console.log(`안녕하세요! ${this.name} 입니다.`); }, }; // const p43: Person4 = { // name: 'Mark', // age: 22, // // 화살표 함수는 this를 사용할 수 없다. // .. 2021. 6. 18. 이전 1 2 3 4 5 6 다음
