타입스크립트 #2 인터페이스
12881 단어 typescripttypescript
let a:object;
a = {b:1, c:2};
console.log(a.b)//error
'object에는 "b"라는 속성이 없습니다.'라면서 오류가 뜹니다.
이처럼 타입스크립트에서 객체에 타입을 지정할때에는 인터페이스
를 사용합니다.
객체 사용 인터페이스
interface A {
a : string;
b : number;
}
let a : A = {b:1, c:2};
console.log(a.b)//1
a.b = 3//문제없음
a.d = 4//error 인터페이스땜에 막힘ㅋ
앞으로 A인터페이스를 타입으로 지정한 변수는 A안에 있는 속성들만 사용할 수 있습니다.
그리고 인터페이스 안에있는 속성들을 전부 작성해야 에러가 발생안합니다.
interface A {
a : string;
b : number;
y? : string;
readonly h : number;
[k:number] : string;
}
let a : A = {b:1, c:2, h:6};// y를 작성 안해도 오류안남
a.h = 77//error readonly라서 안됨
- 만약 인터페이스 속성에 '?'를 작성하면 있어도 되고 없어도 되는 옵션프로퍼티가 됩니다.
- readonly은 읽을 수는 있지만 변경은 안됩니다.
interface A {
[k:number] : string;
}
let a : A = {1: "1", 2: "2"};
///////////////////
type TT = "A" | "B" | "C"
interface B {
[k:number] : TT;
}
let b : B = {1: "A", 2: "B"};//TT안에있는 값들만 사용 가능
- 만약 인터페이스에서 정의하지 않은 속성들을 추가로 사용하고 싶을 때는
[변수:타입] : 타입
을 사용합니다.. - 타입스크립트에서 타입을 따로 만들고 싶을땐 "type"이라는 속성을 사용합니다. 타입을 사용하면 본인만의 타입을 사용할 수 있습니다.
함수 사용 인터페이스
interface Add {
(num1:number, num2:number):number;
//숫자를 타입으로한 2개의 파라미터와 반환값으로 숫자를 반환하는 함수를 정의
}
const add : Add = function(x, y){
return x + y;
}
인터페이스에서 함수도 지정할 수 있습니다.
클래스 사용 인터페이스
클래스에도 인터페이스를 사용할 수 있습니다. 이때에는 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!")
}
}
인터페이스의 확장
interface Car {
color : string;
wheels : number;
start():void;
}
interface Bike {
a : number
}
interface Sport extends Car {
speed = 100;
}
interface Sport2 extends Car, Bike {
speed = 120;
}
인터페이스도 클래스 처럼 확장할 수 있습니다. 한번에 여러개도 확장이 가능합니다.
Author And Source
이 문제에 관하여(타입스크립트 #2 인터페이스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@404/타입스크립트-2-인터페이스저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)