TypeScript 설명서 찾아보기

by

입력하다

새로 시작한 프로젝트에서는 TypeScript를 사용하여 프런트 엔드를 개발하기로 결정했습니다.
이전에 TypeScript를 사용해 본 적이 없기 때문에 시간을 내어 참고 자료를 간단히 살펴보기로 했습니다.
적어도 약간의 JavaScript를 가지고 놀면서 둘 사이의 차이점을 아는 것은 좋은 일인 것 같습니다.

타이프스크립트 참조인용하다.

'추천 관련글,

문서 – 초보 프로그래머를 위한 TypeScript

처음부터 TypeScript 배우기

www.typescriptlang.org

왜 타이프스크립트인가?

JavaScript가 이제 웹 브라우저에서 스크립팅 언어로 자리 잡은 것은 놀라운 일이 아닙니다.
JavaScript는 브라우저 영역 외부에서 서버를 구축하는 데 매우 널리 사용되는 언어가 되었기 때문입니다.
JavaScript만 사용하여 전체 스택 프로그래밍을 수행하는 것도 가능합니다.

이 JavaScript에도 치명적인 문제가 있습니다.
즉, 런타임에 오류가 발생합니다.
2의 오류는 런타임 오류로 인해 (1,2,3)의 과정에서 쉽게 발견되지 않는다.
이러한 단점을 보완하기 위해 TypeScript는 컴파일하여 프로그램이 실행되기 전에 오류를 출력할 수 있도록 합니다.

JavaScript 함수를 실행하는 동안 컴파일 시간에 오류를 잡는 방법은 무엇입니까? 이는 언어의 이름에서 알 수 있듯이 유형을 지정하기 때문입니다.
미리 선언할 수 없는 변수는 타입을 지정하여 컴파일 단계에서 차단할 수 있습니다.

이런저런 이유로 저처럼 실수를 많이 하는 사람도 TypeScript를 사용하면 좀 더 편안한 코딩 생활을 할 수 있을 것 같아요.

통사론

TypeScript는 JavaScript 구문을 허용합니다.
JavaScript 코드는 오류로 간주되지 않기 때문에 TypeScript가 어떤 유형인지 알지 못한 채 올바르게 작동하는 JavaScript 코드를 실행하더라도 여전히 작동합니다.

유형

TypeScript에서는 명령문이 참인지 거짓인지를 결정하기 위해 유형이 추가됩니다.

다음과 같은 코드가 있습니다.

console.log(4 / ());

이 코드는 JavaScript에 구문 문제가 없기 때문에 NaN을 실행하고 인쇄합니다.
그러나 TypeScript는 숫자를 잘못된 배열로 나누는 것으로 간주하고 오류를 생성합니다.

런타임 동작

타입스크립트는 자바스크립트 런타임 속성프로그래밍 언어 TypeScript는 JavaScript 코드의 런타임 속성입니다.
안 돼요 변경 없음. 즉, TypeScript가 코드에서 유형 오류를 감지하더라도 TypeScript가 이동하는 것과 동일한 방식으로 JavaScript 코드를 실행할 수 있습니다.

편집

TypeScript에는 컴파일러가 있습니다.
컴파일러가 TypeScript 코드 검사를 완료하면 유형을 제거하여 JavaScript 코드의 유형이 제거될 수 있습니다.
TypeScript 컴파일을 통해 유형을 제거한다는 것은 TypeScript에서 유추한 유형에 따라 프로그램의 동작이 변경되지 않는다는 것을 의미합니다.

따라서 JavaScript를 배우는 것은 TypeScript를 배우는 데 중요합니다.
구문과 런타임 기능을 갖춘 언어로서 JavaScript에서 배우는 모든 것이 TypeScript를 동시에 배우는 데 도움이 된다고 합니다.

기본 문법

유형 추론

TypeScript는 JavaScript의 언어를 이해하고 대부분의 경우 유형을 생성합니다.

let helloWorld = "Hello World";

TypeScript는 JavaScript 작동 방식을 이해함으로써 위의 코드를 사용하여 유형을 사용하여 유형 시스템을 구축할 수 있습니다.
즉, 코드에서 유형을 지정하기 위해 추가 문자를 사용할 필요가 없는 유형 시스템을 제공합니다.
따라서 위의 예에서 helloWorld는 끈임을 알 수 있는 방법입니다.

유형 정의

Typescript를 사용하면 유형 정의를 통해 JavaScript의 다양한 디자인 패턴을 보다 명시적으로 사용할 수 있습니다.

const user = {
    name: "Hayes",
    id : 0,
};

위의 코드는 이름이 문자열 유형이고 ID가 숫자 유형인 객체를 생성합니다.
이 객체의 유형을 명시적으로 표현하기 위해 인터페이스로 선언합니다.
그 후, 타자기 :이름 입력 구문을 사용하면 JavaScript 개체가 새 인터페이스의 모양을 준수한다고 선언할 수 있습니다.

interface User {
    name: string;
    id: number;
}

const user: User = {
    name: "Hayes",
    id: 0,
};

또한 TypeScript 유형에서 “유형 검사 없음”으로 모든 유형을 사용할 수 있으므로 모든 유형이 허용됩니다.

유형 구성

공용체와 제네릭은 더 크고 복잡한 개체를 만들기 위해 개체를 결합하는 방식과 유사하게 여러 유형을 사용하여 새 유형을 만드는 방법입니다.

노동 조합

공용체는 유형이 여러 유형 중 하나일 수 있음을 선언하는 방법입니다.
예를 들어 부울 유형은 참 또는 거짓으로 설명할 수 있습니다.

type MyBool = true | false;

유니온 타입을 통해 다양한 타입을 다룰 수 있고, C++의 템플릿 개념처럼 배열이나 문자열을 받는 함수를 하나로 표현할 수 있다.

function getLength(obj: string | string()) {
    return obj.length;
}

일반적인

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

제네릭은 다음과 같이 선언할 수 있습니다.
제네릭이 있는 배열은 배열의 값을 설명할 수 있습니다.

타이프 스크립트 만들기

Typescript의 확장자는 .ts입니다.
참조에서는 npm 또는 vscode 확장을 사용하여 typescript를 실행할 것을 권장합니다.
이전에 node.js를 설치했기 때문에 npm을 통해 typescript를 설치했습니다.

npm install -g typescript

그 후 나는 greeter.ts를 생성하고 코드를 작성했습니다.

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

위의 코드를 작성한 후 tsc greeter.ts 를 입력하여 TypeScript 코드를 컴파일하면 js 파일로 변환되어 greeter.js 가 나옵니다.

현재로서는 greetinger.ts와 greeter.js 사이에 차이가 없습니다.
타입을 사용하지 않는 자바스크립트 구문을 사용하기 때문입니다.
이 상태에서 인터페이스와 클래스를 추가하고, 타입을 추가하고, 컴파일을 해보자.

// typescript
class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.textContent = greeter(user);


// javascript
var Student = /** @class */ (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

위의 TypeScript 코드가 컴파일된 후 JavaScript 구문으로 변환되고 js 파일이 생성됩니다.
이 단계에서 두 코드의 차이를 느낄 것입니다.

TypeScript 웹 애플리케이션 실행

생성된 Greetinger.js를 표시할 html 파일을 생성합니다.

<!
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typescript Greeter</title>
  </head>
  <body>
    <script src="http://woongtech./m/greeter.js"></script>
  </body>
</html>

그 후 Greetinger.html을 실행하면 다음과 같은 화면이 나타납니다.


브라우저에서 js 파일의 내용이 정상적으로 표시되는지 확인할 수 있습니다.