Typescript 16

[Hanaro] 22일차 / TypeScript (선언 파일과 구성 및 옵션, 타입 운영, 유틸리티 타입)

TypeScript - 선언 파일과 구성 및 옵션 global 전역 변수 import, export가 없거나 declare global이면 전역 전역 어디서나 import 없이 사용 가능 window 등 전역 객체에 타입 정의 가능 declare 오직 선언만 한다. 값(초기값)은 허용되지 않는다. (literal type은 가능) 타입 검사(Type Checker) lib 브라우저에서 실행되지 않는 경우 DOM, condole 등을 제거 skipLibCheck 사용되지 않은 소스에서의 선언은 선언 파일 타입 체크도 생략 strict noImplicitAny, strictNullChecks, strictFunctionTypes 모두 활성화 기타 checkJs with alloHs “extends”: “....

교육 (TIL)/Hanaro 2024.02.15

[TypeScript] Utility Types

TypeScript - 유틸리티 타입 Utility Types 타입 변환을 쉽게 하기 위하여 유틸리티 타입 제공 (전역 사용) Utility Types 종류 Awaited Promise 형태의 타입을 전달 받아서 해당 Promise가 반환하는 리턴값의 타입을 반환 Omit T 타입에서 2번째 인자로 전달한 U 유니온에 지정된 키만 프로퍼티로 갖지 않는 새로운 타입 반환 Pick T 타입에서 2번째 인자로 전달한 타입에 지정된 키만 프로퍼트로 갖는 새로운 타입을 반환 Partial T 타입의 일부 프로퍼티만 가질 수 있는 타입을 반환 Required T 타입의 모든 프로퍼티를 필수로 갖는 타입을 반환 Record K 키로, T 타입으로 하는 새로운 타입 반환 Parameters 함수 타입 T의 매개변수 타..

JS & TS/TypeScript 2024.02.15

[TypeScript] 선언 파일과 구성 및 옵션, 타입 운영

TypeScript - 선언 파일과 구성 및 옵션 global 전역 변수 import, export가 없거나 declare global이면 전역 전역 어디서나 import 없이 사용 가능 window 등 전역 객체에 타입 정의 가능 declare 오직 선언만 한다. 값(초기값)은 허용되지 않는다. (literal type은 가능) 타입 검사(Type Checker) lib 브라우저에서 실행되지 않는 경우 DOM, condole 등을 제거 skipLibCheck 사용되지 않은 소스에서의 선언은 선언 파일 타입 체크도 생략 strict noImplicitAny, strictNullChecks, strictFunctionTypes 모두 활성화 기타 checkJs with alloHs “extends”: “....

JS & TS/TypeScript 2024.02.15

[TypeScript] Generic

제네릭 함수 호출하는 방식에 따라 다양한 타입으로 작동하도록 의도한다. 함수의 기능이 똑같은데 매개변수의 타입과 반환하는 타입이 다를 때 제네릭 기법을 사용하여 한 개의 함수로 구현 가능 제네릭 함수 구현 function 제네릭함수(arg: T): T { return arg; } 함수명 뒤에 를 추가하고, T를 매개변수의 타입 또는 반환 타입으로 설정 가능 꼭 로 작성할 필요는 없고 다른 문자열도 사용 가능 (대부분 Type의 T로 작성) 제네릭 함수 호출 안에 인수의 타입을 작성한다. ex) let 변수1 = 제네릭함수(123); ex) let 변수2 = 제네릭함수(’ABC’); 다중 함수 타입 매개변수 구현 function 다중제네릭함수 (first: First, second: Second_ { re..

JS & TS/TypeScript 2024.02.15

[TypeScript] 타입 제한자

top 타입 (any, unknown) top 타입은 모든 타입이 할당 가능한 타입 any TS가 해당 값에 할당 가능성 또는 멤버에 대해 타입 검사를 수행하지 않도록 명시적으로 지시 (타입 아직 미정의) const anyParam = (value: any) ⇒ { … } 위 함수는 오류는 발생하지 않지만 런타임 에러 발생 unknown unknown 타입 값의 속성에 직접 접근할 수 없고 top 타입이 아닌 타입에는 할당할 수 없다. const anyParam = (value: unknown) ⇒ { … } instanceof나 typeof를 사용하여 타입을 narrowing 하거나 타입 어서션을 통해 값의 타입이 제한된 경우에 해당 타입이 갖는 속성에 접근할 수 있다. const anyParam = ..

JS & TS/TypeScript 2024.02.15

[Hanaro] 20일차 / TypeScript (class, 타입 제한자, Generic)

TypeScript - 클래스 클래스 메서드 독립 함수와 동일한 방식의 메서드 매개변수 타입이나 기본 값을 지정하지 않으면 any 타입을 기본 값으로 가진다. 메서드를 호출하려면 허용 가능한 수의 인수가 필요하다. 재귀 함수가 아니라면 대부분 반환 타입 유추 가능 메서드 호출 시 올바른 타입의 인수가 올바른 수로 제공되는지 확인하기 위해 타입 검사 실시 클래스 속성(attribute) 클래스의 속성을 읽거나 쓰려면 명시적으로 선언해야 한다. 클래스 속성 - method 모든 prop은 초기화 또는 정의해야 한다. (! 또는 ?는 제외) 클래스 속성 - 초기화 검사 StrictNullCheck On에서 TS는 undefined 타입으로 선언된 각 속성이 생성자에서 할당되었는지 확인 초기화하지 않았다는 것은..

교육 (TIL)/Hanaro 2024.02.15

[TypeScript] Class

클래스 메서드 독립 함수와 동일한 방식의 메서드 매개변수 타입이나 기본 값을 지정하지 않으면 any 타입을 기본 값으로 가진다. 메서드를 호출하려면 허용 가능한 수의 인수가 필요하다. 재귀 함수가 아니라면 대부분 반환 타입 유추 가능 메서드 호출 시 올바른 타입의 인수가 올바른 수로 제공되는지 확인하기 위해 타입 검사 실시 클래스 속성(attribute) 클래스의 속성을 읽거나 쓰려면 명시적으로 선언해야 한다. 클래스 속성 - method 모든 prop은 초기화 또는 정의해야 한다. (! 또는 ?는 제외) 클래스 속성 - 초기화 검사 StrictNullCheck On에서 TS는 undefined 타입으로 선언된 각 속성이 생성자에서 할당되었는지 확인 초기화하지 않았다는 것은 undefined이므로 생성자..

JS & TS/TypeScript 2024.02.13

[TypeScript] Interface

속성 타입 선택적 속성 ? 물음표 interface Book { author**?**: string; pages: number; } 읽기 전용 속성 readonly interface Page { **readonly** text: string; } 호출 시그니처 (call signature) 함수를 호출하는 방법에 대한 타입 시스템 설명 매개변수의 목록과 반환 타입을 포함한다. 인덱스 시그니처 (index signature) 임의의 key를 받고 해당 key에 대한 value의 타입 지정 인덱스 시그니처를 사용하여 프로퍼티의 존재 유무를 알 수 없다. 중첩 인터페이스 (Nested Interface) 속성의 타입이 다른 인터페이스나 객체 타입을 가질 수 있다. interface 확장(extends) int..

JS & TS/TypeScript 2024.02.13

[TypeScript] Array, Tuple

배열(Array) let 배열이름: 데이터타입[]; 의 형태 배열과 함수 타입 string 배열을 반환하는 함수 let getNames: () => string[]; string을 반환하는 함수 배열 let nameGetters: (() => string)[]; 유니언 타입 배열 string 또는 number 배열 let stringOrArrayOfNumber: string | number[]; string 또는 number를 요소로 갖는 배열 let ArrayOfStringOrNumber: (string | number)[]; noUncheckedIndexedAccess 이 옵션을 true로 설정하면 인덱스 시그니처에 undefined를 포함시킨다. 인덱스 시그니처는 인터페이스 객체가 임의의 키를 받고..

JS & TS/TypeScript 2024.02.13

[TypeScript] Function

함수 매개변수 타입 애너테이션으로 함수 매개변수의 타입 선언 ex) function add(a, b) { return a + b; } // 아래 같이 변경 function add(a : number, b: number) { return a + b; } 타입스크립트는 함수에 선언된 모든 매개변수가 필수라고 가정한다. 선택적 매개변수 타입 애너테이션의 : 앞에 ?를 추가해서 매개변수가 선택적이라고 표시 ex) const introduce = (name:string, **height?:number**) => { console.log(`이름 : ${name}`); if(typeof height === 'number'){ // 내로잉을 통해서 타입 좁혀줌 console.log(`키 : ${height + 10}`..

JS & TS/TypeScript 2024.02.13