새로운 스크립트 이해

7980 단어 growth typescript beginners learning

TypeScript 언어 소개:

코드를 작성하는 세계에 들어갔을 때, 당신이 배운 언어의 미세한 차이는 당신이 직면한 가장 어려운 일 중 하나가 될 것이다. 적어도 내가 시작했을 때는 그랬다.우선, 나는 변수 유형의 개념을 이해하고 자바스크립트에서 서로 상호작용하는 방식의 차이를 기억해야 한다. 이것은 커다란 도전이다.시간의 추이에 따라 규칙이 더욱 명확해졌고, 나는 더욱 건장한 자바스크립트 코드 블록을 작성하는 것에 대해 더욱 편안함을 느끼기 시작했다.나중에 저는 주로 오류 처리를 통해 JavaScript가 사용자가 작성한 내용을 허용하는 데 매우 관대하고 심지어 오류를 일으키지 않는 상황에서 잘못된 표현식을 구성할 수 있다는 것을 체험했습니다.솔직히 말하면, 나는 차라리 내가 두 번째 줄로 이동하거나 200줄로 더 나아가기 전에 첫 번째 줄의 일부 설정이 정확하지 않다는 경고를 받고 싶다.현재, 나는 이미 몇 시간의 디버깅을 겪었고, 어떤 최선의 실천을 파악했으며, 잠재적인 오류가 발생하기 전에 그것들을 발견할 수 있다.새로운 언어를 배우는 개발자로서 저는 계속 TypeScript를 향해 발전했습니다. TypeScript는 자바스크립트가 허용하는 오류를 방지할 수 있다고 치켜세웠습니다.이 블로그는 내가 TypeScript를 깊이 이해하려는 시도로 그 근원부터 시작되었다.

typescript란 무엇입니까?

TypeScript(TS)는 Microsoft에서 유지 관리하는 정적 스크립트 언어로 JS(JavaScript)의 문법 초집합이 되기 위한 원본입니다.이것은 TS 문서에서 전환된 매우 기술적인 정의이지만 나 같은 초보자에게는 TS가 무엇인지, 그리고 JS와의 차이를 명확하게 이해할 수 있도록 더 많은 해체가 필요하다.정적 스크립트는 개발자가 작성한 코드에 버그가 없는지 확인하기 위해 형식 검사 형식이나 언어가 강제로 실행되는 규칙을 가리킨다.정적 유형화 언어는 컴파일할 때 그 유형의 제약을 강제로 집행하는 언어이며, 개발자에게 코드에서 사용할 언어 구조(변수, 표현식, 함수 등)의 데이터 유형을 정의하도록 요구한다.정적 스크립트는 코드를 작성할 때, 컴퓨터가 실행되거나 실행되기 전에 디버깅을 해서 실행 시간을 가속화할 수 있다. 물론 우리는 이 기능의 중요성을 이해할 수 있다.코드가 실행되기 전에 오류를 포착하면 사용자가 작성한 프로그램이 더욱 좋고 정확한 기능을 가지고 있음을 확보할 수 있습니다.TS가 일부 원시 데이터 유형과 어떻게 상호작용하는지 연구해 봅시다.

예제 1


var name: string = "James Thomas";

// explicit data typing

위쪽은 정적 스크립트 언어의 예시로 코드에 변수 데이터 형식을 분배하기 전에 변수 데이터 형식을 현저하게 정의합니다.강력한 유형 지정으로 인해 TS에는 추가 옵션 기능이 있습니다.용어'강유형'은 단지 이런 언어에서 성명된 변수가 특정한 데이터 유형에 귀속되는 것을 가리킨다.변수는 코드에서 사용할 수 있도록'현식 정의'또는'추단'데이터 형식의 값에 분배해야 합니다. 그렇지 않으면 컴파일러가 형식 오류를 되돌려줍니다.이 선택 가능한 기능은 동적 형식화 쓰기 변수를 허용하는 동시에 컴파일러의 정적 형식화 오류 프로토콜의 안전성을 제공합니다.'추단 유형'은 언어가 사전에 명확하게 정의되지 않은 상황에서 변수 데이터 유형을 확정하는 능력을 가리킨다.

예제 2


var name = "James Thomas";

// inferred data typing

위의 변수 정의는 vanilla JS처럼 보이지만 나중에 코드에서 이 변수를 사용하고 언어의 유형 규칙을 준수할 수 없을 때 신기한 일이 일어난다.만약 변수가 문법 오류로 사용된다면, 컴파일러는 우리의 첫 번째 코드 예시에서 그것을 현저하게 정의하는 것처럼 오류를 던질 것이다.

예3


var number = 36;

number = "James Thomas";

// Error: Type 'string' is not assignable to type 'number'. (2322)

따라서 우리는 TS가 일부 원시 데이터 형식을 어떻게 처리하는지 이해했지만 이 언어가 어떻게 정적 유형 파라미터를 복잡한 데이터 형식에 응용하는지 탐색해야 한다.

Typescript는 복잡한 데이터 유형과 어떻게 상호작용합니까?

복잡한 데이터는 기원값을 포함할 수 있기 때문에 TS가 사용하는 정적 유형화 규칙은 약간의 다른 방식으로 복잡한 데이터 유형과 상호작용해야 한다.이러한 복잡한 데이터와의 정적 유형 상호작용을 촉진하기 위해 TS는 소위'인터페이스'를 포함한다.이 인터페이스는 복잡한 데이터 형식의 모든 요소의 정의 청사진이나 계약으로 간주되어야 하며, 잠시 후 코드에서 정의되고 사용될 것입니다.이러한 TS 인터페이스의 조작은 ES6 클래스 구조 함수와 매우 유사하다. 그 중에서 모든 새로운 실례화된 클래스 실례는 항상 부모 구조 함수에 정의된 속성과 방법을 포함한다.
방주=>TS도 클래스를 포함하지만 인터페이스는 나에게 이 언어의 새로운 부분이기 때문에 나는 여기서 그것들을 강조하여 나의 이해를 높일 것이다.
인터페이스와 클래스 사이의 주요 차이점은 인터페이스는 포함된 요소의 성명만 포함하고 생성된 모든 새로운 실체로부터 계승될 값이나 방법 기능은 포함하지 않는다는 것이다.단지 명확하게 하기 위해서'실례'는 클래스를 가리키고,'실체'는 인터페이스를 가리킨다.이것은 인터페이스에 대해 개발자가 잠시 후에 인터페이스 개술의 복잡한 데이터 유형의 요소를 정의해야 한다는 것을 의미한다.

예 4

interface Student {
    firstName: string,
    lastName: string,
    className: string,
    answerRoll: ()=>string
}

// this interface defines the types of all Student objects to come

위의 코드 예시를 보십시오. 우리는 학생이라는 TS 인터페이스를 보았습니다. 이것은 학생 대상이 반드시 포함해야 하는 모든 요소를 정의합니다.우리가 코드에 사용할 학생 대상을 만들 때, 이 인터페이스는 우리가 따라야 할 청사진이다.인터페이스와 클래스 간의 또 다른 관건적인 차이점은 인터페이스 실체가 새로운 키워드로 실례화된 것이 아니라는 것이다.문법의 차이점은 대상과 모든 포함 요소를 정의해야 한다는 것이다.

예

 var senior: Student = {
    firstName: “James”,
    lastName: “Thomas”,
    className: “McLaren”,
    answerRoll: ()=>string => {return “Here, ready to code!”}
}

// new Student object

키워드'new'와 클래스 구조 함수를 간단하게 사용하는 것에 비하면, 인터페이스를 통해 새로운 실체를 만드는 방법은 좀 번거로운 것 같지만, 컴파일할 때 보답을 받을 수 있다.TS는 JS로 컴파일되므로 컴파일러가 인터페이스를 읽을 때 무시됩니다.컴파일 결과에 필요한 코드가 더 적고, 컴파일 시간이 더 짧으며, 컴파일한 코드의 운행에 영향을 주지 않습니다.내 책에서 이것은 거대한 수확이다.