웹 개발/#️⃣ TypeScript

웹 개발/#️⃣ TypeScript

TS | Import 와 Export

| TypeScript에서의 Import와 Export TypeScript는 모듈화를 지원하여 코드의 재사용성과 유지보수성을 향상시킬 수 있습니다. 이를 위해 import와 export 키워드를 사용하여 모듈을 가져오고 내보내는 방법을 제공합니다. Export export 키워드를 사용하여 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보낼 수 있습니다. 예를 들어, 다음은 CatType과 Cat을 내보내는 예입니다. export type CatType = { id: string; name: string; age: number; species: string; isCute: boolean; friends: string[]; }; export const Cat: CatType[] = [ // ..

웹 개발/#️⃣ TypeScript

TS | 데코레이터

| 데코레이터 사전준비 tsconfig.json에서 아래 두개를 true로 변경해준다(주석을 풀어준다) 데코레이터란 데코레이터는 함수다 function InitClass(params: any){ console.log("InitClass :", params); } 데코레이터는 무조건 class 와 만 같이 쓴다. (내부 외부, 멤버 변수, 메소드, 파라미터...) @InitClass class ExampleClass{ constructor() {} } 실행시 에러가 뜰 경우 --experimentalDecorators 옵션을 앞에 붙여서 실행 실행결과를 보면 ExampleClass의 생성자 함수가 params로 들어간 것을 확인할 수 있다 코드 어디를 봐도 함수를 실행시킨다거나, new ExampleCla..

웹 개발/#️⃣ TypeScript

TS | 제네릭

| 제네릭 제네릭이란 제네릭은 데이터 형식에 의존하지 않으면서, 다른 데이터 타입들로 사용할 수 있는 방법이다 interface IGene{ data: string | number | object; } function gen(params: IGene){ console.log(typeof params.data); } gen({data:"아무거나"}); gen({data:25}); gen({data:{}}); 제네릭이 없으면 위와같이 필요한 타입을 다 작성해야할것이다 이제 제네릭을 사용해보겟다 interface IGene{ data:T } function gen(params: IGene){ data: console.log(typeof params.data) } gen({data:"hi"}) 위와같이 타입정보..

웹 개발/#️⃣ TypeScript

TS | key와 같이 쓰는 타입

| key와 같이 쓰는 타입 타입이 고정되어있을때 interface IName { name: string; } interface ISchool { school: string; } interface ICity { city: string; } function prt(params: IName | ISchool | ICity){ if ("name" in params) console.log(params.name); else if ("school" in params) console.log(params.school); else if ("city" in params) console.log(params.city); } prt({name: "jae"}); 만약 인터페이스가 더 늘리려고 하면 인터페이스를 하나하나 작성해야해..

웹 개발/#️⃣ TypeScript

TS | 대수타입 -union, intersection

| UNION, INTERSECTION UNION | 또는 //1. union 합지합 | (OR) let nameOrAge: string | number; nameOrAge = "jae"; nameOrAge = 25 위와 같이 타입을 여러개 허용하고싶을때 | 를 주면된다 활용해보자 아래와 같이 코드를 적으어보자. 일단은 에러가 날것이다 //1. union 합지합 | (OR) let nameOrAge: string | number; nameOrAge = "jae"; nameOrAge = 25 interface IName{ name: string; } interface IAge{ age: number; } function prtUnion(params: IName | IAge){ if(params.name){..

웹 개발/#️⃣ TypeScript

TS | 클래스 - readonly와 생성자

| readonly와 생성자 readonly 필드 에 readonly 를 붙이면 오로지 Read 만 되고 수정은 안된다 class LogicDataTransferObject{ public readonly ID; private readonly _PW; constructor(ID: string, PW: string){ this.ID = ID; this._PW = PW; } set PW(newPW: string){ this._PW = PW; } } const LoginDTO = new LogicDataTransferObject("hi","1234"); LoginDTO.PW = "set"; console.log(LoginDTO); 생성자 class LogicDataTransferObject{ public ID;..

이재원
'웹 개발/#️⃣ TypeScript' 카테고리의 글 목록