TS 자습서(3)

4004 단어 typescript
후속 내용(예를 들어 nestjs 등 프레임워크)의 전개를 위해 본고는 TS와 관련된 기초 지식을 갱신하고자 한다.
자세한 내용 TS 본문 설명

범용


일반 프로그래밍 (generic programming)은 프로그래밍 언어의 한 스타일이나 모델이다.범용형은 프로그래머가 강한 유형의 프로그램 설계 언어에서 코드를 작성할 때 나중에 지정한 형식을 사용하고, 실례화할 때 매개 변수로 이러한 유형을 가리킨다.
범형의 출현은 코드 중복률을 효과적으로 낮추는 동시에 유형 정보를 잘 보존하고 운행 기간에 붕괴될 확률을 낮출 수 있다.

HelloWorld


만약 함수가 있다면 네가 그에게 어떤 유형을 주면 그는 어떤 유형을 되돌려줄 것이다. 코드는 다음과 같다.
function getValue(arg: number):number {
    return arg;
}

문자열을 지원해야 하는 경우 다음과 같은 방법이 있습니다.
  • 에서 코드를 복사한 다음 number에서 string
  • 으로 변경
  • numberany
  • 으로 변경
    그러나 상기 방법은 폐단이 있다. 방법1은 코드의 중복이 비교적 많고 확장이 어렵다(통으로만 확장할 수 있다).방법2는 변수 유형 정보를 잃어버리고 운행 기간에 이상을 던질 수 있습니다.
    따라서, 우리는 반환값의 유형이 전송된 매개 변수의 유형과 같도록 하는 방법이 필요하다.여기에서 우리는 유형 변수를 사용했다. 이것은 값이 아닌 유형을 나타내는 특수한 변수이다.
    function getValue(arg: T): T {
        return arg;
    }

    호출
    const n = getValue(2);
    const s = getValue('s');
    arg:Targ ( any )이면 <> 사이의 유형은 생략할 수 있고, <>이 유형을 지정했지만 arg 유형이 일치하지 않으면 컴파일에 실패할 수 있음을 설명한다.T은 마음대로 찾았어요. ABCD라고 해도 아무도 신경 안 써요.

    범용 함수


    원형은 다음과 같습니다.
    function    (   :     ,   :    ):     

    전통 풍격
    function makeMap(key: K, value: V):map {
        return map(key,value);
    }

    화살표 함수 스타일
    const makeMap: (key:K,value:V) => map = { // (key:K,value:V) => map     
        return map(key,value);
    }

    범용 인터페이스


    원형은 다음과 같습니다.
    interface      {
        //       
    }

    예.
    interface GenericFunction {
        getValue(arg:T):T;
    }
    //      
    class Test implements GenericFunction {
        getValue(arg:string):string {
            returna arg;
        }
    }
    //     
    class Test2 implements GenericFunction {
        getValue(arg:number):number {
            returna arg;
        }
    }
    const test = new Test();
    console.log(test.getValue('111'));
    
    const test2 = new Test2();
    console.log(test.getValue(111));
    

    범형류


    범형류의 사용과 범형 인터페이스의 차이는 많지 않다
    class GenericClass {
        add(a: T, b: T):T;
    }
    
    const n = new GenericClass();
    console.log(n.add(1,1));
    
    const s = new GenericClass();
    console.log(s.add('1','2'));

    상속 구속 사용


    자바에서는 다음과 같은 코드를 자주 볼 수 있다
    public class Generic{
        private T key;
    
        public Generic(T key) {
            this.key = key;
        }
    
        public T getKey(){
            return key;
        }
    }

    상례에서 T는 Number 자류만 가능하다.너무 넓은 범위의 범위가 문제를 초래하는 것을 피하다
    TS에서도 다음과 같은 방법을 사용할 수 있습니다.
    class BeeKeeper {
        hasMask: boolean;
    }
    
    class ZooKeeper {
        nametag: string;
    }
    
    class Animal {
        numLegs: number;
    }
    
    class Bee extends Animal {
        keeper: BeeKeeper;
    }
    
    class Lion extends Animal {
        keeper: ZooKeeper;
    }
    
    function createInstance(c: new () => A): A {
    return new c();
    }
    createInstance(Lion).keeper.nametag;  // 컴파일 OK
    createInstance(Bee).keeper.hasMask;   // 편집 OK

    다음 코드는 이해하기 어려울 수 있습니다
    function createInstance(c: new () => A): A

    뜯어보기:
  • 일반 구속, A는 Animal 하위 클래스
  • 이어야 함
  • new () => A 화살표 함수, 전입된 값은 반드시 구조 방법
  • 이어야 함 제약
  • :A createInstance 전송된 구조 함수의 실례
  • 결어


    범형은 중복 코드를 효과적으로 줄이는 동시에 유형의 강제 전환 문제를 해결했고 개발에서 any이 아닌 범형을 사용해야 한다.TS의 범용법은 대부분 이보다 복잡하지만 원리는 같고 부족한 점은 양해해 주십시오.TS에 관심 있는 파트너는 나를 스캔하고 교류할 수 있다

    좋은 웹페이지 즐겨찾기