통합 TypeScript에 대한 기초 지식

연합 유형과 그 응용을 탐색하다.

인용문:

지난주에 우리는 TypeScript(TS) 기초 지식에 대한 학습을 끝내고 이 언어가 어떻게 정적 유형을 실현하는지, 선택 가능한 추정 유형의 기능을 실현하는지, 그리고 정적 유형 규칙과 인터페이스라고 불리는 복잡한 데이터 유형을 어떻게 활용하는지 보여 주었다.기억해라. 정적 유형은 사용하기 전에 개발자가 변수 데이터 형식을 정의해야 하는 것을 말한다. 선택 가능한 추정 유형은 컴파일러가 분배한 첫 번째 값에서 변수 데이터 형식을 설정하는 것을 말한다. 마지막으로 인터페이스는 구조 청사진으로 복잡한 데이터 구조(대상, 그룹, 함수)에 봉인된 값의 구성원이나 반환 유형을 개괄한다.이러한 규칙은 단일 값이나 출력 유형에 할당된 변수에 적용됩니다.이번 주에 저의 목표는 TS언어가 다른 특성을 어떻게 활용하는지 강조하여 개발자가 코드를 작성할 때 사용할 수 있는 변수를 다양한 입력과 출력으로 조합하도록 하는 것입니다.바로 뛰어들어 TS가 우리가 사용할 수 있는 선택을 어떻게 결합시켜 우리의 코드가 모든 가능성을 더욱 받아들일 수 있는지 봅시다.

연합 유형은 무엇입니까?

연합 유형은 TS 언어의 속성으로 개발자가 많은 가능한 값 데이터 유형에서 변수 분배, 함수 입력과 반환을 선택할 수 있도록 한다.나의 인코딩 과정에서 지금까지 나는 개인적으로 단일 값 분배를 접촉한 적이 있다.내가 만난 가장 가까운 JavaScript(JS)의 유니온 형식은 조건 문장을 사용하여 데이터 형식을 계산하고 만나는 데이터 형식에 따라 응답을 제어하는 것이다.

JS 코드 예:

let exampleFunction = (input) => {
  if (typeof input === "string"){
    console.log("value is a string"); 
  }
  else if (typeof input === "number"){
    console.log("value is a number"); 
  };
    console.log("input must be number or string");
};

exampleFunction(true); 

// prints "input must be number or string"

위의 코드 블록은 예시로 내가 이전에 JS의 여러 방면을 이용하여 변수 데이터 형식을 평가한 다음에 함수 매개 변수로 입력한 데이터 형식만을 바탕으로 프로그램 응답을 제어하는 것을 설명한다.if 조건에 typeof 연산자를 더하면 이 목표를 잘 실현할 수 있지만, 보시다시피 이 목표를 실현하기 위해서는 여러 절차가 필요합니다.
설치해야 할 모든 블록이 오류가 발생할 수 있기 때문에 TS Union 유형에 들어가 나 같은 새로운 개발자의 생활을 간단하게 할 수 있다.TS를 사용하여 Union 유형과 단일 "|"파이핑 연산자를 사용하여 특정 변수 데이터 유형을 지정하는 작업을 완료합니다.

TS 코드 예:

let fixCar = function(cartype: "MITSUBISHI" | "TOYOTA"){
    if (cartype === "MITSUBISHI" || "TOYOTA"){
        return "your vehicle is fixed";
    }
    return "We don't service that make of vehicle here."
}

console.log(fixCar("FORD"))

// Argument of type '"FORD"' is not assignable to parameter of type '"MITSUBISHI" | "TOYOTA"'.

위의 TS 예시를 보면 같은 작업을 수행하는 JS 코드보다 코드 블록이 훨씬 간단한지 쉽게 볼 수 있습니다.우리는 더 적은 if 조건을 가지고 파라미터'cartype'를 계산하며, 더 이상 typeof 연산자를 사용할 필요가 없다.나에게 함수fixCar()를 사용해 보았을 때 이런 연합 유형의 아름다움이 나타났다.'정적 형식'을 기억하십시오. 함수 파라미터를 정의할 때, 연합 형식을 사용하고, 함수 성명에 명확하게 정의된 파라미터 이외의 다른 파라미터와 함수 fixCar() 를 함께 사용하려고 할 때, 우리는 컴파일러의 실시간 오류 메시지를 받을 것입니다.

제가 또 TS에서 뭘 연합할 수 있을까요?

이제 우리는 TS에서 연합 유형을 사용하는 예시를 보았습니다. 다른 몇 가지 예시를 빠르게 살펴보고 연합 유형을 어떻게 사용하여 데이터 구조의 일부 입력을 요구하는지 봅시다.

간단한 데이터 유형 예:

let singleVar: string | boolean;

singleVar = "I'm OK"; // Good

singleVar = true; // Good

singleVar = 24; // Bad => Type '24' is not assignable to type 'string | boolean'.(2322)

위의 코드 블록에서 우리는 Union 형식을 이용하여 singleVar 변수에 할당된 값과 값을 "string"또는 "Boolean"형식으로 명확하게 요구합니다.다른 값 형식은 컴파일러가 오류를 내서 코드를 실행할 수 없습니다.

혼합 데이터 유형의 예:

let mixedVar: string | string[];

mixedVar = 'This is good'

mixedVar = ["I'm good too"] 

mixedVar = true; // Bad => Type 'boolean' is not assignable to type 'string | string[]'.

mixedVar = [24, 'Not Good', true];
 // Type 'number' is not assignable to type 'string'.
 // Type 'boolean' is not assignable to type 'string'

상기 코드 블록에서, 우리는 유니온 형식을 이용하여 "mixedVar"변수에 할당된 값이 "string"또는 "string"형식 변수의 수조를 명확하게 요구합니다.내가 처음 그것을 만났을 때, 나는 정말 이것이 매우 멋진 용법이라고 생각했다.TS 유형은 개별 값을 검사할 뿐만 아니라 복잡한 데이터 유형의 값도 동일하게 검사합니다.솔직히 이게 얼마나 멋있어?

복잡한 데이터 유형의 예:

interface Student {
    name: string;
    age: number;
};

interface School {
    programName: string;
};

type CodingStudent = Student | School;

let coder: CodingStudent = {
    name: "James",
    age: 36
};

coder = true; //Type 'boolean' is not assignable to type 'CodingStudent'.

coder = {
    programName: "Operation Spark" 
}

위의 마지막 코드 예시에서 우리는 연합 형식을 사용했을 뿐만 아니라 조합 인터페이스에서 정의한 수요를 통해 사용자 정의 형식을 만들었다.조합 인터페이스를 통해 우리는 실례를 만들 수 있다. 이 실례들은 임의의 인터페이스에서 온 속성을 포함할 수 있고, 임의의 인터페이스에서 설정한 정적 유형의 제한을 충족시킬 수 있다.

결론:

이 여정에서 우리는 TS언어에서 사용하는 정적 유형 시스템과 연합 유형을 결합시켜 이 시스템에 대한 이해를 넓혔다.연합 형식은 코드에서 사용하고 싶은 변수에 할당할 수 있는 가능한 값을 추가할 수 있도록 합니다.결합 유형은 간단하거나 복잡한 데이터 값과 TS 언어의 다른 측면과 결합하여 | & type 연산자를 통해 사용자 정의 유형을 만들 수 있다.나는 TS가 나에게 제공한 코드와 상호작용하는 새로운 방식을 배우고 미래의 블로그에서 그것들을 계속 탐색하는 것을 정말 좋아한다.나는 머지않아 유형 보호의 개념을 밝히기를 기대하고 있지만, 우선, 명확하고 정확한 방식으로 표현할 수 있도록 더 많은 연구와 실천이 필요하다.새로운 것을 좀 배웠으면 좋겠어요.
즐거운 인코딩!!!

자료 출처:

TypeScript 문서https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html

혜리.조직

howtodoinjava.com