TypeScript 튜토리얼
TypeScript 시작하기

비고

버전

설치 및 설정

배경

TypeScript는 JavaScript 코드에 직접 컴파일되는 JavaScript의 입력 된 수퍼 세트입니다. TypeScript 파일은 대개 .ts 확장자를 사용합니다. 많은 IDE가 다른 설정이 필요없이 TypeScript를 지원하지만 TypeScript는 명령 행에서 TypeScript Node.JS 패키지로 컴파일 할 수도 있습니다.

십오 일

비주얼 스튜디오

• Visual Studio 2015 에는 TypeScript가 포함되어 있습니다.
• Visual Studio 2013 Update 2 이상에는 TypeScript가 포함되어 있으며 이전 버전 에는 TypeScript를 다운로드 할 수 있습니다.

Visual Studio 코드

• Visual Studio 코드 (vscode)는 TypeScript 용 문맥 자동 완성 및 리팩터링 및 디버깅 도구를 제공합니다. vscode 자체는 TypeScript로 구현됩니다. Mac OS X, Windows 및 Linux에서 사용 가능합니다.

WebStorm

• WebStorm 2016.2 는 TypeScript와 빌트인 컴파일러와 함께 제공됩니다. [Webstorm은 무료가 아닙니다.]

IntelliJ IDEA

• IntelliJ IDEA 2016.2 는 Jetbrains 팀이 유지 관리하는 플러그인을 통해 Typescript 및 컴파일러를 지원합니다. [IntelliJ는 무료가 아닙니다.]

Atom 및 atom-typescript

• Atom 은 atom-typescript 패키지로 TypeScript를 지원합니다.

숭고한 텍스트

• Sublime Text 는 typescript 패키지로 TypeScript를 지원합니다.

명령 행 인터페이스 설치

Node.js 설치

전역으로 npm 패키지 설치

TypeScript를 전역으로 설치하여 모든 디렉토리에서 액세스 할 수 있습니다.

npm install -g typescript

또는

npm 패키지를 로컬에 설치하십시오.

TypeScript를 로컬로 설치하고 package.json에 저장하여 디렉토리로 제한 할 수 있습니다.

npm install typescript --save-dev

설치 채널

다음 위치에서 설치할 수 있습니다.

• 안정된 채널 : npm install typescript
• 베타 채널 : npm install typescript@beta 합니다.
• 데브 채널 : npm install typescript@next

TypeScript 코드 컴파일

tsc 컴파일 명령은 코드를 컴파일하는 데 사용할 수있는 typescript 와 함께 제공됩니다.

tsc my-code.ts

이렇게하면 my-code.js 파일이 만들어집니다.

tsconfig.json을 사용하여 컴파일

tsconfig.json 파일을 통해 코드와 함께 사용되는 컴파일 옵션을 제공 할 수도 있습니다. 새로운 TypeScript 프로젝트를 시작하려면 터미널 창에서 프로젝트의 루트 디렉토리로 cd 하고 tsc --init 실행하십시오. 이 명령은 아래와 같이 최소한의 구성 옵션으로 tsconfig.json 파일을 생성합니다.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

TypeScript 프로젝트의 루트에 tsconfig.json 파일이 있으면 tsc 명령을 사용하여 컴파일을 실행할 수 있습니다.

안녕하세요 세계

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

여기에는 constructor 와 greet 방법을 가진 클래스 인 Greeter 가 있습니다. new 키워드를 사용하여 클래스의 인스턴스를 만들고 greet 메서드가 콘솔에 출력 할 문자열을 전달할 수 있습니다. Greeter 클래스의 인스턴스는 greeter 변수에 저장되어 있습니다. greet 변수는 greet 메소드를 호출하기 greet 사용됩니다.

기본 구문

TypeScript는 JavaScript의 형식화 된 수퍼 집합으로서 모든 JavaScript 코드가 유효한 TypeScript 코드임을 의미합니다. TypeScript는 그 위에 많은 새로운 기능을 추가합니다.

TypeScript는 JavaScript를 C # 및 Java와 유사한 강력한 유형의 객체 지향 언어와 비슷하게 만듭니다. 즉, TypeScript 코드는 대형 프로젝트에서 사용하기 쉽고 코드는 이해하기 쉽고 유지 관리가 쉽습니다. 강력한 입력은 또한 언어가 사전 컴파일 될 수 있고 그 변수가 선언 된 범위를 벗어나는 값을 할당받을 수 없다는 것을 의미합니다. 예를 들어, TypeScript 변수가 숫자로 선언되면 텍스트 값을 할당 할 수 없습니다.

이러한 강력한 타이핑 및 객체 지향성 덕분에 TypeScript는 디버그 및 유지 관리가 쉬워졌으며 표준 JavaScript의 가장 약한 두 가지 요소였습니다.

유형 선언

유형 선언을 변수, 함수 매개 변수 및 함수 반환 유형에 추가 할 수 있습니다. 형식은 다음과 같이 변수 이름 뒤에 콜론 뒤에 쓰여집니다. var num: number = 5; 그러면 컴파일러는 컴파일 및 보고서 유형 오류 중에 가능한 경우 유형을 확인합니다.

var num: number = 5;
num = "this is a string";  // error: Type 'string' is not assignable to type 'number'.

기본 유형은 다음과 같습니다.

• number (정수 및 부동 소수점 숫자)
• string
• boolean
• Array . 배열 요소의 유형을 지정할 수 있습니다. 배열 유형을 정의하는 두 가지 동일한 방법이 있습니다 : Array<T> 및 T[] . 예 :
  • number[] - 숫자 배열
  • Array<string> - 문자열 배열
• 튜플. 튜플은 특정 유형의 요소가 고정 된 수가 있습니다.
  • [boolean, string] - 첫 번째 요소가 부울이고 두 번째 요소가 [boolean, string] 튜플.
  • [number, number, number] - 세 개의 숫자로 이루어진 튜플.
• {} - 객체, 속성 또는 인덱서를 정의 할 수 있습니다.
  • {name: string, age: number} - name 및 age 속성을 가진 객체
  • {[key: string]: number} - 문자열로 색인 된 숫자 사전
• enum - { Red = 0, Blue, Green } - 숫자에 매핑 된 열거 형
• 기능. 매개 변수 및 반환 값의 유형을 지정합니다.
  • (param: number) => string - 하나의 숫자 매개 변수를 취하는 함수로 문자열을 반환합니다.
  • () => number - 숫자를 반환하는 매개 변수가없는 함수.
  • (a: string, b?: boolean) => void - 문자열을 가져 오는 함수이며, 선택적으로 반환 값이없는 부울 값입니다.
• any - 모든 유형을 허용합니다. any 포함 any 표현식은 유형을 검사하지 않습니다.
• void - "nothing"을 나타내며, 함수 반환 값으로 사용할 수 있습니다. null 및 undefined 만이 void 유형의 일부입니다.
• never
  • let foo: never; 유형 경비원의 유형이 절대 사실이 아닙니다.
  • function error(message: string): never { throw new Error(message); } - 절대로 반환하지 않는 함수의 반환 유형입니다.

• null - 값 null 형태 엄격한 널 검사가 사용 가능하지 않는 한, null 은 모든 유형의 내재적 부분입니다.

주조

다음과 같이 꺾쇠 괄호를 통해 명시 적 전송을 수행 할 수 있습니다.

var derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod();

이 예제는 컴파일러가 MyInterface 로 처리하는 derived 클래스를 보여줍니다. 두 번째 줄에 캐스팅을하지 않으면 컴파일러는 someSpecificMethod() 이해하지 못하기 때문에 예외를 throw하지만 <ImplementingClass>derived someSpecificMethod() 통해 캐스팅하면 컴파일러가 무엇을해야하는지 알 수 있습니다.

Typescript에서 캐스팅하는 또 다른 방법은 as 키워드를 사용하는 as .

var derived: MyInterface;
(derived as ImplementingClass).someSpecificMethod();

Typescript 1.6 이후, 기본값은 .jsx 파일에서 <> 이 모호하기 때문에 기본값은 as 키워드를 사용합니다. 이것은 Typescript 공식 문서에 언급되어 있습니다 .

수업

클래스를 정의하고 TypeScript 코드에서 사용할 수 있습니다. 클래스에 대한 자세한 내용은 클래스 설명서 페이지를 참조하십시오 .

Node.js의 TypeScript REPL

Node.js의 TypeScript REPL을 사용하려면 tsun 패키지를 사용할 수 있습니다.

함께 전 세계적으로 설치하십시오.

npm install -g tsun

tsun 명령으로 터미널이나 명령 프롬프트에서 실행하십시오.

사용 예 :

$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl
$ function multiply(x, y) {
..return x * y;
..}
undefined
$ multiply(3, 4)
12

ts-node를 사용하여 TypeScript 실행하기

TS-노드를 사용하여 미리 컴파일 할 필요없이, 사용자가 직접 타이프 스크립트 파일을 실행 할 수있는 NPM 패키지입니다 tsc . 또한 REPL 을 제공합니다.

ts-node를 사용하여 전역 적으로 설치

npm install -g ts-node

ts-node는 typescript 컴파일러를 번들하지 않으므로 설치해야 할 수도 있습니다.

npm install -g typescript

스크립트 실행 중

main.ts 라는 스크립트를 실행하려면 다음을 실행하십시오.

ts-node main.ts

// main.ts
console.log("Hello world");

사용 예

$ ts-node main.ts
Hello world

REPL 실행

REPL 실행 명령 ts-node 를 실행하려면

사용 예

$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2, 2)
4
> .exit

REPL을 종료하려면 .exit 명령을 사용하거나 CTRL+C 두 번 누르 CTRL+C .