본문 바로가기

리액트31

[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연습하기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.
[TS] TS연습하기8 //never type // 조건1. 함수가 리턴하면 안된다. // 조건2. 엔드포인트가 없어야 한다. (끝나지 않아야한다.) // 어따쓰냐면 : 안쓴다. :void 쓰면 된다. // 알아야되는 이유는 ? 간혹 등장하기 때문이다. narrowing 에서 never가 등장하면 있을 수 없다는 뜻이다. const 네버타입 = ():never=>{ throw new Error('에러를 내는 방법이 있고,') //while(true){} 이것도 방법이고, } //OOP 키워드의 사용 //constructor 사용 이유는 : 파라미터 입력 가능. class User{ private familyName : string = '이' constructor(private name:string) { // 간결하게 축약 가능.. 2023. 4. 12.
[TS] TS연습하기7 //Narrowing 할 수 있는 방법 더 알아보기 const 언디파인드찾기 = (a:string|undefined):void=>{ //null 타입도 찾아준다. if(a && typeof a === 'string'){ //&& 사용하기 : // string 이면 할거 } else{ // undefined 이면 할거 } } //in 키워드 : 속성명이 다를 경우 사용 가능하다. (Object Narrowing) type Fish = {swim : string} type Bird = {fly :string} const 애니멀 = (animal :Fish|Bird):void=>{ if('swim' in animal){ //Fish 타입 검사 //swim 이라는 속성이 들어있으면 할거 } else{ //이외에.. 2023. 4. 12.
[TS] TS연습하기6 // Rest Parameter의 타입 지정 const resParams = (...a:string[]):void => { //파라미터에 ...a 이렇게 점을 붙여주면 파라미터가 여러개 올 수 있다. console.log(a) } resParams('a','b','c','d'); //destructuring 문법에서의 type const 옵젝트 = {student : true, age : 20} const 하암수 = ({student, age}:{student:boolean, age:number}):void=>{ console.log(student, age) } 하암수(옵젝트) //숫자를 여러개 입력하면 최대값을 return 해주는 함수 ? Math.max 사용금지 const 숫자여러개 = (...a:n.. 2023. 4. 12.

티스토리툴바