JavaScript 및 TypeScript의 선언적 유형 소개

JavaScript 구문을 TypeScript 구문으로 다시 작성할 때 두 가지 핵심 사항이 있습니다. 하나는 클래스 멤버 변수(필드)를 선언해야 한다는 것이고, 다른 하나는 다양한 항목(변수, 매개 변수, 함수/메서드, 등.).
ES6 구문을 TypeScript 구문으로 다시 작성할 때 두 가지 중요한 지식 포인트가 있습니다. 하나는 클래스 멤버를 선언하는 것이고 다른 하나는 유형을 선언하는 것입니다. JavaScript에는 이러한 구문 기능이 없습니다. 이 두 가지 점은 두 가지 주요 질문으로 직접 이어집니다. 어떤 유형이 있습니까? 선언하는 방법?

유형

TypeScript 유형에 대해 이야기하기 전에 JavaScript의 7가지 유형을 검토해 보겠습니다. 계산된 typeof 연산자를 사용하지만 실제로는 객체이기 때문에 Array, null 및 Date와 같은 일반적인 유형은 없습니다.

TypeScript의 중요한 기능 중 하나는 유형이므로 TypeScript의 유형은 JavaScript의 유형 외에도 일부 다른 유형(불완전한 목록)도 정의됩니다

Array 또는 T[]. T 유형

null, 빈 유형의 배열을 나타내며 해당 기능은 strictNullChecks 컴파일 매개변수

Tuple(튜플)과 관련되며 [Number, String]

enum T 형식으로 열거형 T를 정의합니다. 중앙화된 쌍으로 이해될 수 있습니다. 숫자 상수의 이름은

interface T, 인터페이스, T는 인터페이스 유형

class T, class, T는 유형

any, 모든 유형을 나타냄

void, 유형이 없음을 나타냄, 사용됨 함수 유형을 선언하려면

never, 함수가 반환할 수 없는 마법의 유형을 나타냅니다

...

여기에서는 특정 유형에 대해 자세히 설명하지 않습니다. 공식 핸드북은 매우 명확합니다.

그러나 여전히 언급해야 할 유형 관련 기능이 있습니다. 바로 제네릭입니다. 데이터 유형에 대해서만 이야기하면 순수 JSers는 여전히 이해할 수 있습니다. 결국 유형은 새로운 것이 아니며 단지 유형을 확장할 뿐입니다. 그러나 순수 JSers는 제네릭에 대해 전혀 알지 못할 수도 있습니다.

제네릭은 일부 유형을 나타내기 위해 주로 기호를 사용합니다. 제약 조건(기본값은 제약 없음)을 충족하는 유형이라면

function test(v: T)와 같이 이 유형 기호를 대체하여 사용할 수 있습니다. {

console.log(v);}

test(true); // T가 부울로 대체되도록 명시적으로 지정 test("hello") // (암시적으로) T가 문자열로 대체됨 test(123) ); // 추론(암시적) T는 숫자로 대체됩니다

제네릭은 강력한 유형과 관련이 있습니다. 즉, 엄격한 유형 검사가 필요하며 덜 유사한 코드를 작성하고 싶기 때문에 특정 기호를 사용하여 간단히 대체하면 됩니다. 유형. 제네릭이라는 이름 자체는 이해하기 쉽지 않을 수 있지만, C++에서 "템플릿"이라는 개념을 빌려오면 이해하기 더 쉬울 것입니다. 예를 들어 위의 일반 함수는 후속 호출에 따라 세 가지 함수로 해석될 수 있으며 이는 템플릿을 적용하고 T를 실제 유형으로 바꾸는 것과 같습니다.

function test(v: boolean) { ... }function test(v : string) { ... }function test(v: number) { ... }

제네릭에 관한 자세한 내용은 핸드북의 제네릭 섹션을 참조하세요.

여기에서는 유형을 간략하게 설명합니다. 간단한 유형은 나중에 자세히 설명합니다. 하지만 TypeScript를 사용하기로 결정하면 필연적으로 정적 유형 기능을 사용하게 되므로 유형 식별에 대한 인식을 강화하고 이러한 습관을 키워야 합니다. 순수 JSers의 경우 이는 큰 도전입니다.

선언형

선언형은 주로 선언된 변수/상수, 함수/메서드, 클래스 멤버의 유형을 말합니다. JS에서 변수를 선언하려면 var를 사용하고, ES6에서는 let과 const를 확장합니다. 이러한 유형의 선언은 TypeScript에서 지원됩니다. 변수나 상수의 유형을 지정하는 것도 매우 간단합니다. 변수/상수 이름 뒤에 콜론을 추가한 다음 유형을 지정하면 됩니다. 예를 들어

// # typescript
 // 声明函数 pow 是 number 类型，即返回值是 number 类型// 声明参数 n 是 number 类型function pow(n: number): number {
    return n * n;}
 // 声明 test 是无返回值的function test(): void {
    for (let i: number = 0; i < 10; i++) {  // 声明 i 是 number
        console.log(pow(i));
    }}

이 코드는 함수 유형, 매개변수 유형의 선언을 보여줍니다. 및 변수 유형. 이는 JavaScript 코드보다 더 복잡한 것 같습니다. 하지만 실수로 다음과 같은 곳에서 pow를 호출한다면 생각해 보세요.

// # javascript
 let n = "a";let r = pow(n);     // 这里存在一个潜在的错误

JavaScript는 오류를 미리 확인하지 않고 r = pow(n)을 실행할 때만 NaN에 r을 할당합니다. 그러다가 r을 다른 곳에서 사용하면 체인 오류가 발생할 수 있고, 문제를 찾는 데 디버깅하는 데 시간이 걸릴 수 있습니다.
그러나 위의 두 줄의 코드는 TypeScript에서 번역될 수 없습니다. 다음과 같은 유형 불일치 오류가 보고됩니다.
'문자열' 유형의 인수는 '숫자' 유형의 매개변수에 할당할 수 없습니다.


클래스 멤버 선언

이제 JavaScript 코드를 살펴보겠습니다

// # javascript (es6)
 class Person {
    constructor(name) {
        this._name = name;
    }
 
    get name() {
        return this._name;
    }}

이 JavaScript 코드를 TypeScript 코드로 변환하면 다음과 같습니다

// # typescript
 class Person {
    private _name: string;
 
    public constructor(name: string) {
        this._name = name;
    }
 
    public get name(): string {
        return this._name;
    }}

注意到 private _name: string，这句话是在声明类成员变量 _name。JavaScript 里是不需要声明的，对 this._name 赋值，它自然就有了，但在 TypeScript 里如果不声明，就会报告属性不存在的错误： 
Property '_name' does not exist on type 'Person'.

虽然写起来麻烦了一点，但是我也能理解 TypeScript 的苦衷。如果没有这些声明，tsc 就搞不清楚你在使用 obj.xxxx 或者this.xxxx 的时候，这个 xxxx 到底确实是你想要添加的属性名称呢，还是你不小心写错了的呢？ 
另外要注意到的是 private 和 public 修饰符。JavaScript 中存在私有成员，为了实现私有，大家都想了不少办法，比如闭包。 
TypeScript 提供了 private 来修饰私有成员，protected 修改保护(子类可用)成员，public 修饰公共成员。如果不添加修饰符，默认作为 public，以兼容 JavaScript 的类成员定义。不过特别需要注意的是，这些修饰符只在 TypeScript 环境(比如转译过程)有效，转译成 JavaScript 之后，仍然所有成员都是公共访问权限的。比如上例中的 TypeScript 代码转译出来基本上就是之前的 JavaScript 代码，其 _name 属性在外部仍可访问。 
当然在 TypeScript 代码中，如果外部访问了 _name，tsc 是会报告错误的 
Property '_name' is private and only accessible within class 'Person'.

所以应用内使用 private 完全没问题，但是如果你写的东西需要做为第三方库发布，那就要想一些手段来进行“私有化”了，其手段和 JavaScript 并没什么不同。 


小结 

从 JavaScript 语法改写 TypeScript 语法，我们来做个简单的总结：

类成员需要声明。

变量、函数参数和返回值需要申明类型。

如果所有这些东西都要声明类型，工作量还是满大的，所以我建议：就接口部分声明类型。也就是说，类成员、函数/方法的参数和返回类型要声明类型，便于编辑器进行语法提示，局部使用的变量或者箭头函数，在能明确推导出其类型的时候，可以不声明类型。 

위 내용은 JavaScript 및 TypeScript의 선언적 유형 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!