👨‍💻 My_Archive

📃 Front-End/TypeScript

타입 단언(Type Assertion)

타입스크립트 보다 개발자가 더 타입을 잘 알고 있다는 가정을 하고 '개발자가 정의한 타입으로 간주를 해라' 라는 의미 입니다. as 키워드 사용한 후 타입 적기 let a; // 타입 추론에 의해 any 타입 a = 20; a = 'a'; let b = a; // a의 타입이 바뀌고 할당을 하여도 아직 타입 추론에 의해 a: any 타입 // 맨 처음 할당한 타입의 값이 그대로 b에 들어가서 b: any 타입 개발자가 보는 관점에서는 a 가 string 이 될 것이라고 알 수 있습니다. 하지만 타입스크립트 관점에서는 그렇지 않습니다. 아래와 같이 사용하면 타입이 개발자의 관점으로 단언이 됩니다. let b = a as string; a 라는 것은 string 으로 간주 합니다. 즉, b 의 타입은 str..

📃 Front-End/TypeScript

타입 추론(Type Inference)

타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미합니다. ✔ 타입 추론의 기본 let x = 3; 위와 같이 x에 대한 타입을 따로 지정하지 않더라도 일단 x는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어납니다. ✔ 인터페이스와 제네릭을 이용한 타입 추론 interface Dropdown{ value: T; title: string; } let shoppingItem: Dropdown = { value: 'abc', title: 'hello' } 제네릭을 이용해 string 을 넘겼기 때문에, value 의 타입은 string이 됩니다. interface Dro..

📃 Front-End/TypeScript

제네릭(Generics)

✔ 사전적 정의 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 제네릭(Generics) 정의 ❓ 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것 ✔ 기본적인 문법 키워드 사용 // JS 함수 사용 시 function logText(text){ console.log(text); return text; } logText(10); // 숫자 logText('hello'); // 문자열 logText(true); // 진위값 // TS - 제네릭 function logText(text: T):T{ console.log(text); return text; } logT..

📃 Front-End/TypeScript

타입스크립트의 클래스

✔ 자바스크팁트의 클래스 // 기존의 생성자 함수 function Person(name, age){ this.name = name; this.age = age; } var seho = new Person('세호', 30) // 클래스 class Person{ // 클래스 로직 constructor(name, age){ console.log('생성 되었습니다'); this.name = name; this.age = age; } } var seho = new Person('세호', 30); console.log(seho) 위의 두 개의 코드는 같습니다. ✔ 타입스크립트의 클래스 문법적인 차이가 있습니다. class Person { name: string; // class 안에서만 사용하고 싶으면 앞에 pri..

📃 Front-End/TypeScript

Enum ( 이넘 )

특정 값들의 집합을 의미하는 자료형 ✔ 숫자형 이넘 enum Shoes{ Nike, // 0 Adidas // 1 } let myShoes = Shoes.Nike; console.log(myShoes); // 0 별도의 값을 지정하지 않으면 숫자형으로 취급 합니다. enum Direction { Up = 1, Down, Left, Right } // 결과 Up - 1 Down - 2 Left - 3 Right - 4 ✔ 문자형 이넘 enum Shoes{ Nike = '나이키', Adidas = '아디다스' } let myShoes = Shoes.Nike; console.log(myShoes);// '나이키' 예시 ✔ 사용하기 전 function askQuestion(answer: string){ if(a..

📃 Front-End/TypeScript

Union Type ( 유니온 타입 ) 과 Intersection Type

파라미터 또는 변수에 하나의 타입 이상을 사용할 수 있게 해주는 것 입니다. Union Type 예시 function logMessage(value: string){ console.log(value) } logMessage('hello'); logMessage(100); // number 타입이 들어오기에 오류 // 숫자를 포함시키고 싶으면 string -> any 로 바꾸면 된다.

📃 Front-End/TypeScript

Type Aliases ( 타입 별칭 )

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다. ✔ 사용하는 방법 // string 타입을 사용할 때 const name: string = 'capt'; // 타입 별칭을 사용할 때 type MyName = string; const name: MyName = 'capt'; ✔ 타입 별칭의 특징 ( 인터페이스와 비교 ) interface Person{ name: string; age: number; } type Person = { name: string; age: number; } let seho: Person ={ name: '세호', age: 30 } 타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는..

📃 Front-End/TypeScript

Interface ( 인터페이스 )

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서 반복되는 타입들을 모아서 하나의 인터페이스로 정의를 하여 사용 합니다. ✔ 변수에 활용한 인터페이스 사용할 때 반드시 인터페이스에 있는 속성을 정의해야 합니다. // 인터페이스 선언 interface User { age: number; name: string; } let hyunho: User = { age: 26, name: '현호' } ✔ 함수에 활용한 인터페이스 인자에 인터페이스를 적용 -> 특정 형식을 준수하는 데이터만 받겠다고 정의 합니다. interface User { age: number; name: string; } function getUser(user: User){ console.log(user); } cons..

HoHo.dev
'분류 전체보기' 카테고리의 글 목록 (17 Page)