TypeScript 유형 추론(유형 판단)_javascript 기술

TypeScript는 Microsoft에서 개발한 JavaScript의 상위 집합입니다. TypeScript는 JavaScript와 호환되며 JavaScript 코드를 로드한 후 실행할 수 있습니다. JavaScript와 비교하여 TypeScript의 개선 사항은 다음과 같습니다: 컴파일러가 지원되는 개체와 함수를 이해할 수 있도록 주석을 추가합니다. 컴파일러는 오버헤드를 늘리지 않고 주석을 제거하여 업데이트합니다.

TypeScript가 왜 있나요?

JavaScript는 단지 스크립팅 언어일 뿐 대규모 웹 애플리케이션을 개발하도록 설계되지 않았습니다. JavaScript는 클래스와 모듈의 개념을 제공하지 않으며 TypeScript는 JavaScript를 확장하여 이러한 기능을 구현합니다. TypeScript 주요 기능은 다음과 같습니다.

TypeScript는 Microsoft에서 출시한 오픈 소스 언어이며 Apache 라이센스 계약을 사용합니다

TypeScript는 JavaScript의 상위 집합입니다.

TypeScript는 선택적 유형, 클래스 및 모듈을 추가합니다

TypeScript는 읽기 쉬운 표준 JavaScript로 컴파일됩니다

TypeScript는 대규모 JavaScript 애플리케이션 개발을 지원합니다

TypeScript는 대규모 애플리케이션 개발을 위해 설계되었으며 컴파일된 JavaScript 코드의 호환성을 보장합니다

TypeScript는 JavaScript의 구문을 확장하므로 기존 JavaScript 코드를 변경 없이 TypeScript로 직접 실행할 수 있습니다.

TypeScript 파일 확장자는 ts이며 TypeScript 컴파일러는 이를 js 파일로 컴파일합니다

TypeScript 구문은 JScript .NET과 동일합니다

TypeScript는 배우고 이해하기 쉽습니다

문법적 특징

수업

인터페이스

모듈

주석 입력

컴파일 시간 유형 확인

화살표 함수(C#의 람다 표현식과 유사)

JavaScript와 TypeScript의 차이점

TypeScript는 기존 JavaScript 코드가 수정 없이 TypeScript와 함께 작동할 수 있도록 JavaScript의 구문을 확장하는 JavaScript의 상위 집합입니다. TypeScript는 유형 주석을 통해 컴파일 타임 정적 유형 검사를 제공합니다. TypeScript는 기존 JavaScript 코드를 처리하고

만 사용할 수 있습니다.

TypeScript 코드가 컴파일되었습니다.

이 섹션에서는 TypeScript의 유형 추론을 소개합니다. 유형 추론이 필요한 위치와 이를 수행하는 방법에 대해 논의하겠습니다.

기본

TypeScript에서는 유형 주석이 명시적으로 지정되지 않은 여러 위치에서 유형 정보를 제공하기 위해 유형 추론이 사용됩니다.

var x = 3

변수 "x"의 값은 숫자로 추론됩니다. 이러한 추론은 변수나 멤버가 초기화되고, 매개변수 기본값이 설정되고, 함수 반환 유형이 결정될 때 발생합니다.

최고의 공개 유형

여러 표현식에서 유형 추론이 필요한 경우 이러한 표현식의 유형을 사용하여 "가장 일반적인 유형"을 추론합니다. 예:

var x = [0, 1, null];

예제에서 "x"의 유형을 유추하려면 각 배열 요소의 유형을 고려해야 합니다. 여기서는 숫자와 null이라는 두 가지 배열 유형을 선택할 수 있습니다. 최상의 공통 유형 알고리즘에서는 모든 후보 유형을 고려하고 모든 후보 유형과 호환되는 유형을 선택해야 합니다. (여기서 유형은 Array일 수 있습니다)

제공된 후보 유형 중에서 가장 좋은 공통 유형이 선택되므로, 후보 유형이 공통 유형을 공유하지만 단일 유형이 모든 후보 유형의 상위 유형이 아닌 경우가 있습니다. 예:

class Animal {
name:string;
constructor(theName: string) { this.name = theName; }
}
class Snake extends Animal{
constructor(name: string) { super(name); }
}
class Elephant extends Animal{
constructor(name: string) { super(name); }
}
class Rhino extends Animal {
constructor(name: string) { super(name); }
}
var zoo = [new Rhino(), new Elephant(), new Snake()]; // 这里三个成员的类型分别为：Rhino、Elephant、Snake 他们是最佳公共类型的候选类型，Animal是他们的super type(译为父类型)

이상적으로는 동물원이 Animal[] 유형으로 추론되기를 원할 수 있지만 배열의 어떤 객체도 엄격하게 Animal 유형이 아니기 때문에 그러한 추론을 할 수 없습니다. 이 문제를 해결하려면 모든 후보 유형의 상위 유형을 유추할 수 없는 경우 해당 유형을 명시적으로 제공해야 합니다.

var zoo: Animal[] = [new Rhino(), new Elephant(), new Snake()];

최적의 공개 유형이 없는 경우 추론 결과는 빈 객체인 {}를 생성하는 것입니다. 이 유형에는 멤버가 없기 때문에 해당 속성에 액세스하면 오류가 발생합니다. 이 결과를 통해 여전히 유형을 무시하는 방식으로 객체를 사용할 수 있지만 유형 안전성을 보장하면서 객체의 유형을 암시적으로 결정할 수는 없습니다.

컨텍스트(Context)형

TypeScript에서는 경우에 따라 "그렇지 않은 경우" 유형 추론도 존재합니다. 이를 "컨텍스트 분류"라고 합니다. 컨텍스트 데이터 정렬은 표현식 유형이 해당 표현식이 발생하는 컨텍스트에서 암시적으로 지정될 때 발생합니다. 예:

window.onmousedown = function(mouseEvent) {
console.log(mouseEvent.buton); //<- 编译时抛出错误
};

上面的代码将会给出一个类型错误，TypeScript的类型检查器使用Window.onmousedown函数的类型来推断右边的函数表达式类型。当它这么做的时候，便能够推断出参数mouseEvent的类型。 如果这个表达式不在可进行上下文归类的位置，参数mouseEvent 需要给定一个any类型，这样就不会出现错误了。

如果需要上下文归类的表达式内容中包含明确的类型信息，则会忽略上下文归类。我们重写上面的例子：

window.onmousedown = function(mouseEvent: any) {
console.log(mouseEvent.buton); //<- 现在不会报错了
};

参数明确指定类型的函数表达式将会忽略上下文归类。经过这样的处理就不会报错了，因为没有应用到上下文归类。

上下文归类可应用于许多场景。常见的场景包括函数调用的参数、赋值的等号右边表达式、类型确定、对象成员和数组字面量、返回值语句。上下文类型也作为最佳公共类型的候选类型。例如：

function createZoo(): Animal[] {
return [new Rhino(), new Elephant(), new Snake()];
}

在这个例子中，最佳公共类型有四个候选类型：Animal,Rhino,Elephant,和Snake。其中，Animal可以作为最佳公共类型。

形式有点像数学中的求最小公倍数...