Front-end/Typesrcipt
-
Typescript - Method AliasFront-end/Typesrcipt 2023. 4. 13. 15:48
Typescript Method Type type alias 를 사용하여 함수에 타입을 지정하는 이러한 방법도 있다. type FnType = (a: string) => number;// 함수 type alias 선언 let methodFn: FnType = function (str) { // 함수표현식으로 만들어 type alias를 사용한다 return 27; } 함수 표현식을 사용하여 선언된 함수에 type alias 를 사용하기 위해서는 화살표 함수로 type alias 만들 수 있다. 오브젝트 속 함수의 type alias는 이렇게 선언 할 수 있다. type PetInfoType = { name: string,// name을 string 타입으로 선언 ageFn: (num: number) =>..
-
Typescript - Literal TypesFront-end/Typesrcipt 2023. 4. 13. 14:35
Literal Types Literal Types 이란 집합 타입의 구체적인 하위타입이다. 타입을 string 타입으로 선언 할 수 있지만 구체적으로 문자를 타입으로 선언 하여 그 문자만 들어올 수 있도록 할 수있다. string 뿐만 아니라 number, array, object 등 다양한 집합타입의 구체적인 하위타입을 선언 할 수 있다. let myLiteral: 'zelord';// 문자를 타입으로 지정 (Literal Type) myLiteral = 'zelord';//지정된 문자만 들어갈 수 있다. myLiteral = 'zelord2'//타입으로 지정된 문자 가 아니면 에러를 발생한다. let myLiteralNum: 123;// 숫자를 타입으로 지정 myLiteralNum = 123;// 지..
-
Typescript - Type AliasFront-end/Typesrcipt 2023. 4. 12. 15:50
Type Alias type alias 란 타입을 변수로 만들어서 사용 하는것이다. type alias 를 변수로 선언할때 대문자로 사용한다. type Info = string | number;// type을 변수로 사용한다. (통상 대문자로 시작) let myAge: Info = 27;// number 타입 허용 let myName: Info = 'zelord';// string 타입 허용 배열 및 오브젝트도 type alias 를 사용할 수 있다. type Member = {// Member로 타입변수를 선언 name: string, age: number } let person: Member = {// Member 타입변수를 불러와서 타입선언 name: 'zelord', age: 27 } type L..
-
Typescript - Narrowing & AssertionFront-end/Typesrcipt 2023. 4. 12. 14:41
Tyepscript Narrowing Tyepscript Narrowing이란 타입이 하나로 확정되지 않았을 경우 Type Narrowing을 통해 타입을 조건별로 나누어주는것이다. function myFn(x: number|string): number {// 파라미터 타입이 하나로 정의되어있지 않다. return x + 10; } 위의 함수에러를 수정하기위해 Narrowing을 해줘야한다. Typeof 연산자 typeof 란 대표적으로 사용되는 Narrowing 방법중 하나는 typeof 연산자를 사용하여 처리하는것이다. function myFn(x: number | string) {// 2가지 타입이 들어올 수 있다. if (typeof x === 'string') {// typeof 연산자를 통해 ..
-
Typescript - function parameter, returnFront-end/Typesrcipt 2023. 4. 12. 13:27
Function type Function type(함수) 타입을 선언하기위해서는 parameter 와 return 둘다 타입을 선언해줘야한다. function myFn(x: number): number {// 파라미터 타입은 number return x * 2;// return 타입은 number myFn(3);// 허용 가능 myFn('3');// string 타입이 들어가서 에러가 나타난다 Function type중에 return값이 필요 없을 경우 타입을 void로 설정한다. function myFn2(x: number): void {// return 타입을 void로 바꾼다 console.log(x + x);// return이 없다. } Function type중에 parameter값이 선택사항일..
-
Tyepscript - Union, any, unknownFront-end/Typesrcipt 2023. 4. 12. 11:03
Tyepscript Union Tyepscript Union 이란 2가지 이상의 타입을 선언이 필요할때 선언할 수 있는타입이다. 선언 방법은 변수: (타입1 | 타입2) 로 선언할 수 있다. let myName: (string | number) = 'kim'; let myAge: (string | number) = 27; 배열변수에서의 union type 을 선언하여 숫자 또는 문자열 배열 변수를 만들 수 있다. let myNumArr: (string | number)[] = [1, 'zelord', 3]; // 숫자 or 문자열 배열 타입선언 배열 뿐만아니라 오브젝트변수에서도 union type 선언이 가능하다. let myObject: { name: (string | number) } = { name..
-
Typescript - Primitive TypesFront-end/Typesrcipt 2023. 4. 12. 10:05
Primitive Types Primitive Types(기본 타입)이란 string, null, boolean 원시타입이다. 타입스크립트의 변수 선언은 변수명: 타입 이렇게 선언할 수 있다. let myName: string = 'kim'; // myName이라는 변수는 string 타입이 된다 myName = 27; // 숫자타입인 number가 되서 에러가 나타난다. 여러가지 타입으로 변수를 선언 할 수 있다. let myName: string = '내 이름'; // string 타입 let myAge: number = 3; // number 타입 let myboolean: boolean = true; // boolean 타입 타입을 명시적으로 선언해도 되지만 생략이 되면 타입스크립트가 변수를 생성..
-
Typescript - 변수 선언Front-end/Typesrcipt 2023. 4. 11. 16:11
Typescript 변수 선언 Typescript 변수에 타입을 지정할 수 있다. let myName: string = '내 이름'; // string 타입 let myAge: number = 3; // number 타입 let myboolean: boolean = true; // boolean 타입 let myNull: null = null; // null 타입 let myUndefined: undefined = undefined; // undefined 타입 let myStrArr: string[] = ['1', '2', '3']; // 문자열 배열 타입 let myNumArr: number[] = [1, 2, 3]; // 숫자열 배열 타입 let myObject: { name: string } = ..