[TS] TypeScript Tooling in 5 minutes

chaevivi·2023년 2월 19일
typescript
0
post-thumbnail

Typescript 설치 (Installing Typescript)

  • 프로젝트에서 TypeScript를 사용하는 방법에는 크게 2가지가 있다.

    • npm 사용 (Node.js 패키지 매니저)

    • Visual Studio에서 플러그인 설치

      Visual Studio 2017과 Visual Studio 2015 업데이트 3은 TypeScript 언어 지원을 기본적으로 포함하지만 TypeScript 컴파일러인 tsc는 포함하지 않는다.

  • npm
    > npm install -g typescript

첫 번째 Typescript 파일 만들기 (Building your first TypeScript file)

  • 편집기의 greeter.ts에 다음 JavaScript 코드를 입력한다.
    function greeter(person) {
	return "Hello, " + person;
}

let user = "Jane User";
document.body.textContent = greeter(user);

코드 컴파일 하기 (Compiling your code)

  • 이 코드는 .ts 확장을 사용하지만, JavaScript 코드이다. 기존 JavaScript 앱에서 바로 복사/붙여넣기를 할 수 있다. 커맨드 라인에서 TypeScript 컴파일러를 실행하라.
    tsc greeter.ts
    결과는 당신이 입력한 것과 동일한 JavaScript를 포함하는 greeter.js 파일일 것이다. 우리는 JavaScript 앱에서 TypeScript를 사용하여 실행하고 있다! 이제 TypeScript에서 제공하는 새로운 도구를 이용할 수 있다. : string 타입 표시를 ‘person’ 함수의 인수에 추가
    function greeter (person: string) {
	return "Hello, " + person;
}

let user = "Jane User";

document.body.textContext = greeter(user);

타입 표시 (Type annotations)

  • TypeScript에서 타입 표시는 함수와 변수의 의도된 계약을 기록하는 좋은 방법이다. 이 상황에서, 우리는 greeter 함수를 하나의 string 파라미터와 함께 호출하도록 의도할 수 있다. 대신 array을 전달하는 greeter를 호출하도록 변경할 수 있다.
    function greeter (person: string) {
	return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);  // error
    다시 컴파일하면, 이러한 에러를 볼 수 있을 것이다.
    error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'
-> 'number[]'(숫자배열) 타입 인수는 'string'(문자열) 타입의 파라미터에 할당할 수 없다.
    비슷하게, greeter을 부를 수 있는 모든 인수를 제거해 보아라. TypeScript는 이 함수가 부른 예상하지 못한 파라미터의 수를 알려줄 것이다. 두 경우, TypeScript는 코드의 구조와 당신이 적은 타입 표시, 둘 모두에 기반을 둔 정적 분석을 제공한다. 에러가 있어도 greeter.js 파일은 여전히 생성된다는 것을 주의해라. 코드에 에러가 있어도 TypeScript를 사용할 수 있다. 하지만 이 경우에는, TypeScript는 코드가 생각한대로 동작하지 않을 수도 있다고 경고할 것이다.

인터페이스 (Interfaces)

  • 샘플 코드를 더 발전시켜 보자. firstName과 lastName 필드를 가진 객체를 설명하는 인터페이스를 사용할 것이다. TypeScript에서는, 내부 구조가 호환 가능하다면 두 개의 타입 또한 호환 가능하다. 이를 통해 명시적으로 구현하는 문장이 없어도, 인터페이스에 필요한 형태만 있으면 인터페이스를 구현할 수 있다.
    interface Person {
	firstName: string;
	lastName: string;
}

function greeter (person: Person) {
	return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.textContext = greeter(user);

클래스 (Classes)

  • 마지막으로, 클래스를 이용해 샘플 코드를 확장시켜 보자. TypeScript는 클래스 기반 객체 지향 프로그래밍을 지원과 같은, JavaScript의 새로운 기능을 지원한다. 생성자와 public 필드로 Student 클래스를 만들어보자. 클래스와 인터페이스가 잘 작동하여, 프로그래머에게 올바른 수준의 추상화를 결정할 수 있도록 한다는 점을 주목해라. 또한, 생성자의 인수로 public을 사용하면 해당 이름으로 속성을 자동으로 만들 수 있다.
    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("Jane", "M.", "User");

document.body.textContent = greeter(user);
    tsc greeter.ts를 다시 실행해 보면 생성된 JavaScript 와 이전의 코드가 똑같다는 것을 알 수 있다. TypeScript에서의 클래스는 JavaScript에서 자주 사용되던 프로토타입 기반 객체 지향의 축약형일 뿐이다.

웹 앱에서 TypeScript 실행하기 (Running your TypeScript web app)

  • 다음의 greeter.html을 입력해 보아라.
    <!DOCTYPE html>
<html>
	<head>
		<title>Typescript Greeter</title>
	</head>
	<body>
		<script src="greeter.js"></script>
	</body>
</html>
    브라우저에서 greeter.html을 열어 간단한 첫 번째 TypeScript 웹 앱을 실행해 보라!
    선택 : Visual Studio에서 greeter.ts를 열거나, TypeScript playground에 코드를 복사해보아라. 식별자 위로 마우스를 올려보면 식별자의 타입을 볼 수 있을 것이다. 경우에 따라 타입이 자동으로 추론되기도 하는 점을 유의하라. 마지막 행을 다시 입력하고, DOM 요소 타입에 기반한 완료 목록과 매개변수 도움말을 확인하라. greeter 함수 참조 위에 커서를 올려놓고, F12 키를 눌러 해당 정의로 이동할 수 있다. 또한, 심벌을 마우스 오른쪽 버튼으로 클릭하고 리팩토링을 사용하여 이름을 바꿀 수 있다.
    제공된 타입 정보는 애플리케이션 규모에서 JavaScript로 작동하는 도구와 함께 작동된다.


출처

(en) https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
(kor) https://typescript-kr.github.io/pages/tutorials/typescript-in-5-minutes.html

profile
chaevivi
직접 만드는 게 좋은 프론트엔드 개발자
이전 포스트

[TS] TS for JS Programmer

다음 포스트

[TS] The Basics

0개의 댓글