Front-end
-
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 효과 ) ..
-
Typescript - import & export & namespaceFront-end/Typesrcipt 2023. 4. 18. 16:55
Typescript exrpot typescript export 란 파일에 선언되어있는 변수 및 함수 등을 다른 파일로 내보내서 사용한다는 것이다. // test.ts // export 키워드를써서 다른 파일에서 사용할 수 있도록 한다. export var myName: string = 'zelord'; export var myAge: number = 27; export 키워드를 써서 다른 파일에 사용할 수 있도록 선언한다. export 키워드는 변수 뿐만 아니라 type 도 내보낼 수 있다. // test.ts export type MyName = string;// export 키워드를 사용하여 type 도 내보낼 수 있다. Typescript import Typescript import란 다른 파일에..
-
Typescript - protected & staticFront-end/Typesrcipt 2023. 4. 18. 10:01
Typescript protected Typescript protected 이란 extends된 클래스에서는 사용이 가능하지만 자식들은 사용이 불가능하다. class User { protected age = 9;// protected 키워드로 age 변수 선언 } class NewUser extends User { chageAge() { this.age = 29;// extends된 클래스 내에서 age를 사용 할 수 있다. } } let person = new NewUser(); console.log(person.age); // 자식에서 age를 불러와 사용할 수 없다. Typescript static Typescript static 이란 부모 클래스에 변수가 직접 부여되여서 부모를 통해 사용할 수 있..
-
Typescript - public & privateFront-end/Typesrcipt 2023. 4. 18. 09:27
Typescript public Typescript public 이란 class에서 쓰이는 키워드이다. public 이 붙은 변수에는 모든 자식들이 사용 가능하다. class Pet {// 클래스를 선언한다. public name = 'bomi';// public 키워드 선언 (생략이 가능) constructor(a) { this.name = a; } } let myPet = new Pet('bomi');// 클래스 변수를 선언한다. myPet.name = 'ruru';// public 키워드가 붙은 변수를 사용/수정이 가능하다. public 키워드는 축약어를 사용하여 간단하게 코드를 짤 수 있다. class Person {// 클래스선언 constructor(public name: string) {//..
-
Typescript - never typeFront-end/Typesrcipt 2023. 4. 18. 02:07
Typescript never type Typescript never type 이란 function return 값에 붙일 수 있고, 에러함수를 사용할때 이거나 무한루프함수에서 사용하다. never type 은 return 값이 없어야하고 endpoint 가 없어야한다. // return값이 없는 error 함수 function myNever(): never { throw new Error(""); } // 무한루프함수 function myNever(): never { while (true) { /// } } 함수에는 return undefined 가 기본 내장되어있다. function myNever(param: string) { // param은 오직 string 타입만 올 수 있다. if(typeof..
-
Typescript - NarrowingFront-end/Typesrcipt 2023. 4. 18. 01:46
Typescript Narrowing Typescript Narrowing 이란 타입 에러를 피하기 위해 조건에 따라 변수를 더 정확한 타입으로 좁히는 방법이다. Typescript Narrowing 방법중 && 연산자를 사용하여 null 또는 undefined type 을 체크해 줄 수 있다. function narrowFn(a: string | undefined) { // string 타입이 아닌 undefined 타입이 올 경우 if ( a && typeof a === 'string' ) { // if문으로 narrowing 처리를 하여 string 타입만 허용 ... } } typeof 연산자는 number, string, boolean, object 등 타입을 지정하는것이 제한적이다. type키..