본문 바로가기

전체 글111

Typescript | 제네릭, 타입 변수 응용, map, forEach 메서드 타입 정의 제네릭함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 타입스크립트의 기능 중 하나제네릭이 필요한 상황다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수가 하나 필요하다고 가정function func(value: any) { return value;}let num = func(10);// any 타입let str = func("string");// any 타입다양한 타입의 매개변수를 제공받아야 하기 때문에 매개변수 value의 타입을 일단 any 타입으로 지정한다.이 함수는 인수로 전달한 값을 그냥 그대로 반환하는 단순한 함수이다.따라서 변수 num에는 10이 저장되고 변수 str에는 “string”이 저장된다.그런데 현재 num과 str의 타입은 .. 2024. 11. 3.
Typescript | 클래스, 접근 제어자, 인터페이스와 클래스 TS 의 클래스타입스크립트에서는 클래스의 필드를 선언할 때 타입 주석으로 타입을 함께 정의해주어야 한다.그렇지 않으면 함수 매개변수와 동일하게 암시적 any 타입으로 추론되는데 엄격한 타입 검사 모드(strict 옵션이 true로 설정되어 있을 경우)일 때에는 오류가 발생하게 된다.추가로 생성자에서 각 필드의 값을 초기화 하지 않을 경우 초기값도 함께 명시해주어야 한다.class Employee { // 필드 name: string = ""; age: number = 0; position: string = ""; // 메서드 work() { console.log("일함"); }}만약 다음과 같이 생성자 함수에서 필드의 값들을 잘 초기화 해 준다면 필드 선언시의 초기값은 생략해도 된다.c.. 2024. 11. 2.
Typescript | 인터페이스, 확장, 선언 합치기 인터페이스인터페이스란 타입 별칭과 동일하게 타입에 이름을 지어주는 또다른 문법//간단한 Person 객체의 타입을 정의한다면 다음과 같이 할 수 있다interface Person { name: string; age: number;}//이렇게 정의한 인터페이스를 타입 주석과 함께 사용해 변수의 타입을 정의할 수 있다const person: Person = { name: "이재민", age : 30};인터페이스는 타입 별칭과 문법만 조금 다를 뿐 기본적인 기능은 거의 같다고 볼 수 있다.선택적 프로퍼티인터페이스에서도 동일한 방법으로 선택적 프로퍼티 설정이 가능함interface Person { name: string; age?: number;}const person: Person = { name.. 2024. 11. 2.
Typescript | 함수 오버로딩, 사용자 정의 타입가드 함수 오버로딩오버로딩이란 하나의 함수의 매개변수의 개수나 타입에 따라 다르게 동작하도록 만드는 문법/** * 함수 오버로딩 * 같은 함수를 매개변수의 개수나 타입에 따라 * 여러가지 버전으로 만드는 문법 * -> 하나의 함수 func * -> 일단 모든 매개변수는 넘버타입 * -> Ver1. 매개변수가 1개일 때에는 매개변수에 20을 곱한 값을 출력 * -> Ver2. 매개변수가 3개일 때에는 모든 매개변수를 더한 값을 출력 */타입스크립트에서 함수 오버로딩을 구현하려면 먼저 다음과 같이 버전별 오버로드 시그니쳐를 만들어 줘야 한다.// 버전들 -> 오버로드 시그니쳐function func(a: number): void;function func(a: number, b: number, c: number):.. 2024. 11. 2.
Typescript | 함수 타입, 함수 타입 표현식과 호출 시그니처, 호환성 함수 타입함수의 타입을 정의하는 방법다음과 같은 자바스크립트 함수가 있을 때, 이 함수를 다른 사람에게 설명하는 가장 좋은 방법은이 함수가 어떤 매개변수를 받고 어떤 값을 반환 하는지 이야기 하는 것 이다.// 함수를 설명하는 가장 좋은 방법// 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 설명function func(a, b) { return a + b;}TS 에서 함수 정의하는 방법// 매개변수의 타입과 반환 값의 타입을 넣어주면 된다.// 함수의 반환 값은 자동으로 추론되어 생략이 가능하다.function func(a: number, b: number): number { return a + b;}화살표 함수 타입 정의 방법const add = (a: number, b: number): num.. 2024. 11. 2.
Typescript | 타입 추론, 타입 단언, 타입 좁히기, 서로소 유니온 타입 타입추론TS는 타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론한다.이런 기능을 타입 추론 이라고 한다.let a = 10;// number 타입으로 추론 그러나 모든 상황에 타입을 추론하진 않는다.예를 들어 함수의 매개변수 타입은 자동으로 추론할 수 없다.function func(param){ // 오류}이런 경우 암시적으로 any 타입이 추론된다.그러나 엄격한 타입 검사모드 ( tsconfig.json - strict 옵션 true ) 에서는 암시적 any 타입의 추론을 오류로 판단.타입 추론이 가능한 상황1. 변수선언일반적인 변수 선언의 경우 초기값을 기준으로 타입추론이 가능let a = 10;// number 타입으로 추론let b = "hello";// string 타입으로 추론let c .. 2024. 10. 29.

티스토리툴바