TypeScript

typeORM 시작하기 (MySQL)

ORM이 뭐임 ORM은 Object Relational Mapping의 약자로 객체와 DB의 관계를 매핑해주는 도구다. 객체지향적 코드를 활용해 더 직관적이고 비즈니스 로직에 더 집중할 수 있게 해준다. SQL대신에 좀더 직관적인 코드와 메서드로 데이터를 조작할 수 있게 되는 것. 설치, 프로젝트 적용 npm i typeorm 기존 프로젝트에 적용하기 npx typeorminit --database mysql 나는 mysql을 쓸꺼니까 이렇게 해줄 것이다. 보통 구글링하다보면 createConnection함수나 ormconfig.json을 통해 설정하는데, 이건 0.2.45버전에 해당하는 세팅이고, 0.3부터는 createConnection, ormconfig.json이 없어졌으며 data-source...

typescript 컴포넌트에 타입에 따른 다형성 부여하기(리팩터링)

멋사사이트를 만드는 중 , 다음과 같은 3가지 아카이빙 페이지(프로젝트 아카이빙, 추억 아카이빙, 세션 아카이빙)을 제작해야 했다. https://github.com/cau-likelion-org/cau-likelion-next/pull/26 Archiving 데이터 타입 변경 by d0422 · Pull Request #26 · cau-likelion-org/cau-likelion-next 🛠️ 한 줄 요약 아카이빙 데이터 타입 변경 상세 🔥 바꾼거 Archiving 상위 인터페이스로 하여 Project, Session, Gallery에서 상속 받아 디테일 프로퍼티 적용 컴포넌트 제네릭 사용하여 타입별 랜더링 github.com 해당 페이지들은 모두 동일하게 아래와 같은 Card형식을 사용하고 있다. ..

Typescript - 의존성 관리 타입 선언과 @types

의존성 관리 : 타입 선언과 @types package.json의 세가지 종류 의존성 dependencies런타임에 필수적인 라이브러리들이며, npm을 통해 설치한다면 dependencies에 들어있는 라이브러리도 함께 설치됨 → 전이 의존성 현재 프로젝트를 실행하는데 필수적인 라이브러리 devDependencies사용자가 해당 프로젝트를 설치하면 해당 라이브러리들은 제외됨 ⇒ typescript 현재 프로젝트를 개발하고 테스트하는데 사용되지만, 런타임에는 필요없는 라이브러리 peerDependencies 런타임에 필요하긴 하지만, 의존성을 직접 관리하지 않는 라이브러리들 → 플러그인 프로젝트에서 공통적으로 고려해야 할 의존성 두가지 ts자체 의존성 ⇒ 팀원들이 모두 같은 버전을 사용해야함 → devDe..

Typescript - any 사용하기

any 사용하기 가능한 좁은 범위에서 any 사용하기 function f1(){ const x:any = express(); processBar(x); } // 보다는 function f1(){ const x= express(); processBar(x as any); 함수의 반환타입은 정의되어야 함수 내부의 any가 밖으로 빠져나가지 않게 할 수 있다. 객체 내부의 타입오류는 해당 부분에서만 as any를 사용하여 해결하자! @ts-ignore //@ts-ignore를 사용하면 any를 사용하지 않고 해결이 가능함 any를 구체적으로 변형해서 사용하기 any타입을 그대로 정규식이나 함수에 넣는 것은 권장되지 않는다. function getLength(array:any){} // ===refactor f..

Typescript - 타입 설계

타입설계 문서에 타입정보 쓰지 않기 ⇒ 타입은 ts로만 표기 생성은 엄격하게, 사용은 너그럽게 매개변수 타입은 반환타입에 비해 범위가 넓은 경향이 있음 ⇒ 선택속성과 유니온타입 매개변수와 반환타입의 재사용을 위해 기본형태(반환타입)와 느슨한 형태(매개변수타입)을 준비하는 것이 좋음 타입 주변에 null값 배치하기 한 값의 null 여부가 다른 값의 null 여부에 암시적으로 관련되도록 설계하면 안됨 API작성시에는 반환타입을 큰 객체로 만들고 반환타입 자체가 null이거나 null이 아니도록 설계해야함 strictNullChecks → null오류를 정확하게 찾아냄 유니온의 인터페이스보다는 인터페이스의 유니온을 사용 interface Layer{ layout:FIllLayout|LineLayout|Poi..

Typescript - 타입 추론

타입추론 타입 추론이 된다면 명시적 타입 구문이 필요하지 않음 비구조화 할당문은 모든 지역변수의 타입이 추론되도록 함 interface Product={ id:string, name:string, price:number } function logProduct(product:Product){ const {id,name,price}=product; } ⇒ 따라서 타입 정보가 있는 라이브러리에서 콜백함수의 매개변수 타입은 자동으로 추론됨 잉여 속성 체크 타입에 선언된 속성 외에 속성이 있는지 체크함 객체 리터럴에서만 잉여속성 체크가 동작함 따라서 엄격한 객체 리터럴 체크라고도 한다. 함수의 반환에 타입 명시 ⇒ 함수의 반환에 타입을 명시하면, 오류가 정확하게 표기됨 linter의 no-inferrable-ty..

ReactNative Stack Naivagation에 Typescirpt 적용

초단기 강수예측앱을 TS로 전환중인데 ReactNative Stack Navigation에서 type오류를 해결하기 위해 이 게시글을 작성한다. createStackNavigator의 type을 보면 ParamListBase를 상속하는 ParamList를 받는 것을 확인할 수 있다. ParamList는 string, object 또는 undefined가 될 수 있다고 한다. 서칭해보니 각 페이지: 받는 props의 형태로 작성해주면 된다고 한다. 나는 이 세가지 페이지를 사용하므로 이렇게 작성해 주었다. app.tsx에는 이렇게 적용해주면 된다. 다른 페이지의 navigation props에 type을 지정하는 일은 StackScreenProps를 사용하는데, 얘는 이렇게 생겼다. 아까만든 ParamLi..

tsconfig.json

tsconfig.json 전반적인 ts설정을 하는 문서 생성 tsc --init 설정 noImplicitAny ⇒ 암시적 any를 허용하지 않음 comilerOption:{ "noImplicitAny" :true, } strictNullChecks ⇒ null이나 undefined를 허용하지 않음 → undefined는 객체가 아닙니다와 같은 문제 해결 가능 comilerOption:{ "strictNullCheck" :true, } noEmitOnError ⇒ 본래, ts는 타입체크와 컴파일이 독립적으로 시행되나, 타입에러가 발생할때 컴파일이 되지 않게 하려면 설정함 → 런타임에는 타입체크가 불가능함 comilerOption:{ "noEmitOnError" :true, } 💡 타입스크립트가 컴파일링되는..