꿈의 세상
-
Typescript - rest & destructuringFront-end/Typesrcipt 2023. 4. 14. 17:49
Typescript rest & spread rest parameter란 함수의 파라미터의 값 갯수가 가변적일때 ...을 사용하여 여러개의 파라미터가 들어올 수 있도록 한다. function myFunc(...a: number[]) {// ...을 사용하여 갯수제한을 없앤다. // 배열 형태로 파라미터 타입을 선언한다. } myFunc(1, 2, 3, 4, 5)// 5개의 파라미터 myFunc(1, 2)// 2개의 파라미터 다른 파라미터와 같이 사용 하기 위해선 rest parameter를 맨 마지막에 선언해야한다. function myFunc(x:string, ...a: number[]) {// ...a는 뒤에 있어야한다. } spread operation이란 객체 또는 배열을 다른 객체, 배열에 복제..
-
Typescript - Class Type & InterfaceFront-end/Typesrcipt 2023. 4. 14. 11:28
Typescript Class Type Typescript 에서 Class Type 을 선언하는 방법은 이러하다. class PetClass { name: string;// 변수의 타입을 지정한다. constructor(paramName: string) {// 파라미터의 타입을 지정한다. this.name = paramName; } classFn(paranX: string) { // 클래스 내 함수도 타입을 선언 할 수 있다. console.log('Hello ' + paranX); } } let pet1 = new PetClass('bomi');//지정된 파라미터 타입의 값만 들어갈수있다. console.log(pet1); pet1.classFn('bomi'); // 함수 파라미터 타입의 값만 들어갈수..
-
Typescript - HTML DOM 제어Front-end/Typesrcipt 2023. 4. 13. 17:22
Typescript DOM 제어 javascript 에서 DOM 조작 및 제어를 할땐 타입과 상관없이 조작하지만 typescript 에선 조작 및 제어를 하기위한 HTML 태그의 타입으로 Narrowing 처리를 해야한다. tsconfig.json 파일에서 Null 체크를하기위해 옵션을 추가해야한다. "strictNullChecks": true//엄격한 null타입 체크 HTML 태그 속 글자 변경 예시 타이틀입니다. 위의 html태그의 글자를 변경하기위해 타입스크립트에서 narrowing 처리를 해야한다. let title = document.querySelector('#title'); title.innerHTML = '타이틀 변경'; // narrowing이 필요하다. 에러 // narrowing 처..
-
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값이 선택사항일..