TypeScript
-
[TS기초]함수 타입TypeScript 2023. 6. 15. 16:39
목차 1.함수 타입정의하기 2.매개변수 속성 3.함수 오버로딩 1.함수 타입 정의하기 1️⃣함수 선언문 const func(a:number,b:number){ return a+b; //리턴값을 자동으로 추론 } 2️⃣화살표 함수 const add = (a:number,b:number):number =>a+b; //마찬가지로 리턴값을 자동으로 추론하기 때문에 아래와 같이 작성 가능 const add = (a:number,b:number)=>a+b; 3️⃣타입 별칭 -함수 타입 표현식(Function Type Expression) 함수를 타입으로 정의해서 사용한다. 화살표 함수와 문법적으로 유사하다. type Operation = (a:number,b:number) => number; const add: O..
-
[TS기초]객체 타입TypeScript 2023. 6. 15. 10:53
목차 1.객체 타입 정의하기 객체 리터럴 인터페이스 타입별칭 클래스 2.객체 프로퍼티 옵션 인덱스 시그니처 옵셔널 프로퍼티 읽기 전용 프로퍼티 1.객체 타입을 지정하는 여러가지 방법 1️⃣객체 리터럴 타입 :단일로 사용되는 작은 객체를 선언할 때 사용 let user:{ id:string; name:string; } = { id:"아이디", name:"이름", } 2️⃣인터페이스 :재사용 가능한 타입 정의를 위해 주로 사용된다. type User ={ id:string; name:string; } const user:User = { id:"아이디", name:"이름", } 3️⃣타입 별칭 type User ={ id:string; name:string; } const user:User = { id:"아이..
-
[TS기초]기본 타입TypeScript 2023. 6. 13. 20:35
기본타입 기본 타입이란 타입스크립트가 제공하는 기본 내장타입을 말한다. JavaScript의 슈퍼셋 언어인 TypeScript는 JS의 거의 동일한 데이터 타입을 지원하며, 이외에 추가적인 타입을 제공한다. 그 중 기본타입에 대한 내용들을 정리한다. 목차 1.원시타입과 리터럴 타입 2.배열과 튜플 3.Enum타입 4.any타입과 unknown타입 5.void타입과 never타입 1.원시타입과 리터럴 타입 ✨원시 타입(Primitive Type) 하나의 값만 저장할 수 있는 타입. number , string , boolean , null , undefined 등의 속성이 존재한다. let str:string = "문자열"; let num:number = 1; let bool:boolean = true; ..
-
대수 타입TypeScript 2023. 6. 11. 21:34
1.대수 타입(Algebraic Types)이란? 대수 타입이란 여러 타입을 조합하여 새로운 타입을 만들 수 있는 기능을 말한다. 종류로는 유니온 타입(Union Types),인터섹션 타입(Intersection Types)이 있다. 타입을 집합으로 생각할 때, 집합 간의 연산을 표현하는 방식으로 이해할 수 있다. 유니온 타입은 합집합에 해당하고 인터섹션 타입은 교집합에 해당한다. 1️⃣인터섹션 타입-교집합 인터섹션 타입은 &을 이용해서 교집합 타입을 만든다. 이러한 교집합 타입은 객체타입에서 많이 사용된다. 일반 원시값으로 사용하면 서로 교집합 하는 부분이 없기 때문에 never를 반환하게 된다. 👉🏻원시 타입 let variable : number & string 👉🏻객체 타입 Type Dog = {..
-
[Generic]제네릭 함수TypeScript 2023. 6. 6. 15:24
제네릭은 C#,JAVA같은 언어에서 재사용 가능한 컴포넌트를 생성하는 도구로 사용된다. Generic은 타입의 generalize(일반화)하는 방법을 제공한다. 타입스크립트에서도 이 제네릭을 사용하여 다양한 타입을 갖는 함수,클래스,인터페이스 등을 만들 수 있다. 모든 타입을 받을 수 있는 any타입과 비교하여 제네릭을 사용해야하는 이유를 알아보려고한다. 제네릭 함수 만들기 function identify(arg:number):number{ return arg; } function identify(arg:any):any{ return arg; } 이렇게 number와 any타입을 반환하는 함수가 있다. any타입은 어떤 타입이든 받을 수 있지만 함수가 반환할 때 어떤 타입인지 정보를 잃게된다. 어떤 타입..
-
Type Casting(타입 형변환)TypeScript 2023. 6. 5. 17:54
타입 캐스팅은 크게 두 가지 상황에서 사용된다. 1️⃣정확한 타입 추론 타입스크립트가 값의 타입을 추론하지 못할 때 명시적으로 타입을 지정하여 컴파일러에게 알려준다. 2️⃣타입 변환 특정 타입의 기능과 속성을 사용하려고 할 때 사용할 수 있다. 즉, 타입스크립트에서 컴파일러가 직접 감지하지 못하는 특정 타입의 값을 타입스크립트에게 알려주는 역할을 한다. 예를들어 DOM에 있는 HTML요소를 조작한다고 가정해보자. // //app.ts const htmlElement = document.querySelector('p'); htmlElement는 HTML요소나 null로 추론하고 있다.HTML요소를 사용해서 텍스트 내용에 접근하거나, 다른 DOM을 조작하는 작업도 할 수 있겠지만, input의 value값을..
-
인터프리터 언어, 컴파일 언어TypeScript 2023. 5. 29. 19:54
인터프리터 언어와 컴파일 언어는 실행방식에 관련된 개념 동적 언어와 정적 언어는 변수의 타입 시스템과 관련된 개념 1.인터프리터 언어 소스코드를 한 줄씩 읽고 해석하여 동시에 실행하는 프로그래밍 언어이다. 소스코드는 인터프리터에 의해 바로 실행되며, 별도의 컴파일 단계가 없다. Python,JavaScript,Ruby,PHP 등 특징 😇컴파일 과정이 없으므로 간단하고 빠른 개발과 디버깅이 가능하다. 💀소스 코드가 직접 실행되기 때문에 코드의 보안이 취약할 수 있다. 💀한 줄씩 해석하고 실행하므로 컴파일 언어에 비해 실행 속도가 느릴 수 있다. 동적 타입 언어의 특징 변수의 타입이 런타임에 결정된다. 변수를 선언할 때 타입을 명시적으로 선언하지 않고 할당되는 값에 따라 동적으로 타입이 결정된다. 변수의 타..