본문 바로가기

Frontend/TypeScript(완)18

[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.
[TS] TS연습하기9 (public, private, protected, static) class ProtectedPractice { protected x:number = 10; static y:number = 50; //static 키워드는 부모class에 직접 부여됨(자식들도 못씀) private static z:number = 100; //static은 다른 키워드랑 병합이 가능하다. } class NewUser extends ProtectedPractice{ public 변경():void{ //protected는 x 사용 가능하다 //private는 x 사용 불가능하다 this.x = 20 } } const newUSER = new NewUser() newUSER.변경(); //protected라서 접근 가능 console.log(newUSER); console.log(`부모는 st.. 2023. 4. 12.

티스토리툴바