front-end/TypeScript 7

[TypeScript] AdvancedType - 2 (Type Casting)

Type Casting 타입스크립트가 직접 감지하지 못하는 특정 타입의 값을 타입스크립트에게 알려줄 수 있다 ex) DOM querySelector로 요소 하나를 잡는 것은 타입스크립트가 그 요소의 타입을 추론할 수 있게 해준다. const paragraph = document.querySelector('p'); // const paragraph: HTMLParagraphElement | null 그러나 타입스크립트는 HTML 파일을 살펴보고 분석하는 행위를 못한다 위 연산의 결과가 HTMLParagraphElement 이거나 null 이라고 추론한것 뿐이다 그래서 Id 값이나 class 값으로 요소를 잡아도 어떤 요소인지는 정확하게 알지 못하고 HTML 요소라고만 추론한다 const paragraph ..

[TypeScript] AdvancedType - 1

Intersection Intersection은 Union과 관련은 있는데, 사용방법이 다르다 Intersection은 객체 타입을 하나로 결합하는데 사용된다. 그래서 기존 객체 타입들을 합쳐서 필요한 모든 특성을 갖춘 타입을 하나 얻을 수 있다. & 로 타입끼리 연산시키면 된다. 예를 들어서 Person & Serializable & Loggable 은 세 타입들을 모두 포함하는 객체 타입이다. 그래서 이 타입의 객체가 세 타입의 모든 특성을 다 갖고 있다는 것을 의미한다. 즉, Person, Serializable, Loggable 세가지 타입의 모든 속성을 가지고 있어야 한다. 예시 interface Admin { name: string; privileges: string[]; }; interfac..

[TypeScript] Interface

인터페이스 : 객체의 구조를 설명하는데 사용하는 사용자 정의 타입 interface Person { name: string; age: number; greet(phrase: string): void; } let user1: Person; user1 = { name: 'Max', age: 30, greet(phrase: string) { console.log(phrase + this.name); } }; 사용자 정의 타입을 써도 똑같을텐데 왜 인터페이스를 쓸까? 인터페이스와 사용자 정의 타입은 완전히 같지는 않다. 인터페이스는 객체의 구조를 설명하기 위해서만 사용한다. 인터페이스를 정의하는 것은 객체라는 것을 명시하는 행위다. 또한, 클래스가 인터페이스를 준수해야하는 약속처럼 사용할 수 있다. 클래스 이름..

[TypeScript] 기본타입 (any, unknown)

any any타입에는 모든 종류의 값을 다 저장할 수 있다. let anyType: any; anyType = 1; anyType = true; anyType = ["sports",1]; 근데 아래처럼 하게되면 오류가 난다 ley anyArray: any[]; anyArray = 1; // 배열이니까 단점이 너무 크다. 타입스크립트를 쓰는 이유가 사라지는 것이다. any타입을 쓰는 곳은 타입스크립트 컴파일러가 작동하지 않는다. 어떤 값이나 종류의 데이터가 어디에 저장될지 모르겠을때 대비하려고 쓸 수 있다. unknown any와는 다른 타입이다. 사용자가 뭘 입력할지 알 수 없기 때문에 unknown 인것이다. 에러 발생없이 어떤 값이든 저장할 수 있다. let unknownInput: unknown; ..

[TypeScript] 기본타입 (함수, 반환, 콜백)

returnType 함수의 반환값 타입도 중요하다. 타입스크립트는 함수의 반환 타입도 추론한다. function add(n1: number, n2: number) { return n1 + n2; } // function add(n1: number, n2: number): number 위 함수의 경우 number로 반환타입이 추론되었다. 인자들에게 toString 메서드를 적용한다고 해보자 function add(n1: number, n2: number) { return n1.toString() + n2.toString(); } // add(n1: number, n2: number): string 반환타입이 string으로 바뀌었음이 확인된다. 반환타입을 만약 지정하고 싶다면, 아래처럼 반환하고자 하는 타..

[TypeScript] 기본타입 (union, literal, typeAlias)

Union 문자열이나 숫자를 인자로 두개 받아서 두 값을 합하는 함수를 작성하려 한다. 즉, 반환은 문자열일수도 있고 숫자일수도 있다. 함수의 기능은 문자열 연결도 되고 숫자 연산도 되어야 한다. 이때 union타입을 사용할 수 있다. function combine(input1: number|string, input2: number|string){ const result = input1 + input2; return result; } 위 코드는 문제가 있다 -> '+' 연산자를 'string | number' 및 'string | number' 형식에 적용할 수 없습니다. 즉, string | number 타입 자체를 union이라고 이해는 하지만, 어떤 타입들이 모여 Union을 이루고 있는지는 분석하..

[TypeScript] 기본타입 (객체, 배열)

자바스크립트 : 동적 타입 언어 타입스크립트 : 정적 타입 타입추론 특정 변수나 상수에 어떤 타입을 사용했는지 타입스크립트가 식별한다 선언을 하면서 아무것도 할당하지 않는다면 어떤 값을 할당할지 알려주는 것이 좋다 값을 할당하게 되면 타입 추론기능이 있으니까 굳이 타입을 명시해주지 않는게 좋다고 한다. 한번 값을 할당하면 타입 추론으로 타입이 지정되니까 다른 타입을 재할당 할때 오류로 지적한다 function add(n1: number, n2: number, showResult: boolean, phrase: string) { const result = n1 + n2; if (showResult) { // console.log(phrase + n1 + n2); // 이러면 버그가 나타남 // phrase..