이 포스팅은 타입스크립트 handbook Typescript Tooling in 5 minutes를 정리한 포스팅이다.
타입스크립트를 부분부분 사용은 하였지만 제대로 공부한 적은 없어서, 이제 공식문서를 보며 제대로 정리하며 공부해 볼 생각이다.
https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
Documentation - TypeScript Tooling in 5 minutes
A tutorial to understand how to create a small website with TypeScript
www.typescriptlang.org
위 링크에도 잘 정리가 되어있다.
따라하면서 연습해보자
1. 타입스크립트를 설치해 보자
타입스크립트를 사용할 수 있는 방법에는 두 가지가 존재한다.
- npm 사용(Node.js 패키지 매니저)
- Visual Studio Typesciprt 플러그인 설치
나는 npm 으로 설치를 하겠다.
Node.js 설치 방법은 이전 포스팅에도 포스팅을 하였다. 설치가 궁금하다면 해당 링크로 이동하면 된다.
2022.10.13 - [개발/개발지식] - [환경설정] Node.js, npm 설치하기
[환경설정] Node.js, npm 설치하기
Node.js 및 npm 설치하기 포스팅이나 개발을 하다 보면 항상 나오는 node.js와 npm의 설치 방법을 다루려고 한다. Node.js Node.js 공식홈페이지 메인화면에서는 Node.js를 다음과 같이 설명한다. Node.js®는 C
ijw9209.tistory.com
위의 Node.js 설치가 완료 되어있는 상태라면, 자신이 사용할 디렉터리를 만들고 다음과 같은 명령어를 입력하여 타입스크립트를 설치한다.
npm install -g typescript
입력하면 사진과 같이 설치가 완료된다.
나는 VScode를 사용하여, 개발을 진행하겠다.
Vscode는 아래 링크에서 다운 받을 수 있다.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2. Typescript 파일 생성
자신이 생성한 폴더에서 greeter.ts 파일을 생성하고 다음과 같이 작성한다.
//greeter.ts
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);
3. 코드 컴파일 하기
위의 greeter.ts 의 작성이 끝나면 vsCode의 Ctrl + ` 을 눌러 터미널을 키고 다음과 같은 명령어로 코드를 컴파일한다.
tsc greeter.ts
기존에 생성한 greeter.ts 파일은 ts로 작성하였지만 아직 타입스크립트가 들어가지 않은 자바스크립트 코드이다.
이 코드는 자바스크립트 코드에 바로 넣을 수 있으며 위의 명령어를 실행하면 똑같은 내용의 greeter.js 파일이 생성된다.
4. Typescript 기능 사용해보기
Type
greeter.ts 파일의 매개변수의 (person : string ) 타입을 명시 해보자
//greeter.ts
//매개변수의 타입을 :string 형태로 명시 할 수 있다.
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);user 에는 "Jane User"라는 string 타입의 문자열이 들어가 있으므로 매개변수를 :string 타입으로 표기하여 타입을 지정해준다.
만약 user라는 변수에 다음 사진과 같이 숫자(number) 형태가 들어가고 매개변수는 string 타입으로 받는다면 오류를 내보내게 된다. ts(숫자)라고 쓰이면 타입스크립트 관련된 오류라고 볼 수 있다.
하지만 이런 오류가 있음에도 불구하고 컴파일되어, greeter.js파일은 생성된다. 코드의 오류가 있어도 컴파일은 가능하지만 , TypeScript는 코드가 예상대로 실행되지 않는다고 경고한다.
5. 인터페이스 작성하기
greeter.ts를 interface를 사용하여 다음과 같이 변경해보자
//greeter.ts
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);Person이라는 interface를 만들어 firstName과 lastName의 타입을 string으로 지정한다.
greeter함수의 매개변수에는 방금 선언한 interface Person을 타입으로 받아들인다.
이는 인터페이스를 사용할 때 보통 implements를 사용하지만 implements를 사용하지 않아도 인터페이스를 구현할 수 있다.
6. 클래스 작성하기
타입스크립트는 클래스를 사용하여 작성할 수도 있다.
greeter.ts를 다음과 같이 작성해보자.
//greeter.ts
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 = { firstName : "Jane" , lastName : "User"};
document.body.textContent = greeter(user);
타입스크립트에 class를 사용한 예제이다. 타입스크립트는 클래스 기반 객체 지향 프로그래밍 지원을 해준다.
Student 클래스를 생성하고, 생성자를 생성할 수도 있다.
tsc greeter.ts 명령을 사용하여 컴파일해보면 아래와 같이 코드가 .js 로 변환되어 나오는 것을 확인할 수 있다.
//greeter.js
var Student = /** @class */ (function () {
function Student(firstName, middleInitial, lastName) {
this.firstName = firstName;
this.middleInitial = middleInitial;
this.lastName = lastName;
this.fullName = firstName + " " + middleInitial + lastName;
}
return Student;
}());
function greeter(person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M. ", "User");
document.body.textContent = greeter(user);
7. Typescript 웹 앱 실행하기
greeter.html 파일을 만들고 다음과 같이 입력한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>TYPESCRIPT Greeter</title>
</head>
<body>
<script src="greeter.js"></script>
</body>
</html>
브라우저에서 greeter.html 을 열어야 한다.
아래 이미지에서 마우스가 올려진 확장 부분을 클릭하여 Live Server라고 검색하여 다운로드한다.
나는 이미 설치가 되어있어 설치 버튼이 없지만, 설치 버튼을 클릭하고 vsCode를 재실행한다.
아래 이미지처럼 재실행 후 하단에 Go Live를 클릭하던가, 아니면 greeter.html 우클릭 > Open with Live Server를 클릭하면 된다.
실행화면
다음과 같이 실행 화면을 볼 수 있다.
첫 Typescirpt 웹 애플리케이션이다.
React에서 Typescirpt 예제만 가져와서 정확한 사용법과 내용을 이해하지 못하고 사용하다 보니 어려움이 많다.
기본으로 돌아가서 공식문서를 정리해가면서 익혀야겠다.
'개발 > Typescript' 카테고리의 다른 글
| [Typescirpt] Typescirpt + react + webpack 설정하기 (0) | 2022.10.20 |
|---|
댓글