본문 바로가기

Typescript19

[MySQL] Sequelize 개념 및 세팅 방법, 쿼리 예제 1. Sequelize - Sequelize는 Node.js를 위한 ORM(Object-Relational Mapping)으로, MySQL, MariaDB, PostgreSQL, SQLite, 그리고 MSSQL과 같은 SQL 기반의 데이터베이스를 지원한다. - JavaScript, TypeScript와 모두 호환 가능하다. - Sequelize를 사용하면 SQL 쿼리를 직접 작성하지 않고도 데이터베이스에서 데이터를 조회, 삽입, 수정, 삭제가 가능하다. - 모델 기반의 접근 방식을 통해 코드의 가독성과 유지보수성을 향상시킬 수 있다. Mongoose와 거의 똑같다. 문법만 다름 2. Sequelize의 장점 - JS로 쿼리 짤 수 있음 - 다양한 SQL DB 지원 - Promise , async/awai.. 2023. 5. 12.
[TS] TS연습하기16 : 다이나믹 타입 지정(완) //타입파라미터를 이용한 다이나믹 타입 지정 type Age2 = T // 타입파라미터 지정 방법 const 에이지:Age2 = '스트링이어야지'; // 타입파라미터 사용 방법 //삼항연산자를 활용한 다이나믹 타입 지정 type Age3 = T extends string ? string : unknown ; const 에이지2:Age3 = '스트링이면' const 에이지3:Age3 = 123; // 에이지3 은 unknown이 된다. //연습하기 type FirstItem = T extends any[] ? T[0] : any //파라미터로 array를 입력할 경우 array의 첫자료의 타입을 그대로 남겨주고 아니면 any 타입 2023. 4. 13.
[TS] TS연습하기15 : index signature, keyof 연산자 //index signature 문법 interface StringOnly { [key : string] : string //모든 문자로된 속성은 string 타입이다. } const car이다:StringOnly = { name : 'carName', age : '32', //string이어야 한다. } //깊은 object의 type (Recursive) : 쓸 일이 거의 없다. interface TypeFont { 'font-size': TypeFont|number } const cssFont:TypeFont = { 'font-size':{ 'font-size':{ 'font-size' : 123 } } } // 조건부 타입변환기(keyof 연산자) type Car1 = { //type을 잘못 지정.. 2023. 4. 13.
[TS] TS연습하기14 : d.ts 1. d.ts - 이름.d.ts - 타입, 인터페이스 등을 담는 곳 2. 자동생성 - tsconfig에 "declaration" : true 로 해주면 ts파일마다 d.ts가 자동으로 생성됨. - d.ts 파일은 export import 해서 사용해야 한다. - override 가 가능하다. - tsconfig에 "typeRoots":["./types"] 이렇게 작성하면 여기에 있는 type들은 글로벌하게 이용이 가능하다. (types/common/이름.d.ts 이렇게 루트를 설정해줘야 한다.) 3. 외부 라이브러리 사용 시 타입정의가 안되어있으면 - typescript 공식 홈페이지에 가서 찾아보면 된다. - npm 설치 시 대부분 들어온다. - typeRoots 옵션을 설정한 경우 node_modul.. 2023. 4. 13.
[TS] TS연습하기13 : declare //외부 .js에 있는 변수를 .ts에서 이용하고 싶은 경우 // declare을 통해 변수를 재정의한다. declare let a:number; //declare 정의 내용은 힌트이므로 js로 변환되지 않음. console.log(a+1) //ts파일 -> ts파일로 변수를 가져다쓰고 싶은 경우 //명시적으로 import export 사용한다. // import {어쩌고} from './data' 이렇게 //global 만드는 방법도 있긴 하다. d.ts 만들지 이건 안쓴다. 다음시간은 d.ts declare global{ type HumanName = string } export{} 2023. 4. 13.
[TS] TS연습하기12 : array와 tuple, rest parameter //array 의 tuple 자료형 const 멍멍:[string, number, string, boolean?] = ['혜자',3,'번 짖는다'] //optional ? 은 맨 뒤에 쳐야한다. //사용 const bark = (...x:[string, number, string, boolean?]):void =>{ //rest parameter의 엄격한 타입지정 console.log(x) } bark(...멍멍); //[ '혜자', 3, '번 짖는다' ] //Spread Operator의 타입지정 let arr = [1,2,3]; let arr2:[number,number, ...number[]] = [4,5, ...arr]; //rest parameter랑 똑같다 // 연습하기 const test:[.. 2023. 4. 13.
[TS] TS연습하기11 : React와 타입스크립트(TSX) 1. React-TypeScript 프로젝트 생성 npx create-react-app 프로젝트명 --template typescript 2. React에서 TS를 사용할 때 주의할 점 - 프로젝트의 사이즈가 큰가 - 협업 시 다른 사람이 짠 코드를 참조할 일이 많은가 - 장기적으로 유지보수에 도움이 되는가 - 나중에 팀원이 더 필요해도 인력수급이 쉽게 가능한가 - 팀원들 학습에 필요한 시간과 비용이 적게 드는가 - 취업/이직하려면 그냥 쓰셈 어차피 배워야함 3. 문법 - 일반 TSX에서의 타입 지정 (HTML요소) - 컴포넌트의 타입 지정 - useState 타입 지정 : 대부분 알아서 해주니 큰 걱정말고 마우스 올려보자. - Redux에서의 타입 지정 Store 사용하기 - 이런식으로 사용하면 된다... 2023. 4. 13.
[TS] TS연습하기10 //type도 ESM을 사용할 수 있다. import {Atype, age} from './index10_1'; const aType:Atype = 'string aType' + age //Generic : 함수를 쓸 때 Generic 함수를 만든다 (파라미터로 타입을 입력하는 함수) const 제네릭함수 = (x:T[]):T => { //타입이 파라미터처럼 된다. return x[0] } const 제네릭1 = 제네릭함수([4,2]); const 제네릭2 = 제네릭함수(['string', 'Hi']) // 사용할 때 이거 지정 안해도 잘 작동하긴 한다. //Generic 타입에서 제한두기 interface LengthCheck{ length : number } const 제네릭함수2 = (x : T)=.. 2023. 4. 13.

티스토리툴바