typescript
-
Typescript - inferFront-end/Typesrcipt 2023. 4. 24. 21:23
Typescript infer typescript 에서 타입에 대한 조건식을 넣어 줄때 extends와 삼항 연산자를 사용하여 타입에 들어오느 파라미터에 따라 타입을 바꿀수 있다. // extends 를 사용하여 타입을 T라는 타입이 string을 가지고 있는지 확인한다. type Age = T extends string ? string : unknown;// 삼항연산자로 조건을 만들어 타입을 선언한다. // a는 string 타입 let a: Age // a2는 unknown 타입 let a2: Age Infer infer 이란 제네릭 파라미터에 들어간 타입을 뽑아내 다른 변수에 넣어두어 타입을 선언할때 사용하기도한다. // T 에서 타입을 받아와서 R 이라는 변수에 저장한다. type Person =..
-
Typescript - Type MappingFront-end/Typesrcipt 2023. 4. 24. 12:13
Typescript keyof Typescript keyof 란 class, interface, Object 등 타입에서 key 값들을 모두 가져와서 유니언 타입으로 선언해준다. // interface 선언 interface Person { age: number, name: string } // class 선언 class Dog { name : string; constructor(name) { this.name = name; } } // keyof 를 사용하여 Person의 속성들을 모두 가져와 유니언 타입으로 만든다. type PersonKeys = keyof Person// name | age // keyof 를 사용하여 Dog의 속성들을 모두 가져와 유니언 타입으로 만든다,. type DogKeys..
-
Typescript - index signaturesFront-end/Typesrcipt 2023. 4. 19. 12:52
Typescript index signatures Typescript index signatures 란 object 타입에서 각 속성마다 타입을 하나씩 정해주는 것이 아니라 한번에 타입을 지정해줄 수 있는것이다. // 기존은 속성별로 타입을 정해주었다. interface StringType { name: string, age: string, location: string } // index signature 를 사용하면 모든속성에 타입을 줄 수있다. interface StringType { [key: string]: string,//[key: string] 이란 모든 문자열로된 속성을 의미 } let user: StringType = { name: 'zelord', age: '27', location: ..
-
Typescript - implementsFront-end/Typesrcipt 2023. 4. 19. 11:42
Typescript implements Typescript implements 란 부모의 메소드나 변수를 그대로 가져다가 쓰지 않고 오버라이드를 해서 사용하는것이다. implements 는 class의 interface에 만족하는지 여부를 체크할 때 사용한다. // intreface 로 타입을 선언한다. interface PetType { gender: string, age: number } // class를 선언하여 implements로 interface 타입을 불러온다. class Pet implements PetType { gender: string; age: number = 27; constructor(x: string) { this.gender = x; } } let bomi = new Pet(..
-
Typescript - d.tsFront-end/Typesrcipt 2023. 4. 18. 23:32
Typescript d.ts Typescript d.ts 파일이란 타입정의들을 보관하는 파일이다. d.ts파일은 자동으로 글로벌 모듈이 아니여서 다른파일이 참조하여 사용 할 수 없다. // test.d.ts // 타입들의 정의를 보관하는 파일이다. export type Age = number;// export 키워드를 사용하여 다른 타입스크립트 파일에서 사용한다. export interface Person { name: string } 모든 타입들을 정리해 놓은 레퍼런스용 d.ts 파일을 자동으로 생성하기 위해선 tsconfig.json 파일에서 옵션을 추가한다. // tsconfig.jon { "compilerOptions": { "target": "ES5", "module": "CommonJS", "..
-
Typescript - declareFront-end/Typesrcipt 2023. 4. 18. 21:11
Typescript declare Typescript declare 이란 컴파일러에게 declare 로 선언된 변수 또는 함수들을 이미 존재한다고 알리는 것이다. // data.js // js파일에 변수를 선언한다. var num = 10; var profile = {name: 'kim'}; 다른 js파일에 선언된 num 변수를 타입스크립트에서 declare로 불러와 사용할 수 있다. // index.ts declare let num: number;// declare 로 변수가 이미 존재한다는것을 알린다. console.log(num + 1); declare로 재정의 된 변수에 타입선언도 가능하다. declare 키워드는 변환된 index.js에서는 나타나지않는다. Typescript ambient mo..
-
Typescript - tuple typeFront-end/Typesrcipt 2023. 4. 18. 20:37
Typescript tuple type Typescript tuple type 이란 고정된 길이의 배열에 각 인덱스 요소마다 타입을 고정적으로 적용하는 타입이다. // 0번째 index에 string 타입, 1번째 index에 number 타입 let Dog: [string, number?] = ['bomi', 7]; //?를 사용하여 들어올 값이 들어오지 않을 수 있다. let Dog2: [string, number?] = ['bomi']; //?는 항상 맨 마지막에 붙여서 사용해야한다. let Dog3: [string, number?, boolean] = ['bomi', 7];// 가운데에 ? 를 사용하면 안된다. 타입뒤에 ? 를 사용하여 값이 들어가거나 값이 들어가지 않을 수 있음을 나타낸다. ?를..
-
Typescript - genericsFront-end/Typesrcipt 2023. 4. 18. 17:25
Typescript generic typescript generic 이란 함수나 클래스에서 사용할 타입을 결정해주는것이다. function myGenericFn(x: T[]): T {// T 라는 타입을 받아와 타입을 결정한다. return x[0]; } // 사이에 number 타입을 선언하여 함수의 타입을 number로 선언한다. let indexZero = myFn([5, 8]); // 사이에 string 타입을 선언하여 함수의 타입을 number로 선언한다. let indexOne = myFn(['5', '8']); generic 을 사용할때도 파라미터의 타입이 제대로 들어 가는지 확인하기위해 안에 extends 키워드를 사용하여 타입파라미터에 제한을 할 수 있다. ( narrowing 효과 ) ..