에디터 선택
- VS Code / Atom
Node.js 설치
Typescript 설치
npm install -g typescriptts 확장자를 가진 파일 생성 후 코드 입력
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);- 위 코드는 ts 확장자 파일이지만 코드는 javascript와 동일하다.
- typescript는 javascript를 상위호환 되는 컴파일러의 기능을 제공하는 트랜스컴파일 언어이다.
- javascript를 문법을 그대로 사용 할 수 있다.
- 컴파일러의 기능인 타입체크, 문법에러 확인 등을 제공한다.
- typescript는 javascript를 상위호환 되는 컴파일러의 기능을 제공하는 트랜스컴파일 언어이다.
Typescript 컴파일러를 이용하자
tsc fileName.ts- Typescript 컴파일러는 결과물로 fileName.js 파일을 생성한다.
강타입의 안전한 맛을 맛보자
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);- greeter 함수의 인수 person에 어노테이션 ": string"을 추가하였다.
- 이제 컴파일러는 해당 인수에 string이 아닌 다른 자료형이 입력되면 컴파일 도중 에러를 반환한다.
- 개꿀띠~
- 이제 컴파일러는 해당 인수에 string이 아닌 다른 자료형이 입력되면 컴파일 도중 에러를 반환한다.
어노테이션(annotation)
- 코드에 대한 메타정보
- 주석(comment)은 다른 개발자들을 위한 설명이라면 어노테이션(annotation)은 컴파일러에게 해당 코드를 설명하는 주석이다.
타입 어노테이션
- 어허 어허~ 그러면 타입 어노테이션은 컴파일러에게 타입을 설명해주는 주석이구나~ 데헷 ( 아 ㅅㅂ 내 정신줄 어디 갔어? )
컴파일러가 타입 보고 빽빽 거리는 거 보기
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.textContent = greeter(user);- person 인수에는 string 타입만 올 수 있다고 타입 어노테이션으로 컴파일러에게 일러주었다.
- 근데 배열을 넣어버렸으니, 컴파일러가 많이 화났을만 하다.
- 아주 빽빽 거리다. 빨간글까지 써가면서 말이다. ( 그냥 재미삼이 이렇게 이야기하는 건데, 진지충 없지 ? )
- error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
- 컴파일러가 빽빽거린다. -> 아주 기분이 좋다.
- 아주 빽빽 거리다. 빨간글까지 써가면서 말이다. ( 그냥 재미삼이 이렇게 이야기하는 건데, 진지충 없지 ? )
- 주의! 비록 컴파일러가 에러가 있음을 알려주었지만 fileName.js 파일은 생성됩니다.
인터페이스(Interface)
- 타입스크립트에서는 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.textContent = greeter(user);클래스(Class)
- 타입스크립트는 클래스 기반 객체지향 프로그래밍과 같은 자바스크립트의 새로운 기능을 지원합니다.
- 생성자(constructor)와 공개 필드가 있는 클래스 작성 물론 가능합니다!
- 클래스와 인터페이스는 잘 어울리므로 프로그래머는 올바른 추상화 수준을 결정할 수 있습니다.
- 생성자에 대한 인수에 pubilc을 사용하면해당 이름으로 프로퍼티를 자동으로 만들 수 있는 축약형이 허용됩니다.
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("Wayne", "M.", "Kim");
document.body.textContent = greeter(user);- 타입스크립트의 클래스는 자바스크립트에서 자주 사용되는 프로토타입 기반 객체지향의 축약입니다.
타입스크립트 웹 앱 실행하기
적당한 html 확장자 파일을 만든 후 타입스크립트 컴파일러로 만든 js 파일을 로드하자.
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="fileName.js"></script>
</body>
</html>- 브라우저로 파일을 열자 ( cmd + o ) 또는 따불 클릭
'Javascript > Typescript' 카테고리의 다른 글
| 타입스크립트 튜토리얼 - 리액트 & 웹펙 묶기 (0) | 2020.01.30 |
|---|---|
| 타입스크립트 핸드북 - 클래스 (0) | 2020.01.30 |
| 타입스크립트 핸드북 - 인터페이스 (0) | 2020.01.29 |
| 타입스크립트 핸드북 - 변수선언 (0) | 2020.01.29 |
| 타입스크립트 핸드북 - 기본 자료형 (0) | 2020.01.26 |
_김은찬
두번 다시는 꺾이지 않으리