일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 반복문
- 기초
- for of
- 변수
- 논리연산자
- flex-wrap
- properties
- flex
- 화살표함수
- 타입
- typeof
- 문자열
- 함수표현식
- 함수선언식
- for in
- 속성
- align-content
- flex-direction
- 비교연산자
- if else
- frontend
- for
- justify-content
- boolean
- 조건문
- javascript
- 프론트엔드
- 함수
- Methods
- ELSE
- Today
- Total
목록TypeScript (11)
하얀 코딩
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/v2oDn/btsiRGbhHrD/cX1NriASEacE7xGCkNreK0/img.png)
타입스크립트에서 제네릭(Generics)은 타입을 매개변수화하여 여러 다른 타입에 대해 재사용 가능한 코드를 작성하는 기능입니다. 제네릭을 사용하면 코드의 재사용성을 높일 수 있고, 타입 안정성을 유지하면서 다양한 타입에 대해 일반적인 동작을 수행할 수 있습니다. 제네릭은 타입스크립트의 강력한 기능 중 하나로, 많은 경우에 유용하게 사용됩니다. 1. 함수에서 Generics function identity(arg: T): T { return arg; } let result = identity("Hello"); 위의 예제에서 identity 함수는 T라는 제네릭 타입 매개변수를 가지고 있습니다. arg 매개변수와 반환 타입은 T 타입에 의존합니다. 이를 통해 함수 호출 시 인수의 타입과 반환 값의 타입이 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/badcv3/btsiPjHK3ur/kVgkYUoEXktSilMxwPK9vk/img.png)
타입스크립트에서 readonly 키워드는 읽기 전용 속성(Readonly Property)을 정의하는 데 사용됩니다. 읽기 전용 속성은 값의 할당 후에 변경되지 않도록 제한하는 역할을 합니다. 즉, 해당 속성은 초기화 시에만 값을 할당할 수 있고, 이후에는 수정할 수 없습니다. readonly는 객체의 불변성을 유지하고 실수로 속성을 수정하는 것을 방지하기 위해 사용됩니다. 1. interface에서 readonly interface Person { readonly name: string; age: number; } let person: Person = { name: "John", age: 25 }; person.name = "Alice"; // Error: 'name'은 읽기 전용입니다. person...
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bkpLT5/btsiM90jFGp/nYqHXBzzlKnpnRjEmKTUmk/img.png)
컴파일러에게 "나는 이 변수의 타입을 확신한다"고 알려주는 것을 의미합니다. 타입 단언은 변수 또는 표현식의 타입을 명시적으로 지정하는 방법으로 사용됩니다. 타입 단언은 두 가지 주요 형태로 사용될 수 있습니다. 1. angle-bracket 문법 2. as 문법 (angle-bracket) 문법 let value: any = "hello"; let length: number = (value).length; 위의 예제에서 value 변수는 any 타입으로 선언되었지만, 개발자는 이 변수가 실제로 문자열 타입을 가지고 있음을 확신합니다. 타입 단언을 사용하여 value 변수를 string 타입으로 캐스팅하고, length 변수에 문자열의 길이를 할당합니다. as 문법 let value: an..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/3S0tr/btsiU52VhXj/P3SnOdnaklOGFEGDrMt2oK/img.png)
타입 가드(Type Guard)는 타입스크립트에서 특정 타입을 확인하고 해당 타입에 대한 추가적인 동작을 수행하기 위해 사용되는 메커니즘입니다. 타입 가드를 사용하면 컴파일러가 타입을 추론하고, 해당 타입에 따라 코드를 분기할 수 있게 됩니다. 이를 통해 더욱 안정적인 코드를 작성할 수 있고, 런타임 에러를 방지할 수 있습니다. 타입 가드를 사용하는 방법은 여러 가지가 있습니다. 일반적으로 typeof, instanceof, in 연산자, 사용자 정의 타입 가드 함수 등을 사용합니다. typeof function logValue(value: string | number) { if (typeof value === 'string') { console.log(value.toUpperCase()); } else..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/EuGw7/btsiX1FUXAd/oDmdhYIUQTlGDkCCCK4WlK/img.png)
Union " 또는 "의 의미를 가지고 있으며 기호는 ( | )로 표시 됩니다. let value: number | string; value = 10; // OK value = "hello"; // OK Intersection " 병합 "의 의미를 가지고 있으며 기호는 ( & )로 표시 됩니다. type Person = { name: string; age: number; }; type Employee = { companyId: number; role: string; }; type PersonEmployee = Person & Employee; 위의 예제에서 PersonEmployee는 Person과 Employee의 모든 속성을 갖는 타입이 됩니다. 따라서 PersonEmployee 타입의 변수는 nam..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dOu8yj/btsiWSWBeMf/ShykznNjx7OR9rY2YWOIkK/img.png)
type 타입스크립트에서 type 키워드는 사용자가 새로운 타입을 만들 수 있게 해주는 기능입니다. type은 기존 타입을 별칭(alias)으로 사용하거나, 복잡한 타입을 좀 더 간결하게 표현하는 데 사용됩니다. 간단한 예시로, string 타입을 가지는 Name이라는 새로운 타입을 만들 수 있습니다. type Name = string; let myName: Name = 'Alice'; // OK type User = { name: string; age: number; }; let user: User = { name: 'Alice', age: 25 }; // Ok 밑과 같이 유니언 타입, 인터섹션 타입 등 복잡한 타입을 만드는데도 type을 사용할 수 있습니다 type StringOrNumber = st..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/lr5KG/btsiPQyE2kX/6K01ddXlvWgOKJMOXKEkkk/img.png)
enum 타입스크립트의 enum은 특정 값들의 집합을 표현하는 데 사용되는 특별한 타입입니다. enum은 상수 값을 읽기 쉬운 이름으로 대체하여 코드를 더욱 명확하고 읽기 쉽게 만드는 데 도움이 됩니다. enum Color { Red, // Red === 0 Green, // Green === 1 Blue // Blue === 2 } let c: Color = Color.Green; enum에서 값을 지정하지 않으면, 첫 번째 값은 0으로 시작하고, 그 다음부터는 자동으로 1씩 증가합니다. 기본적으로 enum의 첫 번째 멤버는 0부터 시작하여 숫자 값을 가지지만, 이는 변경할 수 있습니다. enum의 멤버에 명시적으로 값을 할당할 수도 있습니다. enum Color { Red = 4, // Red ===..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/NtvHR/btsiJy0kbr5/Uq79NdKXXcr8fhBs2iLBO1/img.png)
object 타입스크립트에서 object 타입은 비원시적인 값(함수, 배열, 객체 등)을 나타냅니다. Primitive types (원시 타입) 아닌 나머지 값을 의미합니다. let obj: object; obj = { name: 'John Doe' }; // OK obj = [1, 2, 3]; // OK obj = () => console.log('Hello'); // OK obj = 42; // Error: Type '42' is not assignable to type 'object'. obj = 'Hello'; // Error: Type '"Hello"' is not assignable to type 'object'. obj = true; // Error: Type 'true' is not ass..