정보실

웹학교

정보실

javascript 초보자를 위한 TypeScript Tutorial : The Missing Guide (2019)

본문

초보자를 위한 TypeScript 튜토리얼 :이 안내서의 대상 


다음 가이드는 TypeScript에 대해 더 배우고 자하는 JavaScript 개발자를 위한 TypeScript 자습서입니다. 

그것은 우리가 갈 때 기초에 대한 포인터를 제공 할지라도 "바닐라"JavaScript에 대한 적절한 지식이 인정된다는 것을 의미합니다.


https://www.valentinog.com/blog/typescript/ 


이 자습서를 시작하기 전이나 후에 JavaScript 기술을 새로 고치려면 Github에서 무료로 제공되는 PDF 및 ePub/Mobi로 제공되는“Little JavaScript Book”을 확인하십시오.


TypeScript와 "초보자"라는 단어가 동일한 자습서에 속합니까? 이 안내서를 작성하기 전에 확실하지 않았지만 매일 TypeScript에 관심이 있는 초보자가 많이 있습니다. 

그렇게 하기로 결정했다면, JavaScript와 함께 초기에 TypeScript를 배우는 것은 어려울 것입니다. 하지만 장기적으로는 돈을 지불해야 합니다. 계속가요! 그런 경우라면 계속 읽으십시오.


시작하기 전에 시스템에 최신 버전의 Node.js가 설치되어 있는지 확인하십시오.


그리고 이제 독서를 즐기십시오!


초보자를 위한 TypeScript 자습서 : TypeScript 란 무엇입니까? 


공식 웹 사이트의 정의에 따르면“타입 화 된 자바 스크립트 슈퍼 세트”라고 되어 있지만“슈퍼 셋”이 무엇인지 그리고“타입이 무엇”이 무엇인지 알고 있다고 가정합니다. 작업을 단순하게 유지하기 위해 TypeScript를 JavaScript의 "상위 계층"이라고 생각할 수 있습니다.


TypeScript는 편집기에서 TypeScript 코드를 작성할 수 있으므로 레이어입니다. 컴파일 후 모든 TypeScript 내용이 사라지고 평범하고 간단한 JavaScript가 남습니다.


컴파일 단계의 아이디어가 혼란스러우면 JavaScript가 이미 컴파일 된 후 해석된다는 것을 명심하십시오. 코드를 읽고 실행하는 JavaScript 엔진이 있습니다.


그러나 JavaScript 엔진은 TypeScript 코드를 읽을 수 없으므로 모든 TypeScript 파일은 컴파일이라는 "번역 전"프로세스를 거쳐야 합니다. 

첫 번째 컴파일 단계 후에는 순수한 JavaScript 코드가 남아 브라우저에서 실행할 수 있습니다. 나중에 TypeScript 컴파일이 수행되는 방법을 볼 수 있습니다.


지금은 TypeScript가 특별한 종류의 JavaScript이지만 브라우저에서 실행하기 전에 "번역기"가 필요하다는 점을 명심하십시오.


초보자를 위한 TypeScript 튜토리얼 : 왜 TypeScript? 


처음에는 TypeScript가 왜 의미가 있는지 정확하게 이해하지 못합니다. "TypeScript의 요점은 무엇입니까?" 좋은 질문 내 친구.


실제로 코드에서 심각하고 어리석은 실수를 잡는 즉시 이점을 보게 될 것입니다. 더 중요한 것은 코드베이스가 체계적이고 거의 자체 문서화 되는 것입니다. 에디터에서 자동 완성 기능이 향상 되어도 좋은 결과를 얻을 수 있지만 좋은 부작용입니다.


어쨌든, TypeScript가 쓸모 없거나 (TypeScript 세금) 너무 어색하다는 트위터 나“오렌지 웹 사이트”에 새 스레드가 나타납니다. 예를 들면 다음과 같습니다.


IT의 거의 모든 것과 마찬가지로 바리케이드의 양쪽에 당파자가 있습니다. TypeScript의 견해와 지지자가 있지만 중요한 것은 TypeScript가 견고한 도구이며 도구 벨트에 넣는 것이 해가 되지 않는다는 것입니다.


여기서 목표는 도구를 보여주고 TypeScript에 대한 자신의 아이디어를 형성하는 데 도움이 되는 것입니다.


초보자를 위한 TypeScript 자습서 : TypeScript 설정 


설정? 왜 그래? TypeScript는 단순한 언어가 아닙니까? 거의. TypeScript에는 TypeScript 코드를 JavaScript 코드로 컴파일하는 바이너리도 있습니다. 브라우저는 TypeScript를 이해하지 못합니다. 바이너리를 설치하자. 새 폴더 안에 새 노드 프로젝트를 작성하십시오.


  1. mkdir typescript-tutorial && cd $_
  2. npm init -y

다음을 사용하여 TypeScript를 설치하십시오.


npm i typescript --save-dev 


다음으로 TypeScript 컴파일러를 쉽게 실행할 수 있도록 노드 스크립트를 구성하십시오.


  1. "scripts": {
  2. "tsc": "tsc"
  3. },

tsc는 TypeScript 컴파일러를 나타내며 컴파일러가 실행될 때마다 프로젝트 폴더에서 tsconfig.json이라는 파일을 찾습니다. 다음을 사용하여 TypeScript 용 구성 파일을 생성 해 보겠습니다.


npm run tsc -- --init 


모든 것이 잘되면“TS6071 : tsconfig.json 파일을 성공적으로 만들었습니다”라는 메시지가 나타나고 프로젝트 폴더에 새 파일이 표시됩니다. 이제 침착하게 tsconfig.json은 무서운 구성 파일입니다. 모든 요점을 알 필요는 없습니다. 다음 섹션에서는 시작 관련 비트 만 볼 수 있습니다.


TypeScript 컴파일러 구성 


파일을 터치하기 전에 git repo를 초기화하고 원본 tsconfig.json을 커밋하는 것이 좋습니다. 구성 옵션 중 일부만 남겨두고 나머지는 모두 제거합니다. 나중에 버전을 원본과 비교할 수 있습니다.


시작하려면 tsconfig.json을 열고 모든 원본 컨텐츠를 다음으로 바꾸십시오.


  1. {
  2. "compilerOptions": {
  3. "target": "es5",
  4. "strict": true
  5. }
  6. }

파일을 저장하고 닫습니다. 우선 tsconfig.json이 무엇인지 궁금 할 것입니다. 이 구성 파일은 타이프 스크립트 컴파일러와 타이프를 지원하는 코드 편집기 읽습니다.


TypeScript는 "vanilla"JavaScript로 컴파일 됩니다. 주요 대상은 원하는 JavaScript 버전 인 ES5 (또는 최신 릴리스)를 결정합니다.


tsconfig.json의“엄격 성”수준에 따라 적절한 유형 주석을 코드에 추가하지 않으면 컴파일러와 편집기가 이를 준수합니다 (1 분 후 더 자세히 설명).


엄격하게 true로 설정하면 TypeScript는 코드에서 유형 검사의 최대 수준을 다른 것들 중에서 가능하게 합니다.

  • noImplicitAny true : 변수에 정의 된 유형이 없는 경우 TypeScript가 불평합니다
  • alwaysStrict true : 엄격 모드는 우발적 인 전역 변수, 기본 "this"바인딩 등을 방지하는 JavaScript의 안전한 메커니즘입니다. "alwaysStrict"가 true로 설정되면 TypeScript는 모든 JavaScript 파일의 맨 위에 "엄격한 사용"을 내 보냅니다.

더 많은 구성 옵션을 사용할 수 있습니다. 시간이 지남에 따라 더 많은 정보를 얻을 수 있게 되었으므로 지금 위의 두 가지 옵션은 시작하는 데 필요한 모든 것입니다. 그런데 "어떤 것"은 무엇입니까?


“유형”에 관한 몇 마디 


이제 TypeScript의 기능에 대한 힌트를 얻게 되었습니다. 모든 것이 유형을 중심으로 이루어집니다. 이것들은 String, Object, Boolean 등과 같은 고전적인 JavaScript“유형”이 아닙니다. TypeScript는 다른 유형과 마찬가지로 자체적으로 더 많은 유형을 추가합니다.


특히 "any"는 "느슨한"TypeScript 유형입니다. 의미 :이 변수는 string, boolean, object와 같은 유형 일 수 있습니다. 정말 상관하지 않습니다. 실제로 유형 검사가 전혀 없는 것과 같습니다. 엄격을 true로 설정하면 TypeScript에“내 코드에서 모호성을 허용하지 않습니다”라고 말합니다.


따라서 모든 오류를 처음에 수정하기가 더 어려울지라도 TypeScript의 최대 엄격도를 유지하는 것이 좋습니다. 이제 우리는 TypeScript가 실제로 작동하는 것을 볼 준비가 되었습니다!


초보자를 위한 TypeScript 자습서 : 작동중인 TypeScript 


모든 것은 합법적 인 (명백하게) JavaScript 함수 인 filterByTerm으로 시작합니다. 프로젝트 폴더에 filterByTerm.js라는 새 파일을 작성하고 다음 코드를 복사하십시오.


  1. function filterByTerm(input, searchTerm) {
  2. if (!searchTerm) throw Error("searchTerm cannot be empty");
  3. if (!input.length) throw Error("input cannot be empty");
  4. const regex = new RegExp(searchTerm, "i");
  5. return input.filter(function(arrayElement) {
  6. return arrayElement.url.match(regex);
  7. });
  8. }
  9. filterByTerm("input string", "java");

지금 논리를 이해하지 않아도 걱정하지 마십시오. 해당 기능의 매개 변수와 몇 줄 후에 어떻게 사용되는지 살펴보십시오. 코드를 살펴보면 이미 문제를 발견했을 것입니다 (Java가 아닙니다).


코드를 실행하거나 Jest로 테스트하지 않고도 IDE에서 해당 기능을 확인할 수 있는 방법이 있는지 궁금합니다. 가능합니까? TypeScript는 JavaScript에 대한 정적 검사, 즉 코드가 실행되기 전에 코드의 정확성을 테스트하는 가장 좋은 도구 중 하나입니다.


따라서 TypeScript 세계로 도약하여 파일 확장자를 filterByTerm.js에서 filterByTerm.ts로 변경하십시오. 이 변경으로 코드에서 많은 오류를 발견 할 수 있습니다.


TypeScript tutorial - your first steps with TypeScript 


함수 매개 변수 아래에 빨간색 표시가 보입니까? 이제부터는 텍스트 형식으로 오류를 보여 주지만 TypeScript에서 실수를 할 때마다 IDE와 텍스트 편집기에 빨간색 선이 표시됩니다.


우리가 잘못 실행하고 있음을 확인하려면 :


npm run tsc 


오류를 살펴보십시오.


  1. filterByTerm.ts:1:23 - error TS7006: Parameter 'input' implicitly has an 'any' type.
  2. filterByTerm.ts:1:30 - error TS7006: Parameter 'searchTerm' implicitly has an 'any' type.
  3. filterByTerm.ts:5:32 - error TS7006: Parameter 'arrayElement' implicitly has an 'any' type.

TypeScript는 함수 매개 변수에“any”유형이 있다고 말하고 있습니다. TypeScript 코드에 적절한 형식 주석을 추가해야 합니다.


잠깐만요, 정말로 유형이 무엇입니까?


JavaScript의 유형과 문제점은 무엇입니까? 


JavaScript에는 유형이 있으며 문자열, 부울, 숫자, 객체 등이 있다는 것을 알기 전에 언어로 작업 한 경우. 현재 JavaScript에는 7 가지 유형이 있습니다.

  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Object
  • Symbol (part of ECMAScript 2015)

해당 목록의 모든 것은 유형 인 Object를 제외하고는 "원시"입니다. 모든 JavaScript 유형에는 문자열 및 숫자와 같이 코드에서 사용할 수 있는 해당 표현이 있습니다.


  1. var name = "Hello John";
  2. var age = 33;

JavaScript의“문제”는 변수가 변수를 원할 때마다 유형을 변경할 수 있다는 것입니다. 예를 들어 부울은 나중에 문자열이 될 수 있습니다 (types.js라는 파일에 다음 코드 저장).


  1. var aBoolean = false;
  2. console.log(typeof aBoolean); // "boolean"
  3. aBoolean = "Tom";
  4. console.log(typeof aBoolean); // "string"

변환은 의도적 일 수 있으며 개발자는 실제로 "Tom"을 부울에 할당 하려고 하지만 이러한 종류의 오류가 우연히 발생할 가능성이 높습니다.


기술적으로 말하면 JavaScript의 "유형 역 동성"은 의도적이므로 JavaScript 자체에는 아무런 문제가 없습니다. JavaScript는 본격적인 엔터프라이즈 언어가 아닌 웹을 위한 간단한 스크립팅 언어로 탄생했습니다.


그러나 JavaScript가 느슨해지면 코드에 심각한 문제가 발생하여 유지 관리 성이 떨어질 수 있습니다. TypeScript는 JavaScript에 강력한 유형을 추가하여 이러한 문제를 해결하는 것을 목표로 합니다. 실제로 types.js의 확장자를 types.ts로 변경하면 IDE에 TypeScript가 불평하는 것을 볼 수 있습니다.


types.ts의 컴파일은 다음을 생성합니다.


types.ts:4:1 - error TS2322: Type '"Tom"' is not assignable to type 'boolean'. 


이 지식으로 무장한 TypeScript 유형에 대해 자세히 알아 보겠습니다.


발가락을 TypeScript 유형으로 담그기 


TypeScript는 유형을 중심으로 하며 코드에 전혀 유형이 없는 것처럼 보입니다. 추가 할 시간입니다. 먼저 함수 매개 변수를 수정하겠습니다. 함수가 어떻게 호출되는지 살펴보면 두 문자열을 인수로 사용합니다.


filterByTerm("input string", "java"); 


확실합니까? 함수에 첫 번째 주석을 추가해 보겠습니다. 방법은 다음과 같습니다.


  1. function filterByTerm(input: string, searchTerm: string) {
  2. // omitted
  3. }
  4. // omitted

그게 다야! 매개 변수에 유형을 추가하여 코드를 순수 JavaScript에서 TypeScript로 마이그레이션합니다. 그러나 코드를 컴파일 하려고하면 :


npm run tsc 


다음과 같은 일이 발생합니다.


filterByTerm.ts:5:16 - error TS2339: Property 'filter' does not exist on type 'string'. 


TypeScript가 당신을 어떻게 인도하고 있는지 알 수 있습니까? 필터 기능에 문제가 있습니다.


  1. function filterByTerm(input: string, searchTerm: string) {
  2. // omitted
  3. return input.filter(function(arrayElement) {
  4. return arrayElement.url.match(regex);
  5. });
  6. }

우리는 TypeScript에“입력”이 문자열이지만 나중에 코드에서 배열에 속하는 필터 메소드를 호출한다고 말합니다. 우리가 실제로 원하는 것은 “입력”을 무언가의 배열, 아마도 문자열의 배열로 표시하는 것입니까?


이를 위해 두 가지 옵션이 있습니다. 문자열이 있는 옵션 1 [] :


  1. function filterByTerm(input: string[], searchTerm: string) {
  2. // omitted
  3. }

또는 원하는 경우 Array <Type> 옵션 2 :


  1. function filterByTerm(input: Array<string>, searchTerm: string) {
  2. // omitted
  3. }

개인적으로 나는 옵션2를 더 좋아합니다. 이제 다시 컴파일 해 봅시다 (npm run tsc). 여기 있습니다 :

  1. filterByTerm.ts:10:14 - error TS2345: Argument of type '"input string"' is not assignable to parameter of type 'string[]'.
  2. filterByTerm("input string", "java");

TypeScript는 우리를 내버려두고 싶지 않습니다. 비난하지 말고 입력을 문자열 배열로 표시했으며 이제 문자열을 전달하려고 합니다. 쉬운 수정입니다! 대신 문자열 배열을 전달해 봅시다.


filterByTerm(["string1", "string2", "string3"], "java"); 


그리고 지금까지 완전한 코드가 있습니다 :

  1. function filterByTerm(input: Array<string>, searchTerm: string) {
  2. if (!searchTerm) throw Error("searchTerm cannot be empty");
  3. if (!input.length) throw Error("input cannot be empty");
  4. const regex = new RegExp(searchTerm, "i");
  5. return input.filter(function(arrayElement) {
  6. return arrayElement.url.match(regex);
  7. });
  8. }
  9. filterByTerm(["string1", "string2", "string3"], "java");

나에게 좋아 보인다. 그러나 컴파일하면 그렇지 않습니다 (npm run tsc).


filterByTerm.ts:6:25 - error TS2339: Property 'url' does not exist on type 'string'. 


Ok TypeScript, 충분히 공평합니다. 우리는 문자열 배열을 전달하지만 나중에 코드에서 "url"이라는 속성에 액세스하려고 합니다.


return arrayElement.url.match(regex); 


즉, 문자열 배열이 아닌 객체 배열이 필요합니다. 다음 섹션으로 수정하겠습니다.


초보자를 위한 TypeScript 자습서 : TypeScript 개체 및 인터페이스 


filterByTerm에 문자열 배열이 전달되었으므로 TypeScript가 불평하는 것은 놀라운 일입니다. 유형 문자열 TypeScript에 "url"속성이 없습니다. 모든 개체에 필요한 url 속성이 있는 개체 배열을 전달하여 TypeScript를 도와 드리겠습니다.


  1. filterByTerm(
  2. [{ url: "string1" }, { url: "string2" }, { url: "string3" }],
  3. "java"
  4. );

그리고 함수 서명을 업데이트하여 객체 배열을 가져옵니다.


  1. function filterByTerm(input: Array<object>, searchTerm: string) {
  2. // omitted
  3. }

이제 코드를 컴파일하자 :


npm run tsc 


출력에 감탄하십시오.


filterByTerm.ts:6:25 - error TS2339: Property 'url' does not exist on type 'object'. 


다시 갑니다! 적어도 TypeScript에서는 의미가 있습니다. 일반 JavaScript 객체에는“url”이라는 속성이 없습니다. 그리고 나에게 이것은 TypeScript가 실제로 빛나기 시작하는 곳입니다.


요점은 임의의 개체에 속성을 할당하고 하루에 호출 할 수 없다는 것입니다. TypeScript는 코드의 모든 엔티티가 특정 형태를 준수 할 것을 기대합니다. 그리고 TypeScript의 모양에는 인터페이스라는 이름이 있습니다.


이제 처음에는 외계인 구문처럼 보이지만 인터페이스에 익숙해지면 어디서나 사용할 수 있습니다. 그런데 인터페이스란 무엇입니까? TypeScript의 인터페이스는 계약과 같습니다. 또는 인터페이스가 엔티티의 "모델"과 다른 방식으로 표현하십시오.


코드를 살펴보면 모양이 다음 패턴을 따라야 하는 객체에 대해 Link라는 간단한“모델”을 생각할 수 있습니다.

  • 문자열 유형의 url 속성이 있어야 합니다.

TypeScript에서 인터페이스와 같이 "모델"을 정의합니다 (filterByTerm.ts의 맨 위에 다음 코드를 입력하십시오).

  1. interface ILink {
  2. url: string;
  3. }

인터페이스 선언으로“지금부터 TypeScript 코드에서 해당 모양을 사용하고 싶습니다”라고 말합니다. 물론 유효한 JavaScript 구문이 아니며 컴파일 중에 제거됩니다.


팁 : TypeScript의 규칙 인 대문자 I로 인터페이스 접두사를 사용하는 것이 좋습니다.


이제 매개 변수“input”을 수정하여 인터페이스 ILink (실제로 사용자 정의 TypeScript 유형)를 사용할 수 있습니다.


  1. function filterByTerm(input: Array<ILink>, searchTerm: string) {
  2. // omitted
  3. }

이 수정으로 TypeScript는 "ILink 배열을 기대합니다"라고 해당 함수의 입력으로 말합니다. 완전한 코드는 다음과 같습니다.


  1. interface ILink {
  2. url: string;
  3. }
  4. function filterByTerm(input: Array<ILink>, searchTerm: string) {
  5. if (!searchTerm) throw Error("searchTerm cannot be empty");
  6. if (!input.length) throw Error("input cannot be empty");
  7. const regex = new RegExp(searchTerm, "i");
  8. return input.filter(function(arrayElement) {
  9. return arrayElement.url.match(regex);
  10. });
  11. }
  12. filterByTerm(
  13. [{ url: "string1" }, { url: "string2" }, { url: "string3" }],
  14. "java"
  15. );

이 시점에서 모든 오류가 사라지고 다음을 실행할 수 있습니다.


npm run tsc 


컴파일 단계는 프로젝트 폴더에 일반 JavaScript 코드와 함께 filterByTerm.js라는 파일을 생성합니다. 파일을 확인하고 TypeScript 특정 선언이 어떻게 제거되는지 확인할 수 있습니다.


"alwaysStrict"가 true로 설정되어 있기 때문에 TypeScript 컴파일러는 filterByTerm.js의 맨 위에 "엄격한 사용"을 내 보냅니다.


첫 번째 TypeScript 코드에서 훌륭합니다! 다음 섹션에서는 인터페이스를 조금 더 살펴 보겠습니다.


초보자를 위한 TypeScript 튜토리얼 : 인터페이스 및 필드 


TypeScript 인터페이스는 가장 강력한 언어 구성 중 하나입니다. 인터페이스는 모든 개발자가 코드를 작성할 때 해당 모양을 선택하고 이를 준수 할 수 있도록 응용 프로그램 전체에서 "모델"을 형성하는 데 도움이 됩니다.


지금까지 간단한 인터페이스 인 ILink를 정의했습니다.

  1. interface ILink {
  2. url: string;
  3. }

인터페이스에 더 많은 필드를 추가하려면 블록 내부에서 필드를 선언해야 합니다.


  1. interface ILink {
  2. description: string;
  3. id: number;
  4. url: string;
  5. }

이제 ILink 유형의 개체는 새 필드를 "구현"해야 합니다. 그렇지 않으면 오류가 발생합니다. 실제로 다음을 사용하여 코드를 컴파일합니다.


npm run tsc 


TypeScript가 비명을 지릅니다.


filterByTerm.ts:17:4 - error TS2739: Type '{ url: string; }' is missing the following properties from type 'ILink': description, id 


문제는 함수의 인수에 있습니다.


  1. filterByTerm(
  2. [{ url: "string1" }, { url: "string2" }, { url: "string3" }],
  3. "java"
  4. );

TypeScript는 인수가 ILink의 Array 유형이라는 함수 선언을보고 공제 할 수 있습니다. 따라서 해당 배열 내의 모든 객체에는 ILink 인터페이스에 정의 된 모든 필드가 있어야합니다 (구현).


















페이지 정보

조회 57회 ]  작성일19-10-07 16:44

웹학교