TypeScript 설치
TypeScript 도구를 얻는 방법에는 크게 두 가지가 있습니다.
- npm을 통해 (Node.js 패키지 관리자)
- TypeScript의 Visual Studio 플러그인 설치
Visual Studio 2017 및 Visual Studio 2015 Update 3에는 기본적으로 TypeScript가 포함되어 있습니다. Visual Studio와 함께 TypeScript를 설치하지 않았다면 다운로드 할 수 있습니다.
NPM 사용자의 경우 :
npm install -g typescript
첫 번째 TypeScript 파일 만들기
편집기에서 다음 JavaScript 코드를 입력하십시오 greeter.ts.
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
코드 컴파일하기
.ts확장 기능을 사용 했지만, 이 코드는 자바스크립트입니다. 기존 자바 스크립트 앱에서 바로 복사/붙여 넣기를 할 수 있습니다.
명령 줄에서 TypeScript 컴파일러를 실행합니다.
tsc greeter.ts
실행 결과인 greeter.js 파일은 동일한 코드를 가지고 있습니다. 우리는 JavaScript 응용 프로그램에서 TypeScript를 사용하여 실행하고 있습니다!
이제 TypeScript가 제공하는 새로운 도구를 활용할 수 있습니다. 다음 : string과 같이 ‘person’함수 인수에 유형 주석을 추가 하십시오.
function greeter(person: string) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
주석 입력
TypeScript의 형식 주석은 함수 또는 변수의 의도 된 계약을 기록하는 간단한 방법입니다. 이 경우 greeter 함수를 단일 문자열 매개 변수로 호출 할 예정입니다. 대신 콜 그리터를 변경하여 배열을 전달할 수 있습니다.
function greeter(person: string) {
return "Hello, " + person;
}
var user = [0, 1, 2];
document.body.innerHTML = greeter(user);
다시 컴파일하면 오류가 표시됩니다.
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
마찬가지로 greeter 호출에 대한 모든 인수를 제거하십시오. TypeScript는 예상치 못한 수의 매개 변수로이 함수를 호출했다는 것을 알려줍니다. 두 경우 모두 TypeScript는 코드 구조와 사용자가 제공 한 형식 주석을 기반으로 정적 분석을 제공 할 수 있습니다.
에러가 있었지만 greeter.js파일은 여전히 생성됩니다. 코드에 오류가 있어도 TypeScript를 사용할 수 있습니다. 그러나이 경우 TypeScript는 코드가 예상대로 실행되지 않을 것이라고 경고합니다.
인터페이스
우리의 견본을 더 발전 시키자. 여기서는 firstName 및 lastName 필드가있는 객체를 설명하는 인터페이스를 사용합니다. TypeScript에서는 두 가지 유형이 내부 구조가 호환되면 호환됩니다. 이것은 우리가 명시 적 implements절이 없이 인터페이스가 요구하는 모양을 가짐으로써 인터페이스를 구현할 수있게 해줍니다 .
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
수업
마지막으로 클래스를 사용하여 예제를 마지막으로 확장 해 보겠습니다. TypeScript는 클래스 기반 객체 지향 프로그래밍과 같은 JavaScript의 새로운 기능을 지원합니다.
여기 Student에서는 생성자와 몇 개의 공개 필드가 있는 클래스 를 만듭니다 . 클래스와 인터페이스가 잘 작동하여 프로그래머가 올바른 수준의 추상화를 결정할 수 있습니다.
또한 주목할 public것은 생성자 에 on 인수를 사용한다는 것은 그 이름을 가진 속성을 자동으로 만들 수있는 단축형이라는 점입니다.
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;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
재실행 tsc greeter.ts하면 생성 된 JavaScript가 이전 코드와 동일하다는 것을 알 수 있습니다. TypeScript의 클래스는 JavaScript에서 자주 사용되는 것과 동일한 프로토타입 기반 OO의 줄임말입니다.
TypeScript 웹 앱 실행
이제 다음을 입력하십시오 greeter.html.
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
greeter.html첫 번째 간단한 TypeScript 웹 응용 프로그램을 실행하려면 브라우저에서 엽니다 .
옵션 : greeter.tsVisual Studio에서 열거나 코드를 TypeScript 놀이터로 복사하십시오. 식별자 위로 마우스를 가져가면 유형을 볼 수 있습니다. 경우에 따라 이러한 유형이 자동으로 추론됩니다. 마지막 줄을 다시 입력하고 DOM 요소의 유형에 따라 완료 목록 및 매개 변수 도움말을 확인하십시오. greeter 함수에 대한 참조에 커서를 놓고 F12 키를 눌러 해당 정의로 이동하십시오. 기호를 마우스 오른쪽 버튼으로 클릭하고 리팩토링을 사용하여 심볼의 이름을 바꿀 수 있습니다.
제공된 유형 정보는 애플리케이션 규모에서 JavaScript로 작업 할 수있는 도구와 함께 작동합니다. TypeScript에서 가능한 모든 예제는 웹 사이트의 샘플 섹션을 참조하십시오.
추신 : 구글 번역 잘된다. 최고 ㅋㅋㅋ
원문 : https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
