5분 안에 타자 스크립트를 이해하세요.

Typescript는 2019년 큰 인기를 끌었고 2020년에도 미친 듯이 운행했다.첫 번째 언어는 hit the top 10 in less than 5 years입니다.믿기 어렵다.

종전

2010년입니다.Anders Hejlsberg, 책임진다.NET 프레임워크에서 Javascript에 많은 문제가 발생하기 시작했습니다.그는 마이크로소프트를 위해 일한다.마이크로소프트에서는 모든 사람이 한 가지 일에 동의한다.Javascript는 대형 프로젝트를 위해 설계된 것이 아닙니다.
그러나 Javascript는 여전히 마이크로소프트의 대형 프로젝트에서 사용되고 있다.왜?이유는 간단하다. 브라우저는 자바스크립트만 받아들인다.모든 사람이 그것에 갇혔다.이 문제를 고려하여 마이크로소프트는 Typescript를 연구하기 시작했다.
2012년 10월에는 Typescript의 0.8 버전이 처음으로 공개된다.많은 개발자들이 즉각change their religion.

최초의 타자기 숭배자가 열광적이더라도 타자기의 처음 몇 년은 신중할 것이다.2017년에 Typescript의 도입은 미친 듯이 변했다.몇 년 후, 너는 아마 이미 들은 적이 있을 것이다.

타자 스크립트는 무엇입니까?

Typescript는 마이크로소프트가 개발한 소스 프로그래밍 언어다.더 정확히 말하면, 그것은 자바스크립트의 초집합이다.모든 기존 Javascript 프로그램은 이미 유효한 Typescript 프로그램입니다.다시 말하면, 만약 당신이 자바스크립트 개발자라면, 당신은 진입에 장애가 없을 것이다.
Typescript는 다범식 언어입니다.너는 그렇게 함수식과 대상을 대상으로 프로그래밍을 할 수 있다.내가 말한 것은 자바스크립트의 object-oriented via prototype가 아니라 진정한 대상을 향한 것이다.OOP와 Typescript는 고도로 유형화된 언어라는 사실의 결합이 여기서 가장 중요한 일이다.
자바와 C++ 등 언어의 개발자들로 인해 Typescript가 빠르게 유행하기 시작했다.개발자들은 설명성이 너무 강하기 때문에 자바스크립트를 싫어한다.Typescript는 자바스크립트를 생성하여 브라우저에서 작업을 할 수 있도록 하고 대상을 대상으로 하는 환경을 강하게 유지합니다.그들 중 많은 사람들이 Typescript를 자바스크립트 킬러로 여긴다.

분명히 그렇지 않습니다. 왜냐하면 Typescript는 자바스크립트를 영구적으로 생성하기 때문입니다.Typescript는 코드를 Javascript로만 변환합니다.내가 말한 것은transcompile이지,compile가 아니다. 왜냐하면 it's different그래, 이게 어떻게 된 일인지 좀 보자.

그것은 어떻게 일합니까?

타자 스크립트는 매우 간단하다.이것은 우리 사용자들에게 매우 간단하다.마이크로소프트가 이 일을 한 것은 틀림없이 추태를 부린 것이다.
우선, 당신은 에서 개발을 진행할 것입니다.ts 파일.Typescript는 자바스크립트처럼 보이는데 길을 잃지 않을 거예요.그러나, 당신은 대상과 강한 유형의 환경에 처하게 될 것입니다.
Typescript에는 컴파일러(TSC)가 포함되어 있습니다.바로 이 컴파일러가 Typescript를 기이한 것으로 만들었다.이 컴파일러는 개발 과정에서 Typescript 응용 프로그램을 자바스크립트 응용 프로그램으로 끊임없이 변환합니다.네, 그림 그려요!

알아야 할 중요한 점은 개발된 Typescript 부분은 유형화된'안전'환경으로 버그를 포획하는 데 사용된다는 것이다.전사 후에 우리는 자바스크립트를 사용합니다.실행할 때의 설명 부분이기 때문에 버그의 영향을 받기 쉽습니다.
그러나 우리가 이전에 사용한 Typescript와 같이 우리의 응용 프로그램은 강화되었다.Typescript가 이렇게 성공한 이유이기도 하다.Javascript에서 방대한 코드 라이브러리를 처리하는 더욱 안전한 방법이론이 충분하니 우리 시작합시다.

비밀번호 보여주세요.

나는 네가 신성한 리눅스 발행판에 있다고 가정한다. 이곳의 예는 모두 노드 13에서 실행된다.그것을 설치하는 것부터 시작합시다.우리는 npm를 사용하여 그것을 설치한 후에 설치가 정확한지 검사할 것이다.

npm install -g typescript
tsc --version

우리 일상 속의 한 가지 일부터 시작합시다.간단한 비동기식/대기우리는wait를 통해 비동기 함수를 호출하고 set Timeout과promise로 1초 지연을 시뮬레이션할 것입니다.현재, 우리는 자바스크립트 형식을 사용합니다. 보기에 이렇습니다.
비동기ts

async function displayUser(idUser) {
  try {
    const user = await _getUserData(idUser)

    console.log(user)
  } catch (error) {
    console.log(error)
  }
}

async function _getUserData(id) {
  const user = await new Promise(resolve => setTimeout(() => resolve({ id,  name: 'superToto' }), 1000))

  return user
}

displayUser(1)

전에 말했듯이 모든 Javascript 코드는 유효한 Typescript 코드입니다.그래서 우리는 코드를 바꿀 수 있어야 한다. 그렇지?같은 폴더에서 컴파일러를 실행합시다.

tsc

이것은 비동기적인 것을 생성할 것이다.js 파일, 이렇게 보입니다.

function displayUser(idUser) {
    return __awaiter(this, void 0, void 0, function () {
        var user, error_1;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    _a.trys.push([0, 2, , 3]);
                    return [4 /*yield*/, _getUserData(idUser)];
                case 1:
                    user = _a.sent();
                    console.log(user);
                    return [3 /*break*/, 3\];
                case 2:
                    error_1 = _a.sent();
                    console.log(error_1);
                    return [3 /*break*/, 3];
                case 3: return [2 /*return*/];
            }
        });
    });
}
function _getUserData(id) {
    return __awaiter(this, void 0, void 0, function () {
        var user;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve({ id: id, name: 'superToto' }); }, 1000); })];
                case 1:
                    user = _a.sent();
                    return [2 /*return*/, user];
            }
        });
    });
}

이게 도대체 뭐야?이 빌어먹을 코드들은 어디서 났습니까?아무도 이런 것들과 함께 일하고 싶지 않다.아무도 안 돼!
그러나 사실 우리는 아직 컴파일러를 설정하지 않았다.기본적으로 ES3과 호환되는 Javascript가 필요하다고 가정합니다.매우 오래된 규범async/await가 없을 때그는 1999년처럼 async/Wait를 복제하려고 시도했다!

이런 고통을 피하기 위해서 컴파일러를 설정합니다.이 점을 하려면, 우리는 예전과 같이 문서가 필요하다.tsconfig를 만들어야 합니다.루트 디렉터리의 json 파일입니다.이것이 바로 우리의 배치다.

{
  "compilerOptions": {
    "target": "esnext",
    "watch": true
  }
}

대상: Javascript 컴파일 대상입니다.필요한 ECMAScript 사양을 입력해야 합니다.마지막 규범을 놓기 위해 "esnext"를 사용하십시오.
주의: 이것은 파일이 바뀌면 컴파일러가 코드를 변환한다는 것을 의미합니다.NodeJS가 있는 anodemon와 유사합니다.TSC를 재부팅하면 생성된 코드가 동일하며 컴파일러가 변경 사항을 기다리고 있습니다.
자, 이제 더 높은 예를 보여 드리겠습니다.우리는 자바스크립트가 할 수 없는 일을 해야 한다.대상 환경에서 실제 인터페이스 (Duck 유형 없음), 강한 유형, 그리고 모든 것을 사용합니다.

class Hero {
  constructor(public name: String) {}

  age: Number;
  powers: Array<string>;
}

interface Anonym {
  name: string;
  age: number;
  powers: Array<string>;
}

function displayHeroInfo(anonym: Anonym) {
  const heroInfo = {
    name: anonym.name,
    age: anonym.age,
    powers: anonym.powers
  }

  console.log(heroInfo);
}

const superToto = new Hero("SuperToto");

superToto.age = 25
superToto.powers = ['telekinesis', 'laser']

displayHeroInfo(superToto);

나는 구조 함수를 가진 영웅류를 만들고 있다.구조 함수 매개 변수에서public를 사용하면name 속성을 자동으로 만들 수 있습니다.그리고 Hero 클래스에서 나이 (입력한 숫자) 와 멱 (입력한 문자열 그룹) 을 설명합니다.
그 후에 나는 계약 명칭, 나이, 권한을 구축하는 데 사용할 인터페이스를 만들었다.그리고 내 인터페이스를 매개 변수로 하는 함수마지막으로 코드에서 내 클래스를 호출하여 JSON을 표시합니다.
그리고 효과가 있어요!클래스의 실례화에 이름을 넣거나 클래스의 속성을 삭제하지 말고 나이 문자열을 전달해 보십시오.Typescript가 비명을 지르며 Javascript로 변환할 수 없습니다.

후기

우리는 이미 5분 넘게 이야기했다.지긋지긋해.너는 여기서 더 많은 예시 코드를 찾을 수 있다.나는 이 기술이 대형 프로젝트에 매우 적합하다는 것을 발견했다.개발 중에 이런 보호층이 있다는 것은 안심할 수 있는 것이다.내가 직접 해보고 싶게 해줬으면 좋겠어!