TypeScript에 대해 알아야 할 사항

이번에는 TypeScript에 대해 꼭 알아야 할 사항을 알려드리겠습니다. TypeScript 사용 시 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

Angular1에 비해 Angular2는 Java 및 Javascript와 같습니다. 큰 변화로 인해 AngularJS는 1.x 버전을 나타내는 데 사용되는 반면 Angular는 2.x, 4.x, 5.x 및 기타 후속 버전을 나타냅니다. Angular 계열의 역사를 기록하려면 "Angular Authoritative Tutorial"을 참조하세요. 이 기사에서는 TypeScript를 소개합니다.

원본 링크

TypeScript

Angular는 JavaScript와 유사한 언어인 TypeScript로 구축되었습니다.
TypeScript는 완전히 새로운 언어는 아니지만 ES6의 상위 집합입니다. 모든 ES6 코드는 완전히 유효하고 컴파일 가능한 TypeScript 코드입니다.

typescript

TypeScript에는 ES5에 비해 다섯 가지 주요 개선 사항이 있습니다.

TypeScript 유형은 선택 사항입니다.

그러나 유형 검사의 이점은 다음과 같습니다.

1 컴파일 중에 코드를 작성하고 버그를 방지하는 데 도움이 됩니다.

2 코드를 읽고 작성자의 의도를 명확하게 표현하는 데 도움이 됩니다.

String

String에는 String 유형으로 선언된 텍스트가 포함됩니다.

var name: string = 'hello world!';

Number

TypeScript에서는 정수 또는 부동 소수점에 관계없이 모든 데이터가 부동 소수점 숫자로 표시됩니다.

var age: number = 25;

Array

배열은 동일한
데이터 유형

의 집합이므로 배열은 배열 유형으로 표시됩니다. 컬렉션이므로 배열의 항목에 대한 유형도 지정해야 합니다.

var arr: Array<string> = [&#39;component&#39;, &#39;provider&#39;, &#39;pipe&#39;];
    或var arr: string[] = [&#39;component&#39;, &#39;provider&#39;, &#39;pipe&#39;];var arr: Array<number> = [1, 2, 3, 4, 5, 6];
    或var arr: number[] = [1, 2, 3, 4, 5, 6];

enumeration

enumeration은 이름을 지정할 수 있는 값의 집합입니다.

enum Man {age, iq, eq};
var man: Man = Man.age;

모든 유형

변수에 유형이 지정되지 않은 경우 기본값입니다. 유형 any 유형의 변수는 모든 유형의 데이터를 받을 수 있습니다.

var something: any = 'hello world';
something = 1;
something = [1, 2, 3];

"None" 유형

void은 일반적으로 함수의 반환 값으로 사용된다는 의미입니다. 반환 값

function setName(name: string): void {    this.name = name;
}

void Type도 유효한 모든 유형입니다

class

es5는 프로토타입 기반

객체 지향

설계를 채택했습니다. 클래스를 사용하지 않고 프로토타입에 의존합니다

es6에서는 클래스를 사용할 수 있습니다. 다음과 같은 내장 클래스를 나타냅니다.

class Point {}

A 클래스는 속성, 메소드 및

constructors

Attributes

속성을 포함할 수 있습니다. 속성은 다음과 같은 클래스 인스턴스 객체의 데이터를 정의합니다. 포인트 클래스는 x, y 속성을 가질 수 있습니다

Every 클래스의 속성은 다음과 같은 선택적 유형을 포함할 수 있습니다.

class Point {    x: number;    y: number;
}

MethodMethod는 클래스 객체 인스턴스의 컨텍스트에서 실행되는 함수입니다. 객체의 메소드를 호출하기 전에 이 객체

class Point {
    x: number;
    y: number;
    moveTo(x: number, y: number) {        this.x = x;        this.y = y;        console.log(this.x, this.y);
    }
}var p: Point = new Point();
p.x = 1;
p.y = 1;
p.moveTo(10,10);

의 인스턴스가 있어야 합니다. 생성자

생성자는 클래스가 인스턴스화될 때 실행되는 특수 함수입니다. 일반적으로 생성자에서는 생성자라는 이름을 지정해야 합니다. 생성자는 클래스가 인스턴스화될 때 호출되므로 입력 매개변수를 가질 수 없습니다. 값클래스가 생성자를 명시적으로 정의하지 않으면 매개변수 없는 생성자가 자동으로 생성됩니다.

class Point {
}var p = new Point();
等价于class Point {    constructor() {
    }
}var p = new Point();

매개변수가 있는 생성자

class Point {
    x: number;
    y: number;    constructor(x: number, y: number) {        this.x = x;        this.y = y;
    }
    moveTo(x: number, y: number) {        this.x = x;        this.y = y;        console.log(this.x, this.y);
    }
}    
var p: Point = new Point(1,1);
p.moveTo(10,10);

Inheritance

상속의 또 다른 중요한 특징은 상속입니다. 상위 클래스가 해당 동작을 가져오면 이 하위 클래스에서 동작을 다시 작성, 수정 또는 추가할 수 있습니다.

TypeScript는 확장 키워드를 사용하여 구현되는 상속 기능을 지원합니다. 더 흥미로운 정보를 보려면 비용을 지불하세요. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

캔버스에서 검정색 배경에 청록색 불꽃놀이를 만드는 방법

Fetch를 사용하여 http 요청 만들기

위 내용은 TypeScript에 대해 알아야 할 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!