Javascript
웹 페이지에서 동적 동작을 수행할 때 쓰는 언어
동일 연산자나 데이터 타입 등에서 여러가지 문제가 있다고 알고 있다.
Typescript
자바스크립트와 다르게 타입스크립트는 정적인 타입 검사를 수행한다.
JS대신 TS를 고른 이유는 다음과 같다.
이전 회사에서 타입 관련 에러가 발생하는걸 보았고,
내가 공부하여 적용할 LangChain이나 LLM 같은 경우도 Pydantic으로 미리 데이터 타입을 설정하고 가는걸 보고 안전성을 위해
데이터 타입을 미리 정해놓는게 좋겠다 싶어서다.
처음 배울 때는 주피터 노트북처럼 즉각적으로 확인하는게 좋은거 같아서 TS playground를 이용했다.
Interface 인터페이스
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 클래스
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);
HTML 문서에서 웹 앱 스크립트 실행
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
References:
https://typescript-kr.github.io/pages/tutorials/typescript-in-5-minutes.html
https://github.com/microsoft/TypeScript-Website
'개발 > Web and Frontend' 카테고리의 다른 글
| LLM 기반 추천 시스템 프론트엔드 (0) | 2025.04.25 |
|---|---|
| Typescript Function (0) | 2025.03.31 |
| Typescript Interface (0) | 2025.03.31 |
| Typescript Data Types (0) | 2025.03.31 |