.jpg)
TypeScript 기본기 다지기
Table of Content
1. TypeScript의 기본 사항
새로운 폴더 (metaverse/greeter/src/basic)
•
basic.ts 생성
const message = "Hello!"
// Accessing the property 'toLowerCase'
// on 'message' and then calling it
message.toLowerCase();
// Calling 'message'
message();
TypeScript
복사
•
message는 string 타입의 변수이다.
•
.toLowerCase(); 를 통해 소문자로 변환 될 것이다.
•
message(); 를 통해 변수를 호출 할 수 있는가?
•
컴파일하여 .js 파일을 생성 후 실행
npx tsc basic.ts
Shell
복사
node basic.js
Shell
복사
•
message는 함수가 아니기 때문에 저런 방식으로 호출 할 수 없다.
◦
이런 실수를 미리 방지하는 것이 중요하다.
•
TypeError가 의미하는 것
◦
basic.js의 오류가 없는 모습, 결국 실행해야 오류가 나타나는 모습은
▪
JavaScript 런타임은 코드가 실행 될 때 자신이 무엇을 해야 할 지 결정하기 위해 값의 타입 뿐만 아니라 어떤 동작, 능력, 필드를 가지고 있는지 확인함
◦
basic.ts처럼 타입스크립트에선 이미 오류 상태를 파악 할 수 있음
•
결론적으로, TypeScript는 변수의 타입뿐만 아니라, 해당 변수의 메서드와 속성에 대한 정보도 파악하여, 코드 작성 시점에 오류를 미리 감지
◦
이는 개발자가 더 안전하고 오류 없는 코드를 작성하는 데 도움을 줌
2. TypeScript 다양한 서포트
오타 발견
•
basic.js에 아래 코드 스니펫을 직접 작성하지 않고 복사+붙여넣기 해보자.
const announcement = "Hello World!";
// How quickly can you spot the typos?
announcement.toLocaleLowercase();
announcement.toLocalLowerCase();
// We probably meant to write this...
announcement.toLocaleLowerCase();
TypeScript
복사
•
무엇이 틀린 것인지, 맞는 것인지 파악이 쉽지 않지만, 특별한 오류로 보이지 않는다.
•
basic.ts로 코드를 이동시켜보자.
•
어떤것이 틀렸는지, 가장 근접한 이것을 잘못쓴 것인지에 대한 툴팁을 제공해주는 서포트를 받을 수 있다.
•
IDE의 기능제공이 더하여 수정 제안을 쉽게 적용 할 수도 있다.
놓친 표현 및 논리 오류
•
마찬가지로 basic.js, basic.ts 돌아가며 문제를 찾아보자.
function flipCoin() {
// Meant to be Math.random()
return Math.random < 0.5;
}
TypeScript
복사
•
아래 코드도 문제를 찾아보자.
const value = Math.random() < 0.5 ? "a" : "b"; // 삼항연산자 true : false
if (value !== "a") {
// ...
} else if (value === "b") {
// Oops, unreachable
}
TypeScript
복사
3. 타입 지정 방식
추론적 타입(Type Inference)
•
타입스크립트가 문맥을 보고 판단
let x = 3;
let x = [0, 1, null];
TypeScript
복사
•
하지만, 아래와 같은 경우엔 zoo라는 변수는 어떻게 예측되는가?
class Animal {}
class Rhino extends Animal {
hasHorn: boolean = true;
}
class Elephant extends Animal {
hasTrunk: boolean = true;
}
class Snake extends Animal {
hasLegs: boolean = false;
}
let zoo = [new Rhino(), new Elephant(), new Snake()];
TypeScript
복사
•
let zoo: Animal[] 로 추론되지 않음
◦
각 클래스의 인스턴스가 배열의 요소가 서로 다른 클래스의 인스턴스이기 때문
•
이럴 땐 명시적으로 타입을 지정해주어야 함
let zoo: Animal[] = [new Rhino(), new Elephant(), new Snake()];
•
타입스크립트는 추론적 타입 지정을 지원하지만, 항상 권장하는 것은 아님
◦
타입 추론은 코드의 간결성을 높이고, 명시적인 타입 선언 없이도 타입 안전성을 제공하는 데 유용
◦
하지만 복잡한 구조나 여러 클래스의 인스턴스가 혼합된 경우, 타입스크립트가 올바르게 추론하지 못할 수 있음
명시적 타입(Explicit Types)
•
개발자가 직접 타입을 지정하는 경우
•
특히 함수의 파라미터(매개변수)는 어떤 값을 미리 넣지 않기 때문에 변수명만 기록하는 경우가 많다.
// This is an industrial-grade general-purpose greeter function:
function greet(person, date) {
console.log(`Hello ${person}, today is ${date}!`);
}
greet("Brendan");
TypeScript
복사
•
직접 써주지 않으면 타입스크립트도 파라미터의 타입을 결정 할 수 없음
•
그래서 개발자는 직접 타입을 써주게 되고 이렇게 타입을 직접 붙이는 방식을 명시적 타입이라 함
•
그럼에도 불구하고 아래처럼 타입을 보고 작성했지만 되지 않는 경우도 있다.
function greet(person: string, date: Date) {
console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", Date());
TypeScript
복사
•
Date()은 javascript에서 string인 것을 볼 수 있다.
•
이처럼 생각보다 많은 실수가 발생 할 수 있고, JavaScript에서는 찾기 어려운 오류지만, TypeScript에선 타입검사기를 통해 명확한 오류를 찾아낼 수 있다.
Related Posts
Search
