공부방
TypeScript 본문
TypeScript vs JavaScript?
- 타입 체크
- JavaScript는 런타임에 타입 오류를 감지한다. 즉 코드가 실행될 때까지 타입 관련 문제를 알 수 없다.
- 하지만 TypeScript는 컴파일 시 타입 체크를 수행한다. 이는 개발 과정 중에 오류를 미리 발견하고 수정할 수 있게 해, 더 견고한 코드를 작성하도록 돕는다.
- 개발 도구 지원
- JavaScript는 다양한 개발 도구와 통합될 수 있지만, 코드의 복잡성이 높아지면 오류를 찾기 어려워질 수 있다.
- TypeScript는 타입 시스템 덕분에 리팩토링 그리고 오류 감지 기능에 더 좋다.
- 결론 : TypeScript는 JavaScript의 모든 기능을 포함하면서, 정적 타입 체크와 같은 추가적인 기능을 제공. 프로젝트에나 팀 작업을 할 때 특히 TypeScript의 이점이 두드러지며, 코드의 안정성과 유지보수성을 향상시키는데 도움이 된다. JavaScript는 더 빠른 개발과 더 넓은 호환성을 제공한다.
TypeScript에서 인터페이스와 타입의 차이는?
interface
- 인터페이스는 확장이 가능하다. 즉 한 인터페이스에서 다른 인터페이스를 확장하여 새로운 속성을 추가할 수 있다.
- 그리고 인터페이스는 객체 지향 프로그래밍의 개념과 잘 어울린다. 클래스와 함께 사용될 때 인터페이스는 클래스가 특정 메소드를 구현하도록 강제할 수 있다.
type
- 유니온, 튜플, 기본 타입 등 다양한 타입의 조합을 표현할 수 있다.
- 타입 별칭을 사용하여 더 복잡한 타입을 만들 수 있다.
결론 : 인터페이스는 주로 객체의 형태를 정의하거나 클래스와 함께 사용될 때 적합하고 타입은 튜플, 기타 복잡한 타입을 정의할 때 타입 별칭이 유용하다.
예 :
interface
주로 객체의 형태를 정의하거나, 클래스에 특정 메소드나 속성이 포함되도록 강제하는데 사용. 예를 들어 여러 객체가 동일한 구조를 가져야 할 때 인터페이스를 사용할 수 있다.
interface Person {
name: string;
age: number;
greet(phrase: string): void;
}
let user1: Person;
user1 = {
name: "John",
age: 30,
greet(phrase: string) {
console.log(phrase + ' ' + this.name);
}
};
user1.greet("Hi there, I am");
여기서 Person 인터페이스는 'name', 'age', 'greet' 메서드를 갖는 객체를 정의. 이 인터페이스를 사용하면 'Person' 타입의 모든 객체가 이 규칙을 따르도록 할 수 있다.
type
타입은 다양한 타입의 조합을 표현하거나, 복잡한 타입을 정의하는데 사용. 예를 들어, 여러 다른 타입을 결합해 새로운 타입을 만들거나, 함수의 반환 타입을 정의하는데 사용
type Combinable = string | number;
type ConversionDescriptor = 'as-number' | 'as-text';
function combine(
input1: Combinable,
input2: Combinable,
resultConversion: ConversionDescriptor
) {
let result;
if (typeof input1 === 'number' && typeof input2 === 'number' || resultConversion === 'as-number') {
result = +input1 + +input2;
} else {
result = input1.toString() + input2.toString();
}
return result;
}
const combinedAges = combine(30, 26, 'as-number');
const combinedNames = combine("Max", "Anna", 'as-text');
여기서 'Combinable' 타입은 'string' 또는 'number' 타입이 될 수 있고, 'ConversionDescriptor'는 두 개의 문자열 리터럴 타입 중 하나가 될 수 있다. 'combine' 함수는 이러한 타입들을 사용하여 더 유연하고 강력한 기능을 제공한다.
'프로젝트 회고' 카테고리의 다른 글
WebSocket (0) | 2023.12.19 |
---|---|
React (1) | 2023.12.19 |
React의 DOM과 생명주기 (0) | 2023.12.18 |
ES6 (3) | 2023.12.17 |