자바스크립트 - TypeScript
[TypeScript] 타입을 파라미터로 입력하는 Generic
❓ Generic 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다 예시를 들어보자면 아무렇게나 생긴 array 자료를 입력하면 array의 첫 자료를 그대로 출력해주는 함수를 만들었다고 하자. function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a) 이러면 콘솔창에 4가 출력된다. 근데 마우스 올려서 a의 타입을 확인해보면 숫자는 아니고 unknown 타입이다. 왜냐면 지금 입력하는 array도 unknown 타입이라서 그렇다. 여기서 중요포인트는 "타입스크립트는 타입을 알아서 변경해주지 않는..
[TypeScript] interface를 이용한 타입 지정
❓ interface 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다. ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다. 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않는다. 바로 예제로 살펴보자 ❗ interface 사용법 type BoxType = { color :string..
[TypeScript] 리터럴 타입 (Literal Types)에 대하여
❓ 리터럴 타입 (Literal Types) TypeScript에 문자열이나 숫자에 정확한 값을 지정하여 더 엄격한 타입을 지정하는 것. ✔ TypeScript에서 const 변수의 한계점에 대해 업그레이된게 리터럴 타입이라고 보면 됨 ❗ String Literal Types (문자형) let name_literal :"JiWoo" | "Jihyun"; console.log(name_literal = "JiWoo") // "JiWoo" console.log(name_literal = "JiWoo1") // error 해당 예제를 보면 문자형 리터럴 타입이 무슨 뜻인지 바로 이해가 갈 것이다. 간단하게 해석해보자면 name_literal에는 "JiWoo" 나 "JiHyun"이라는 문자열만 지정이 가능하게끔..
[TypeScript] 타입 확정하기 Narrowing & Assertion
❗ Narrowing 타입스크립트 프로그램에서 변수는 덜 정확한 타입에서 더 정확한 타입으로 변할 수 있다. 이 과정을 type narrowing이라고 한다, 간략하게 말하면 타입의 범위를 좁히는 것이다. 타입 에러를 피하기 위해 아래처럼 type narrowing을 이용할 수 있다. // ===== narrowing X ===== function narrowExample (x: number|string){ return x+1 } narrowExample(123) //error // ===== narrowing ===== function narrowExample (x: number|string){ if(typeof x === 'string'){ return console.log(x + '1') //123..
[Typescript] 기본 필수 문법
기본 타입 지정 let person_name_str :string = "KimJiWoo"; // 문자열 let person_name_array :string[] = ["KimJiWoo"]; // 문자열로 이루어진 array let person_name_union_array :(string | number)[]= ["Kim", 12, "HI"]; // 문자열과 숫자로 이루어진 array let person_name_obj :{name : string} = {name : "KimJiWoo"}; // 문자열로 이루어진 object let person_name_obj_str :{name : string | number} = {name : "Kim"}; // 문자열과 숫자로 이루어진 object let perso..