공부/TypeScript
-
[TypeScript] Generic 이란?공부/TypeScript 2024. 4. 7. 17:33
1.정의 Generic : TypeScript의 기능으로 함수, 클래스 ,인터페이스 등을 작성할 때 타입을 파리미터화 할 수 있는 기능 즉, 파라미터로 타입을 입력 가능하다. 2.예시 //예시 1. array type을 확인하면 unknown타입으로 지정된 것을 확인 가능 function example(x: unknown[]) { return x[0]; } let array = example([4,2]) console.log(array) //예시 1. 오류 발생 예제 console.log(a + 1) //array는 사람이 보기에는 분명 숫자가 맞지만 타입은 unknown이기에 연산에 에러가 발생한다. 위 예제를 보면 입력되는 array의 Type은 unknown으로 지정되있는 것을 확인할 수 있다. 즉..
-
[TypeScript] import / export 문법 및 namespace공부/TypeScript 2024. 4. 3. 23:19
다른 파일에 정의한 데이터, 타입 등을 가져올 때 TypeScript 1.5버전 이전에는 namespace 문법을 사용해왔지만 TypeScript 1.5버전 이상에서는 JavaScript에서 제공하는 import / export 문법을 그대로 사용가능하다. 그래서 import / export 문법을 사용해서 다른 ts파일에 타입 변수를 정의하고 사용도 가능하다. 사용방법 1. 타입 변수를 정의할 ts 파일 생성 (예 : a.ts) 2. 전달할 변수에 export 선언 3. 전달받을 ts파일에서 import로 선언 ( 예 : import {변수명} from 파일경로 ) //data.ts export type Name = string; export type Price = number; export type ..
-
[TypeScript] Public, Protected , Private 란?공부/TypeScript 2024. 3. 28. 16:30
Java를 배운 사람이라면 친숙한 녀석들이다. 클래스 기반 객체지향 언어에서 지원하는 접근 제한자(Access modifier)를 뜻 한다. 기본적으로 따로 명시하지 않으면 TypeScript에서는 그동안 Public으로 지정됐을 것이다. 1. 정의 Public : TypeScript Class 기본 접근 제한자, 선언 시 해당 멤버는 해당 Class 내부/외부에서 모두 접근이 가능하다. Private : 선언 시 해당 멤버는 해당 Class "내부"에서만 접근이 가능하다. (외부 접근 불가) Protected : 선언 시 해당 멤버에 대한 접근을 Class 내부 및 상속한 하위(자식)클래스에서만 접근허용 static : ES6 클래스에서 Static Method를 의미한다. Static 멤버는 클래스 ..
-
[TypeScript] Rest / Spread / Destructuring 문법공부/TypeScript 2024. 3. 24. 02:54
Rest 파라미터를 배열의 형태로 받아서 사용하는 문법 함수의 파라미터 값을 합쳐서 하나의 배열로 만들어 준다. 함수에 아직 몇개의 파라미터가 들어올지 모를 때 사용하면 유용하다. ...a 처럼 함수의 파라미터에 대입하면된다. function Rest_Array(...a :number[]){ return a; //[1,2,3,4,5]로 반환 } Rest_Array(1,2,3,4,5); Spread operator 특정 배열 혹은 객체 값을 복제하는 문법으로 주로 배열을 풀어서 인자로 전달 또는 배열을 풀어서 이용할 때 사용한다. Rest와 동일하게 ...을 사용하지만 두 문법의 차이점은 Spread는 기존 배열을 해체하고 Rest는 개별요소를 배열 형태로 만들어준다. let arr = [3,4,5]; l..
-
[TypeScript] Interface 란?공부/TypeScript 2024. 3. 22. 14:41
Interface Ineterface는 상호 간에 정의한 약속(규칙)을 의미한다. 즉, 클래스 또는 함수 처럼 '틀'을 정의하여 타입을 강제하도록 사용할 수 있는 것이 Ineterface이다. 타입 스크립트의 Ineterface는 주로 객체 위주로 다룬다. 1. Type Alias 와 Interface 차이 //Type Alias로 지정 type Trim = { option : string } //Type Alias는 & 기호를 사용하여 객체를 합침 type Model = Trim & { name : string, color : string} let Car : Model = {name : 'Cybertruck', color : 'Silver', option : 'RangeExtender'} //inter..
-
[TypeScript] Class 문법 Type지정하기공부/TypeScript 2024. 3. 21. 16:52
Class 문법이란? ES6에서 추가된 문법으로 좀 더 코드를 객체지향적으로 표현하기 위해 추가된 문법이다. TypeScript의 class 문법 type 지정은 다음과 같다. //TypeScript 타입지정 문법 class Product { //constructor을 쓸때는 위에서 변수를 미리 선언하고, type을 지정한다. name : string; price : number; /* 기억할 포인트 1. constructor안에서도 파라미터의 타입 지정이 가능하다. 2. 생성된 데이터는 항상 object 이기 때문에 return 타입을 지정할 필요가 없다. 3. 함수와 관련된 모든 문법이 적용가능하다. */ /* cunstructor (생성함수, 생성자) 객체를 정의하면, 그 객체에 의해 생성될 ins..
-
[TypeScript]Literal Types, Readonly, const 정리공부/TypeScript 2024. 3. 19. 23:56
Literal Types 미리 들어올 자료를 정하는 타입을 Literal Types 이라고 한다. Literal Types을 쓰는 이유는 변수를 더 엄격하게 관리해서 오류를 방지하기 위해서 사용한다. 함수 입력값, 리턴값 등을 제한하는 용도로도 사용가능하다. const 변수와 유사하게 사용가능하다. //literal types 변수 let blog : 'tistory'; //'tistory'타입이기 때문에 tistory만 들어갈 수 있게 된다. blog = 'tistory'; //에러 발생 blog = 123; 함수에 Literal Types 사용 예 //입력값으로는 Tistory, 리턴값으로는 true | false만 가능해진다. function blog(a: 'Tistory') : true | fal..
-
[TypeScript] TypeAlias ?공부/TypeScript 2024. 3. 19. 21:01
Type Alias type 키워드를 사용해 변수에 타입을 넣어서 사용하는 방법 (타입에 이름을 지정) 주로 타입이 길어져서 복잡해지는 경우 사용한다. 같은 이름의 type 변수는 정의할 수 없다. (중복불가) //기본형식 type 변수 = type지정 type A = stirng | number; let B : A = 123; let B : A= 'Hello'; 예시 Object에 Type Alias 사용하기 type Product = { brand : string, serialNumber : number , model : string[] } //다음과 같이 변수 명 뒤에 입력 let tv_data : Product = { brand : 'LG', serialNumber : 1111, model : [..