TS 시작 노트 2 - TS 인터페이스 승급 상세 정보

요즘 csdn 게임을 적게 해요.

1. 왜 인터페이스가 필요합니까?

let obj:object; //  
// obj = 1;
// obj = "123";
// obj = true;
obj = {
     name:'lnj', age:33};
console.log(obj);

이전에 우리는 이런 방식으로 하나의ts의 대상을 정의했다고 소개했지만 이러한 정의 내부의 속성은 제한되지 않고 의미가 크지 않다.
대상 내의 각종 속성을 한층 더 정의하기 위해 인터페이스가 생겼다.

2. 인터페이스 유형은 무엇입니까?

number,string,boolean,enum 등 데이터 유형과 마찬가지로 인터페이스도 하나의 유형이고 사용자를 구속하는 데 사용된다. 그의 역할은 대상 내의 각종 속성을 더욱 정의하는 것이다.

기본 용법

//  :  ,  ,  

interface FullName{
     
    firstName:string
    lastName:string
}

let obj = {
     
    firstName:'Jonathan',
    lastName:'Lee'
    // lastName:18  
};

//{firstName, lastName} 
function say({
     firstName, lastName}:FullName):void {
     
    console.log(` :${
       firstName}_${
       lastName}`);
}
say(obj);

4. 속성 수량이 확실하지 않을 때의 정의 방법

만약에 인터페이스를 사용하여 변수나 형삼을 한정한다면 변수나 형삼에 값을 부여할 때 부여한 값은 반드시 인터페이스에 한정된 것과 똑같아야만 된다. 하나 또는 하나 적어서는 안 된다.
그러나 개발 과정에서 우리는 종종 하나 이상의 장면을 만날 수 있다.

(1) 하나 적음, 옵션 속성 사용

선택할 수 있는 속성은 이름과 같고 사용법도 간단합니다. 속성 이름 뒤에 하나만 추가하면 됩니까?됐습니다.

//  :  middleName ,  middleName,  firstName lastName
interface FullName{
     
    firstName:string
    lastName:string
    middleName?:string
    [propName:string]:any
}

function say({
     firstName, lastName, middleName}:FullName):void {
     
    // console.log(` :${firstName}_${lastName}`);
    if(middleName){
     
        console.log(` :${
       firstName}_${
       middleName}_${
       lastName}`);
    }else{
     
        console.log(` :${
       firstName}_${
       lastName}`);
    }
}

say({
     firstName:'Jonathan', lastName:'Lee', middleName:"666"});
say({
     firstName:'Jonathan', lastName:'Lee'});

(2) 하나 더, 색인으로 서명

예를 들어arr[10]이나obj[key]를 설명하는 데 사용됩니다.
뜻이 추상적이어서 정의 대상에서 키(propName)와value의 데이터 구조로 이해할 수 있다. 후속 대상의 속성은 키와value가 색인 서명의 제한을 충족시키면 된다. 몇 개가 있든 상관없다.

interface FullName {
     
    [propName:string]:string
}
let obj:FullName = {
     
    //  :  key value ,  
    firstName:'Jonathan',
    lastName:'Lee',
    // middleName:false //  
    //  key ,  
    // false: '666' 
}



interface stringArray {
     
    [propName:number]:string
}

let arr:stringArray = {
     
    0:'a',
    1:'b',
    2:'c'
};

// let arr:stringArray = ['a', 'b', 'c'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

5. 인터페이스의 계승

TS의 인터페이스는 JS의 클래스와 마찬가지로 상속할 수 있습니다.

interface LengthInterface {
     

  length:number

}

interface WidthInterface {
     

  width:number

}

interface HeightInterface {
     

  height:number

}

interface RectInterface extends LengthInterface,WidthInterface,HeightInterface {
     

  // length:number

  // width:number

  // height:number

  color:string

}

let rect:RectInterface = {
     

  length:10,

  width:20,

  height:30,

  color:'red'

}

6. 함수 인터페이스

함수는 본질적으로 특수한 대상이므로 우리는 인터페이스로 함수의 매개 변수와 반환 값을 정의할 수 있다.

interface SumInterface {
     
  (a:number, b:number):number
}

//  
let sum:SumInterface= function(x,y) {
     
  return x + y;
}

let res = sum(10, 20);

console.log(res);

ts 시작 노트 디렉토리:

TS 시작 노트 1 - TS 유형 선언
TS 시작 노트 2 - TS 인터페이스 승급 상세 정보
TS 시작 노트 3 - TS의 함수 설명
TS 시작 노트 4 - TS의 유형 단언(해석형 유형 변환)
TS 시작 노트 5 - TS의 일반
TS 시작 노트 6 – ts의 선언 파일, 모듈, 네임스페이스
지식을 기록하고 즐거움을 전해라~
만약 나의 총결산이 당신에게 도움이 된다면 저에게 좋아요를 눌러주세요. 당신의 격려는 내가 지속적으로 기록하는 큰 동력입니다~
만약 문장에 오류가 있다면 많이 양해해 주시고 평론에서 지적해 주시기를 환영합니다~