타입 표기하기
- TypeScript는 코드의 구조와 타입 표기에 기반해서 정적 분석을 제공한다!
- 오류가 존재하긴 해도 컴파일 하면 js 파일이 만들어지긴 한다! 하지만 예상대로 작동하지는 않는다~
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2]; //타입 오류!
document.body.textContent = greeter(user);인터페이스
- 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.textContent = greeter(user);클래스
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);- TS는 JS 의 새로운 기능을 지원한다.
- 생성자의 인수에
public을 사용하는 것은 그 인수의 이름으로 프로퍼티를 자동으로 생성하는 축약형이다!!
TS를 Html에 실행시키기
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script> //ts 아니고 js!!
</body>
</html>- 간단하다...! ts 파일 대신에 js 파일을 스크립트에 넣으면 된다!
컴파일링 하면 js 파일이 만들어진다 참고
느리지만 꾸준한 프론트엔드 주니어 개발자 🐢