타입스크립트에서는 클래스의 필드를 선언할 때 타입 주석으로 타입을 함께 정의해야 한다.class Employee { name: string = ""; hp: number = 0; position: string = "";}각 필드에 타입을 명시하고 초기값을 설정했다. 타입스크립트에서는 필드 선언 없이 바로 사용할 수 없으므로 반드시 클래스 본문에 필드를 먼저 정의해야 한다. 초기값 대신 생성자를 통해 필드를 초기화할 수도 있다.class Employee { name: string; hp: number; position: string; constructor(name: string, hp: number, position: string) { this.name = name; this.hp ..

타입 별칭은 동일한 이름으로 중복 선언할 수 없다.// ❌type Person = { name: string;};type Person = { age: number;};이렇게 동일한 이름의 타입 별칭을 선언하면 오류가 발생한다. 반면 인터페이스는 동일한 이름으로 중복 선언이 가능하다.따라서 위 코드에서 선언한 Person 인터페이스들은 합쳐져 다음과 같은 인터페이스가 된다.interface Person { name: string; age: number;}이제 Person타입의 객체를 만들 때는 두 프로퍼티를 모두 포함해야 한다.const person: Person = { name: "고견", age: 100,}; 주의할 점동일한 이름의 프로퍼티를 서로 다른 타입으로 정의하면 충돌이 발생한..

인터페이스 확장이란 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 프로퍼티를 정의하지 않도록 도와주는 문법이다. [TS] 인터페이스인터페이스(Interface)란 타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법으로,상속, 합침 등의 특수한 기능을 제공하기 때문에 객체의 구조를 정의하는 데 특화되어 있다.// 타입 별칭tdevmark.tistory.com interface 타입이름 extends 확장_할_타입이름이렇게 extends 뒤에 확장할 타입의 이름을 정의하면 해당 타입에 정의된 모든 프로퍼티를 다 가지고 오게 된다.interface Animal { name: string; color: string;}interface Dog extends Animal { isBark: bo..

인터페이스(Interface)란 타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법으로,상속, 합침 등의 특수한 기능을 제공하기 때문에 객체의 구조를 정의하는 데 특화되어 있다.// 타입 별칭type A = { a: string; b: number;};// 인터페이스interface A { a: string; b: number;};타입 별칭과 인터페이스는 유사해 보이지만, 인터페이스는 객체 타입을 정의하는 데 더 특화된 기능을 제공한다. 인터페이스의 기본 기능선택적 프로퍼티와 읽기 전용 프로퍼티타입 별칭과 마찬가지로 선택적 프로퍼티와 읽기 전용 프로퍼티를 정의할 수 있다.선택적 프로퍼티프로퍼티에 ?를 붙여 선택적 프로퍼티로 만들면 생략 가능하다.interface Person { name:..

사용자 정의 타입 가드란 참 또는 거짓을 반환하는 함수를 이용해 우리 입맛대로 타입 가드를 만들 수 있도록 도와주는 타입스크립트의 문법이다. type Dog = { name: string; isBark: boolean;};type Cat = { name: string; isScratch: boolean;};type Animal = Dog | Cat;Dog와 Cat 두 개의 타입을 정의하고, 두 타입의 유니온 타입인 Animal 타입을 정의했다. function warning(animal: Animal) { if ("isBark" in animal) { console.log(animal.isBark ? "짖습니다" : "안짖어요"); } else if ("isScratch" in anima..

함수 오버로딩이란 하나의 함수를 매개변수의 개수나 타입에 따라 다르게 동작하도록 만드는 문법으로, 타입스트립트에서는 지원하지만 자바스크립트에서는 지원하지 않는다. 오버로드 시그니처타입스크립트에서 함수 오버로딩을 구현하려면 다음과 같이 버전별 오버로드 시그니처를 만들어야 한다.function func(a: number): void;function func(a: number, b: number, c: number): void;이렇게 구현부 없이 선언부만 만들어둔 함수를 오버로드 시그니처라고 한다. 구현 시그니처그 다음 실제로 함수가 어떻게 실행될 것인지를 정의하는 부분인 구현 시그니처를 만들어야 한다.구현 시그니처의 매개변수는 모든 오버로드 시그니처와 호환되어야 한다. 따라서 b와 c는 선택적 매개변수로 정..

1. 매개변수 타입 정의introduce 함수- name 매개변수는 String 타입이며, "고견"이라는 기본값을 설정- tall 매개변수는 Number 타입이며, 선택적 매개변수function introduce(name, tall) { if (!tall) { console.log(`안녕하세요 ${name}입니다!`); } else { console.log(`안녕하세요 ${name}입니다. 키는 ${tall}입니다`); }}​function introduce(name = "고견", tall?: number) { if (!tall) { console.log(`안녕하세요 ${name}입니다!`); } else { console.log(`안녕하세요 ${name}입니다. 키는 ${..

함수 타입의 호환성이란?함수 타입의 호환성이란 특정 함수 타입을 다른 함수 타입으로 취급해도 괜찮은지 판단하는 것을 의미한다.함수 타입 호환성의 판단 기준기준 1: 반환값 타입이 호환되는가?type A = () => number;type B = () => 10;let a: A = () => 10;let b: B = () => 10;a = b; // ✅b = a; // ❌A의 반환값 타입은 Number, B의 반환값 타입은 Number Literal이다. 변수 a에 b를 할당할 수 있지만, b에 a를 할당할 수는 없다. 반환값 타입은 일반적인 타입 호환성 규칙을 따른다. 슈퍼타입에 서브타입을 할당할 수 있다. 기준 2: 매개변수의 타입이 호환되는가?2-1. 매개변수의 개수가 같을 때type C = (val..

함수 타입 표현식타입별칭을 이용해 함수의 타입을 별도로 정의하는 문법을 함수 타입 표현식이라고 한다. [TS] 타입 별칭과 인덱스 시그니처타입 별칭 (Type Alias)타입 별칭을 이용하면 다음과 같이 변수를 선언하듯 타입을 별도로 정의할 수 있다.type User = { id: number; name: string; nickname: string; mbti: string;}let user1: User = { id: 1, name: "유재석", ndevmark.tistory.comtype Add = (a: number, b: number) => number;const add: Add = (a, b) => a + b;Operation 타입을 정의하고, 이를 add 함수의 타입으로 지정했다. add 함수의..

함수 타입 정의함수의 타입은 매개 변수와 반환값의 타입으로 결정된다.기본 함수 타입function func(a: number, b: number): number { return a + b;}매개변수 a와 b는 number타입이고, 반환값도 number타입이다. 함수의 반환값 타입은 자동으로 추론되기 때문에 다음과 같이 생략해도 된다.function func(a: number, b: number){ return a + b;} 화살표 함수 타입const add = (a: number, b: number): number => a + b;const add = (a: number, b: number) => a + b; 매개변수 타입 정의매개변수 기본값 설정함수의 매개변수에 기본값이 설정되어 있으면 타입이 자..