TypeScript 8

[TS] 유틸리티 타입(Utility Types)

💡 기본 타입을 조작하고 변환하는데 사용 Partial : 제네릭 타입 T의 모든 프로퍼티를 선택적으로 만들어주는 타입 Required : 제네릭 타입 T의 모든 프로퍼티를 필수로 만들어주는 타입 Readonly : 제네릭 타입 T의 모든 프로퍼티를 읽기 전용으로 만들어주는 타입 Record : 키의 타입이 K이고 값의 타입이 T인 객체를 나타내는 타입 Pick : 제네릭 타입 T에서 일부 프로퍼티만 선택하여 새로운 타입을 만드는 타입 Omit : 제네릭 타입 T에서 일부 프로퍼티를 제외한 새로운 타입을 만드는 타입 Exclude : 제네릭 타입 T에서 타입 U에 할당 가능한 모든 타입을 제외한 새로운 타입 NonNullable : 주어진 Type에서 null 또는 undefined를 제외한 타입 * k..

TypeScript 2024.03.06

[TS] 제네릭(Generic)

💡 함수, 클래스, 인터페이스 등을 작성할 때 타입을 매개변수로 전달하여 재사용성을 높인다. 💡 특정한 타입을 지정하지 않고 다양한 타입에서 동작하는 코드를 작성할 수 있다. function getSize(arr: T[]): number { return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); const arr2 = ["a", "b", "c"]; getSize(arr2); const arr3 = [false, true, true]; getSize(arr3); const arr4 = [{}, {}, {name: "Tim"}]; getSize(arr4); interface Mobile { name: string; price: number; option: ..

TypeScript 2024.03.06

[TS] 클래스(Class)

🔸 접근 제한자(Access Modifiers) public 기본값이며 별도로 명시하지 않아도 됨 어떤 클래스나 외부에서 자유롭게 접근 가능 private # 해당 클래스 내부에서만 접근 가능하도록 제한 protected 상속된 자식 클래스에서 접근 가능하지만 외부에서는 할 수 없음 readonly 읽기 전용으로 설정하여 초기화 후에는 값을 변경할 수 없음 🔸 생성자(constructor) : 객체가 생성될 때 초기화 작업을 수행하는 데 사용 🔸 static : 정적 멤버를 정의하는 데 사용 인스턴스에 속하지 않고 클래스 자체에 속함 this 키워드 사용 불가, 클래스명을 통해 접근 인스턴스에서도 접근할 수 있지만, 클래스명을 통해 사용 class Car { readonly name: string = "..

TypeScript 2024.03.06

[TS] 리터럴, 유니온/교차 타입

🔸 리터럴 타입 : 값 자체를 타입으로 지정 const : 상수(constant)를 선언할 때 사용 - 한 번 할당되면 값을 변경할 수 없음 let : 변수를 선언할 때 사용 - 값을 재할당할 수 있음 const userName1 = "Bob"; // const userName1: "Bob" let userName2 = "Tom"; // let userName2: string type Job = "police" | "developer" | "teacher"; interface User { name: string; job: Job; } const user: User = { name: "Bob", job: "developer", }; interface HighSchoolStudent { name: numbe..

TypeScript 2024.03.06

[TS] 함수

🔸 선택적 매개변수(optional parameters) : ? 함수의 매개변수 중에서 몇 개는 필수가 아니라 선택적으로 전달될 수 있는 것을 나타낸다. 선택적 매개변수와 기본 매개변수를 같이 사용할 때 선택적 매개변수가 기본 매개변수 앞에 위치하는 것은 허용되지 않는다. 함수를 호출할 때 어떤 매개변수가 생략되었는지를 명확히 구분하기 위함 선택적 매개변수를 앞에 사용하고 싶다면 undefined 사용 function hello(name: string, age?: number): string { // function hello(age: number | undefined, name: string): string { if(age !== undefined) { return 'Hello, ${name}. You..

TypeScript 2024.03.06

[TS] 인터페이스(Interface)

💡 클래스와 인터페이스를 사용하여 코드를 구조화하고 재사용성을 높일 수 있다. 💡 확장과 구현은 이러한 클래스와 인터페이스를 통해 상속과 다형성을 구현하는 데 사용된다. let user:object; user = { name : 'xx', age : 30 } console.log(user.name) // 오류 발생 - user에는 name 타입이 없다 type Score = 'A' | 'B' | 'C' | 'F'; interface User { name : string; age : number; gender? : string; // optional - 값이 있을수도 없을수도 있는 변수 readonly birthYear : number; // [grade:number] : string; [grade:num..

TypeScript 2024.03.06

[TS] 기본 타입

string : 문자 number : 숫자 boolean : 불리언 타입[], Array : 배열 let car:string = 'bmw'; let age:number = 30; let isAdult:boolean = true; let a:number[] = [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let week1:Array = ['mon', 'tue', 'wed']; Tuple : 배열과 비슷하지만 정해진 타입의 고정된 길이의 배열을 표현 // 튜플(Tuple) let b:[string, number]; b = ['z',1]; // b = [1,'z']; // 오류 발생 b[0].toLowerCase();..

TypeScript 2024.03.06

[TS] 타입스크립트를 쓰는 이유

💡 타입스크립트(TypeScript)란 마이크로소프트에서 개발한 프로그래밍 언어로, JavaScript의 상위 집합입니다. 즉, 타입스크립트 코드는 자바스크립트 코드로 변환될 수 있습니다. 그러나 타입스크립트는 정적 타입 시스템을 도입하여 변수, 매개변수 및 반환값에 명시적인 데이터 타입을 지정할 수 있습니다. 💡 타입스크립트의 장점 Javascript (동적언어) : 런타임에 타입 결정 / 오류 발견 Java, TypeScript (정적언어) : 컴파일 타임에 타입 결정 / 오류 발견 타입 안정성(Type Safety) : 타입스크립트는 정적 타입 언어로, 변수 및 함수 매개변수에 명시적인 데이터 유형을 정의할 수 있습니다. 이로써 코드의 안정성이 향상되며 런타임 오류를 줄일 수 있습니다. JavaSc..

TypeScript 2024.03.06