[TS] 제네릭 / 유틸리티 타입
2022. 7. 6. 05:16
프로그래밍/TypeScript
1. 제네릭 제네릭을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용 할 수 있다. 선언할 때는 타입 파라미터만 적어주고 생성하는 시점에 사용하는 타입을 결정한다. 매개변수의 타입이 바뀌었는데 동일한 함수를 재사용하고 싶다면 함수 오버로드를 사용하거나 유니언 타입을 사용할 수 있다. 다른 타입들도 배열로 만들어서 전달 할 경우 아래와 같아진다. 이럴 때 사용할 수 있는 것이 제네릭이다. 사이의 타입 파라미터 T는 타입을 전달 받아 함수에서 사용할 수 있게 해준다. 함수 호출시 타입을 기입해주지 않아도 타입 스크립트는 전달되는 매개변수를 보고 어떤 타입인지 알고 있다. 혹은 옵션 객체의 모습이 정해져 있다면 아래와 같이 작성할 수 있다. showName 함수는 매개변수를 받아서 그 객체의 na..
[TS] 함수 / 리터럴, 유니온, 교차 타입 / 클래스
2022. 7. 5. 19:57
프로그래밍/TypeScript
· 1. 함수 함수 타입 정의는 다음과 같이 한다. function add(num1: number, num2: number): number { return num1 + num2; } function add(num1: number, num2: number): void { console.log(num1 + num2); } function isAdult(age: number): boolean { return age > 19; } 인터페이스처럼 함수의 매개변수도 옵셔널로 지정할 수 있다. name이 있으면 name을 쓰고 없으면 world를 출력하게 하는 코드다. 하지만 호출할 때 매개변수가 없어서 빨간 줄이 나타났다. name이 없을 때의 코드가 있지만 타입스크립트에서는 보다 명시적으로 알려줘야 한다. 아래와..
[TS] 타입스크립트 사용 이유 / 기본 타입 / 인터페이스
2022. 7. 5. 01:18
프로그래밍/TypeScript
※ 브라우저들은 타입스크립트를 이해하지 못하기 때문에 타입스크립트를 자바스크립트로 변환해서 로드해야 실행 가능 1. 타입스크립트를 사용하는 이유 // 자바스크립트 코드 function add(num1, num2) { console.log(num1 + num2); } add(); add(1); add(1,2); add(3,4,5); add('hello', 'world'); 더보기 NaN NaN 3 7 "helloworld" add(1,2)를 제외하고는 원하는 결과가 나오지 않는다. add()의 경우에는 아무 인수도 전달하지 않았으니까 num1과 num2 모두 undefined가 되었고, undefined끼리 더했으니 NaN이 나온다. 하지만 자바스크립트는 아무런 경고도 주지 않았고, 실수가 분명함에도 심지..