반응형
TypeScript 설치
TypeScript 도구를 얻는 방법에는 크게 두 가지가 있습니다.- npm을 통해 (Node.js 패키지 관리자)
- TypeScript의 Visual Studio 플러그인 설치
https://www.typescriptlang.org/#download-links
npm 사용자는 터미널에 아래와 같이 입렵하여 설치할 수 있습니다.
> npm install -g typescript
TypeScript 파일 만들기
편집기에서 greeter.ts에 다음 JavaScript 코드를 입력하십시오.function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
컴파일 .ts
자바스크립트 소스코드를 .js가 아닌 .ts 확장자로 저장합니다. 기존 자바 스크립트 앱에서 바로 복사 / 붙여 넣기를 할 수 있습니다.명령 줄에서 TypeScript 컴파일러를 실행합니다.
tsc greeter.ts결과는 입력 한 JavaScript와 동일한 greeter.js 파일이 생성됩니다. 이제 생성된 .js파일은 웹어플리케이션에서 사용할 수 있습니다.
다음과 같이 'person' 함수 파라메터에 string 타입을 지정합니다.
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
Type annotations
TypeScript의 타입은 변수 명 뒤에 :을 지정한 후 타입 명을 명시할 수 있습니다. 위에서 greeter 함수를 단일 string 매개 변수로 호출 할 예정이며, greeter 함수 호출할때 배열을 넣어 호출하게 되면,function greeter(person: string) {다시 컴파일 시도시 에러가 발생합니다.
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.오류가 있었지만 greeter.js 파일은 생성 되며, 코드에 오류가 있어도 TypeScript를 사용할 수 있습니다. 그러나이 경우 TypeScript는 코드가 예상대로 실행되지 않을 것이라고 경고합니다.
인터페이스(Interfaces)
firstName 및 lastName 필드가있는 객체를 설명하는 Person 이라는 인터페이스를 사용해 보겠습니다. TypeScript에서는 두 가지 유형이 내부 구조가 호환되면 호환됩니다. 이것은 우리가 명시 적으로 implements 절없이 인터페이스가 요구하는 모양을 가짐으로써 인터페이스를 구현할 수 있게 해줍니다.interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
클래스(Classes)
마지막으로 클래스를 사용하여 예제를 확장해 보겠습니다. TypeScript는 클래스 기반 객체 지향 프로그래밍과 같은 JavaScript의 새로운 기능을 지원합니다.여기에서는 생성자와 몇 개의 공개 입력란을 사용하여 Student 클래스를 만듭니다. 클래스와 인터페이스가 잘 작동하여 프로그래머가 올바른 수준의 추상화를 결정할 수 있습니다.
또한 주목할 것은 생성자에 대한 public 인수를 사용하면, 이 이름을 사용하여 클래스의 속성을 자동으로 만들 수 있습니다.
class Student {tsc greeter.ts를 다시 실행하면 생성 된 JavaScript가 이전 코드와 동일하다는 것을 알 수 있습니다. TypeScript의 클래스는 JavaScript에서 자주 사용되는 것과 동일한 프로토 타입 기반의 약어입니다.
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.innerHTML = greeter(user);
Typescript 앱 실행하기
greeter.html에 다음을 입력하십시오.<!DOCTYPE html>브라우저에서 greeter.html을 열어 첫 번째 간단한 TypeScript 웹 응용 프로그램을 실행하십시오!
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
실행결과를 좀더 간편하게 확인하기 위해 여기 서는 Typescript playground에서 실행시켜 보도록 하겠습니다.
https://www.typescriptlang.org/play/
좌측에 위에 작성된 Typescript 코드를 입력하면 우측에 Javascript로 자동 변화되며 Run버튼을 클릭하면 실행결과를 확인 할수 있습니다.
'Programming > Angular' 카테고리의 다른 글
| ionic 하이브리드 앱 개발 - #3 TypeSCript 기초 (0) | 2020.04.20 |
|---|---|
| ionic 하이브리드 앱 개발 - #2 ionic 시작하기 (0) | 2020.04.20 |
| ionic API 호출하기 (0) | 2020.04.17 |
| ionic 데이터로 작업하기 : Service 와 Nav Params (0) | 2020.04.17 |
| Ionic 3 – Lazy loading & Page navigation (0) | 2020.04.17 |