타입스크립트 지식이 부족하니 매번 프로젝트 할 때마다 시간도 오래걸리고 헤매는 것 같다. 최소한 한번은 쭉 훓고 가야 하는 것같아서, 오늘은 자주 쓰이는 interface 에 대해서 정리해보았다.
에러발생!!
let user: object;
user = {
name : 'xx',
age : 30
}
console.log(user.name); //Property 'name' does not exist on type 'object'.
에러발생!!
interface User {
name : string;
age : number;
}
let user:User = {
name : 'xx',
age : 30
}
user.age = 10;
user.gender = "male"; //Property 'gender' does not exist on type 'User'.
console.log(user.age);
interface User 에 gender가 없기 때문이다.
그렇다면 gender 를 옵셔널로 설정해보자. 타입정의할 때 물음표(?) 붙여 주면 된다.
interface User {
name : string;
age : number;
gender? : string;
}
let user:User = {
name : 'xx',
age : 30
}
user.age = 10;
user.gender = "male";
console.log(user.age);
생성할 때만 생성이 가능하고 수정 불가능
interface User {
name : string;
age : number;
gender? : string; //성별을 옵셔널한 프로퍼티로 만들기 (? 사용)
**readonly** birthYear : number; //읽기 전용 속성
}
let user:User = {
name : 'xx',
age : 30,
birthYear: 2000,
1: 'A' // 근데 여기서 에러가 난다.
}
user.age = 10;
user.gender = "male";
user.birthYear = 1990; //에러 발생
Cannot assign to 'birthYear' because it is a read-only property.
1-4 학년까지 성적을 내고 싶다면 이런식으로 할수있다.
interface User {
1 : string;
2 : string;
3 : string;
4 : string;
}
let user:User = {
name : 'xx',
age : 30,
birthYear: 2000,
1: 'A' // 근데 여기서 에러가 난다.
}
아래와 같이 전부 옵셔널로 줄 수 있지만
interface User {
1? : string;
2? : string;
3? : string;
4? : string;
}
아래와 같이 해주면 좋다.
interface User {
[grade:number]: string //grade 가 의미 있는 것이 아니다. xx 로 해도된다
}
let user: User = {
1: 'A',
2: 'B'
}
근데 성적은 A, B, C, D, E 로 한정되어 있는데 string 이라는 범위가 너무 넓다면 이렇게 지정할 수 있다.
type Score = 'A' | 'B' | 'c'| 'D' | 'E'
interface User {
[grade:number]: Score; //Score 에 있는 값만 입력할 수 있다.
}
let user: User = {
1: 'A',
2: 'B'
}
interface Add {
(num1: number, num2:number): number;
}
const add: Add = funtion(){
}
근데 위와 같이 두면 에러가 난다. 인터페이스에서 정의한것과 같은 형태가 나와야 한다.
아래와 같이 하면 에러가 사라진다.
interface Add {
(num1: number, num2:number): number;
}
const add: Add = function(x, y){
return x + y;
}
interface IsAdult {
(age:number): boolean;
}
const a: IsAdult = (age) => {
return age > 19;
}
interface Car {
color : string;
wheels: number;
start(): void;
}
class Bmw implements Car {
color = "red";
wheels = 4;
start(){
console.log('go...');
}
}
constructor 도 정의 가능
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 b = new Bmw('green');
Benz 는 Car 가 가지고 있는 속성들을 다 받게 된다.
interface Car {
color : string;
wheels: number;
start(): void;
}
interface Benz extends Car{
door: number;
stop() : void
}
const benz : Benz = {
door : 5,
stop() {
console.log('stop');
}
}
이렇게만 입력하면 에러가 난다.
car 에 있는 프로퍼티들도 다 써줘야 에러가 안난다.
interface Car {
color : string;
wheels: number;
start(): void;
}
interface Benz extends Car{
door: number;
stop() : void
}
const benz : Benz = {
door : 5,
stop() {
console.log('stop');
},
color: 'red',
wheels: 10,
start() {
console.log('start');
}
}
확장은 여러개도 가능하다.