[ 3D Web : Front&Back_Type Script ]
타입스크립트 : 타입 선언의 종류들 정리하기.
∇ 타입스크립트 : '타입 선언' 정리하기.
목 차
1. 타입 : Boolean
2. 타입 : Number
3. 타입 : String
4. 타입 : Array
5. 타입 : Tuple
6. 타입 : Enum
7. 타입 : Object
8. 타입 : Any
9. 타입 : Unknown
10. 타입 : Null // Undefined
11. 타입 : Never
12. 타입 : Void
13. 타입 : Literal
14. 타입 : Union
15. 타입 : Intersection
16. 타입 : Type Alias
17. 타입 : Interface
18. 타입 : Generic
19. 타입간 대입 가능한 표.
Ⅰ. 타입 : Boolean
※ 단순하게, 참(true) / 거짓(false) 값을 판명.
let isBoolean: boolean;
isBoolean = true;
let isDone: boolean = false;
Ⅱ. 타입 : Number
※ 정적 타입이라 해서 C / Java 처럼 int / float / double 타입은 존재하지 않고,
JavaScript의 number 자료형을 그대로 사용합니다.
+ 16진수 / 10진수/ 2진수/ 8진수 리터럴도 지원합니다.
let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d; // 61453
let binary: number = 0b1010; // 10
let octal: number = 0o744; // 484
let infinity: number = Infinity;
let nan: number = NaN;
function plus(num1: number, num2: number): number {
return num1 + num2;
}
Ⅲ. 타입 : String.
※ 작은 따옴표(,) / 큰 따옴표(") 뿐만 아니라, ES6의 템플릿 문자열도 string 타입에 포함 됩니다.
let red: string = 'Red';
let green: string = "Green";
let yourColor: string = 'Your color is' + green;
let myColor: string = `My color is ${red}.`;
function strings(str1: string, str1: string): string {
return str1 + str1;
}
Ⅳ. 타입 : Array.
※ 배열 타입은 두 가지 방법으로 쓸 수 있습니다.
1. 배열 요소들을 나타내는 '타입' 뒤에 []를 쓰는 방법.
2. Array <> 배열 타입을 사용하는 방법.
let fruits: string[] = ['Apple', 'Banana', 'Mango'];
// or
let fruits: Array<string> = ['Apple', 'Banana', 'Mango'];
// 오직 숫자 아이템만 허용
let nums:number[] = [100, 101, 102];
// 오직 문자 아이템만 허용
let strs:string[] = ['apple', 'banana', 'melon'];
// 오직 불리언 아이템만 허용
let boos:boolean[] = [true, false, true];
// 모든 데이터 타입을 아이템으로 허용 (any 타입 - 뒤에서 배움)
let someArr: any[] = [0, 1, {}, [], 'str', false];
// 특정 데이터 타입만 아이템으로 허용 (union 타입 - 뒤에서 배움)
let selects:(number | string)[] = [102, 'apple'];
// 나머지 매개변수(스프레드 연산자) 를 이용한 배열 반환 함수
function getArr(...args: number[]): number[] {
return args;
}
getArr(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
Ⅴ. 타입 : Tuple.
※ 튜플은 배열의 서브타입 입니다.
->> "튜플" 이라는 용어가 생소할지도 모르지만, "크기와 타입이 고정된 배열" 이라고 이해하면 됩니다.
ex) RGB 색상을 표현하기 위한 튜플
let rgbColor: [number, number, number] = [255, 255, 0];
++ "항상 정해진 갯수의 요소"를 가져와야 하는 배열을 지정해서 응용할 수도 있습니다.
let x: [string, number]; // 튜플 타입으로 선언
x = ["hello", 10]; // 성공
x = [10, "hello"]; // 오류 (원소 타입이 안맞음)
x = ["hello", 10, 99]; // 오류 (원소 갯수가 안맞음)
let user: [number, string, boolean] = [1234, 'HEROPY', true];
console.log(user[0]); // 1234
console.log(user[1]); // 'HEROPY'
console.log(user[2]); // true
/* 2차원 튜플 */
let users: [number, string, boolean][];
// or
let users: Array<[number, string, boolean]>;
users = [[1, 'Neo', true], [2, 'Evan', false], [3, 'Lewis', true]];
++ 타입 뿐만 아니라 '값' 자체를 고정시킬 수도 있습니다. (강한 타입 지정)
/* 타입 뿐만 아니라 값 자체를 고정 */
let tuple: [1, number];
tuple = [1, 2];
tuple = [1, 3];
tuple = [2, 3]; // Error - TS2322: Type '2' is not assignable to type '1'.
++ 단, 유의할점은 '튜플'은 "정해진 타입의 고정된 길이 배열" 을 표현하지만, 이는 "할당(Assign)" 에만 국한됩니다.
- " .push() " 혹은 " .splice() " 등을 통해 값을 추가하는 행위는 가능합니다.
let tuple: [string, number];
tuple = ['a', 1];
tuple = ['b', 2];
tuple.push(3);
console.log(tuple); // ['b', 2, 3];
tuple.push(true); // Error - 그렇다고 해서 튜플에 정의되지 않는 타입을 넣을수는 없다.
// push() 함수를 사용하여 요소를 추가하는 경우 처음 할당된 값의 타입과 정확히 일치해야 한다.
Ⅵ. 타입 : Enum.
※ Enum은 C 혹은 Java와 같은 언어를 사용하면 한번쯤 들어보는 흔하게 쓰이는 타입으로,
특정 값(상수)들의 집합을 의미합니다.
++ 튜플 타입이 특정한 타입이나 값을 고정하는 배열이라면,
Enum은 "특정 값을 고정하는 또 다른 독립된 자료형" 이라고 보면 됩니다.
// 상수 집합
enum Avengers { SpiderMan, IronMan, Thor, Hulk }
let hero: Avengers = Avengers.SpiderMan; // 0
++ enum은 인덱스 번호로도 접근 가능합니다.
// 시스템에서는 { SpiderMan = 0, IronMan = 1, Thor = 2, Hulk = 3 }
//이런식으로 내부적으로 인덱싱이 자동으로 되어있다고 이해하면 된다.
enum Avengers { SpiderMan, IronMan, Thor, Hulk }
let hero: Avengers = Avengers[0];
++ 필요할 때, Enum의 인덱스를 유저 편의로 변경하여 사용 가능합니다.
// 직접 인덱스 번호를 정한다면, 시스템에서는 { SpiderMan = 2, IronMan = 3, Thor = 4, Hulk = 5}
// 이런식으로 내부적으로 인덱싱이 정해진 숫자 이후로 순차적으로 증가한다고 이해하면 된다.
enum Avengers { SpiderMan = 2, IronMan, Thor, Hulk }
let hero: Avengers = Avengers[2]; // SpiderMan
let hero: Avengers = Avengers[5]; // Hulk
Ⅶ. 타입 : Object.
※ JS에서의 'object' 는 객체 뿐만 아니라 배열, 함수 까지 'object'로 포함합니다.
※ TS에서도 마찬가지로
기본적으로 typeof 연산자가 "object"로 반환하는 모든 타입을 의미합니다.
정확히 number, string, boolean, bigint, symbol, null, 또는 undefined가 아닌 나머지를 의미
let obj: object = {};
let arr: object = [];
let func: object = function () {};
let nullValue: object = null;
let date: object = new Date();
-->> Object는 여러 타입의 상위 타입으로 인식되기 때문에,
TS에서 object를 그대로 타입으로 쓰기에는 문제가 많습니다.
++ object 타입에 객체값을 주고 실제로 조회하면 오류가 발생.
const player: object = { name: 'nico' };
player.name; // Error
※ 정말 객체에 타입을 지정해주고 싶다면,
객체 속성(Properties)들에 대한 타입을 개별적으로 지정하는 식으로 사용하면 됩니다.
let userA: { name: string, age: number };
userA = {
name: 'HEROPY',
age: 123
};
let userB: { name: string, age: number };
userB = {
name: 'inpa',
age: false, // Error
email: 'inpa@naver.com' // Error
};
이렇게 쓰면, 가독성 이슈가 발생.
- 극복을 위해서 TS는 " type 리터널 " 이라고 불리우는 "alias" 기능과 "interface" 문법을 활용합니다.
§alias
// type alias
type IUser = {
name: string,
age: number
}
let userA: IUser = {
name: 'HEROPY',
age: 123
};
let userB: IUser = {
name: 'inpa',
age: false, // Error
email: 'inpa@naver.com' // Error
};
§interface
// interface
interface IUser {
name: string,
age: number
}
let userA: IUser = {
name: 'HEROPY',
age: 123
};
let userB: IUser = {
name: 'inpa',
age: false, // Error
email: 'inpa@naver.com' // Error
};
Ⅷ. 타입 : Any.
※ "Any" 타입은 단어 의미 그대로 모든 타입에 대해서 허용한다는 의미입니다.
== 우리가 JS에서 사용하던 변수의 타입이 사실 'any'라고 봐도 무방.
- any 타입이 존재하는 이유는,
프로덕트를 만들 때 알지 못하는 타입을 표현해야 하는 경우가 존재할 수 있기 때문입니다.
-->> ex) 유저로부터 받은 데이터나, '서드 파티 라이브러리' 같은 동적 컨텐츠에서 변수나 함수를 다룰 때
알수 없는 타입이 존재하는 경우에 유용.
let any: any = 123;
any = 'Hello world';
any = {};
any = null;
let list: any[] = [1, true, "free"];
list[1] = 100;
// 명시적으로 any 타입 지정
let product_id: any = 124981;
product_id = 'p9023412'; // any 유형이 설정되었으므로 어떤 유형도 값으로 할당 가능
// 암시적으로 any 타입 지정
let product_id;
product_id = 124981;
product_id = 'p9023412';
☆ 주의 ! : any 타입을 남용해서 사용하면 안됩니다.
( 그럴거면, JS를 쓰쇼..)
- 타입스크립트 컴파일의 보호장치를 읽어버리게 됩니다.
const a: any[] = [1, 2, 3, 4]; // 배열
const b: any = true; // 불리언
a + b; // 배열과 불리언을 더했는데 컴파일이 허용하고 있다..
강한 타입 시스템의 장점을 유지하기 위해 Any 사용을 엄격하게 금지하려면, tsconfig에 컴파일 옵션
"noImplicitAny": true를 통해 Any 사용 시 에러를 발생시킬 수 있습니다.
Ⅸ. 타입 : Unknown.
※ "Unknown" 타입은 Un 접미어 때문에 부정적인 뜻으로 보이지만,
그냥 any와 같다고 생각하면 됩니다.
== 말 그대로, unKnown은 '알 수 없는 타입'을 의미하며, any와 같이 모든 데이터 타입을 받을 수 있습니다.
◎ any와 unknown을 구분한 이유는??
1. any는 어떤 것이든지 타입을 허용한다는 뜻.
2. unknown은 알 수 없다, 모른다의 어감이 강함.
★ 이 둘의 차이점은 "엄격함" 입니다.
ex)
any타입의 경우, number 타입의 데이터를 넣고 string 타입의 메소드 length를 사용하는 경우에
어떠한 에러를 발생시키지 않고 그냥 undefined를 반환합니다.
let value : any = 10;
console.log(value.length); // undefined
이와 달리,
unknown 타입은 any 타입과 동일하게 모든 값을 허용하지만,
할당된 값이 어떤 타입인지를 모르기 때문에 함부로 연산을 할 수 없다는 특징을 가집니다.
( 에디터 차원에서 에러를 띄워줌 )
let valueNum: unknown = 10;
let valueStr: unknown = 'Test';
console.log(valueNum.length); // 문제 발생
console.log(valueStr.length); // 문제 발생
이럴 경우, typeof 연산자를 통해서 타입을 검사함으로서 해결 가능
☆ any 대신, unknown 타입을 사용하면, 체크를 해야 되는 코드는 많아지겠지만,
사전에 문제가 되는 부분을 방지할 수 있으므로 any 타입에 비해 안정적인 앱을 개발 가능합니다.
Ⅸ. 타입 : Null / Undefined
※ JS에서도 undefined가 하나의 자료형이자 값이었던 것 처럼,
TS에서도 null 과 undefined 타입이 존재합니다.
let nullable: null = null;
let undefinedable: undefined = undefined;
- 기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입으로 치부됩니다.
== null 과 undefined를 모든 타입에 할당할 수 있다는 것을 의미합니다.
*단, tsconfig.json에서 'strick' 모드가 아닐경우에만 가능합니다.
/* strick 모드가 아닐경우에만 대입이 가능함 */
let num: number = undefined;
let str: string = null;
let obj: { a: 1, b: false } = undefined;
let arr: any[] = null;
let und: undefined = null;
let nul: null = undefined;
let voi: void = null;
컴파일 옵션인 --stricks이나 --strictNullChecks 를 사용하면, null과 undefined는 오직 any와 각자 자신들
타입에만 할당 가능하게 됩니다. (예외적으로 undefined는 void에 할당 가능합)
이 옵션은 불특정한 많은 일반적인 에러를 방지하는 데 도움을 주니, 가능한 경우 --strictNullChecks를 사용할 것을
권장하는 편입니다.
◎ stricNullChecks 컴파일 옵션.
- tsconfig.json에서 컴파일 옵션을 true로 줬을 경우, 일반적인 타입 변수에 null을 할당 불가능 !
{
"strictNullChecks": true, /* 엄격한 null 검사 사용 */
}
let assign_name:string = null; // [오류] [ts] 'null' 형식은 'string' 형식에 할당할 수 없다.
if (!assign_name) {
assign_name = '미네랄';
}
Ⅹ. 타입 : Never
※ never 타입은 'number' 나 'string' 처럼 특정 종류의 자료형을 담기 위한 타입이 아닙니다.
※ never 타입은 타입스크립트에서 잘못된 것을 알려주기 위한 키워드로써,
단어 그대로 "절대 발생할 수 없는 타입"을 나타낸다고 보면 됩니다.
** 보통 다음과 같이 빈 배열을 타입으로 잘못 선언한 경우, 'never'를 볼 수 있습니다.
- never는 에러를 반환하는 함수 표현식에서, "항상 오류를 발생" 시키거나
"절대 반환하지 않는 반환 타입으로도 쓰일 수 있습니다.
// 에러를 발생시키는 커스텀 never 타입 함수를 생성
function error(message: string): never {
throw new Error(message); // 함수는 리턴되지 않고 에러를 throw함
}
function fail() {
return error("Something failed"); // 커스텀 에러함수 호출
}
const result = fail(); // 반환 타입이 never로 추론된다.
※ never 타입 역시도, null이나 undefined처럼 모든 타입에 할당이 가능한 허위 타입입니다.
: 하지만, ! 반대로 어떤 타입도 never에 할당할 수 없습니다(never 자신은 제외)
function getError(): never {
throw new Error('ERROR');
}
let never_type: never;
never_type = 99; // 오류 발생: 숫자 값을 never 타입 변수에 할당할 수 없다.
// 함수의 반환 값이 never 타입 이기 때문에 오류가 발생하지 않는다.
never_type = getError();
ⅩⅠ. 타입 : Void
※ void 라는 단어는 C나 JAVA에서, 함수에서 return 값이 없을 때 사용하는 경우가 있는데
이때 사용하는 void가 이 void 타입이 맞습니다.
※ void는 어떤 타입도 존재할 수 없음을 나타내기 때문에, any의 반대 타입 같다고 볼 수 있습니다.
== void는 보통 함수에서 반환 값이 없을 때, 반환타입을 표현하기 위해 쓰인다고 보면 됩니다.
// return 값이 없는 함수
function hello(n: number): void {
let sum: number = n + 1;
}
const hi: void = hello(1); // 값을 반환하지 않는 함수는 실제로는 undefined를 반환
console.log(hi); // undefined
++ 만일, " void "를 함수가 아닌 변수 타입으로 정의한다면,
void 타입 변수에는 " undefined " 와 "null"만 할당이 가능해집니다.
== void를 타입 변수로 선언하는 것은 유용하지 않음. !
let unusable: void = undefined;
unusable = null; // 성공, tsconfig에서 strictNullChecks 컴파일 옵션을 사용하지 않을때만
ⅩⅡ. 타입 : Literal
※ 타입이라고 해서 number, string, Array 같은 자료형만을 넣는다고 생각하겠지만,
"문자열과 숫자에 한해서 직접 값 자체를 타입으로도 선언" 이 가능합니다.
∇ 숫자 리터럴 타입 ( Numeric Literal Types )
타입스크립트의 타입은, 자료형 뿐만 아니라 "값 자체(숫자와 문자 한정) " 를 타입으로 지정할 수 있습니다.
=== "타입은 웬만하면 아주 정확하게 명시" 하는 것이 TS의 근본이기 때문입니다.
const num: 3 = 3;
const num = 3; // 타입 생략
∇ 문자열 리터럴 타입 ( String Literal Types )
: 문자열 리터널 타입은 문자열에 값을 정확하게 지정할 때 사용됩니다.
type Easing = 'ease-in' | 'ease-out' | 'ease-in-out';
function animate(dx: number, dy: number, easing: Easing) {
if (easing === 'ease-in') {
// ...
} else if (easing === 'ease-out') {
} else if (easing === 'ease-in-out') {
} else {
// null이나 undefined를 전달하면 필터링 실행
}
}
animate(0, 0, 'ease-in');
animate(0, 0, 'uneasy'); // 오류: "uneasy"는 여기서 허용하지 않습니다
ⅩⅢ. 타입 : Union
※ "2개 이상의 타입을 허용하는 경우" , 이를 "유니언(Union)" 이라고 합니다. [ OR의 의미로도 쓰임 ]
" | " 를 활용해서 타입을 구분하며, 괄호는 단일 타입일 때는 안써도 되지만, 배열일 경우는 씌워야합니다.
let union: string | number;
union = 'Hello type!';
union = 123;
union = false; // Error - TS2322: Type 'false' is not assignable to type 'string | number'.
// 배열에 문자열과 넘버만을 허용하는데 튜플과 달리 자유로움
// 배열 타입을 UNION으로 표현할때 괄호로 묶어 표현 안그러면 string | number[] 이런식으로 됨
let array: (string | number)[] = ['Apple', 1, 2, 'Banana', 'Mango', 3];
// Or
let array: Array<string | number> = ['Apple', 1, 2, 'Banana', 'Mango', 3];
function padLeft(value: string, padding: boolean | number) {
// ...
}
let indentedString = padLeft("Hello world", true);
☆ Union 태그 주의할점.
ex) introduce() 함수의 '파라미터 타입에 "Person" , "Developer" 타입별칭들로 유니온으로 합쳤습니다.
type Person = {
name: string;
age: number;
}
type Developer = {
name: string;
skill: string;
}
function introduce(someone: Person | Developer) {
someone.name; // O 정상 동작
someone.age; // X 타입 오류
someone.skill; // X 타입 오류
}
- 유니온 타입 or 기능도 된다고 생각해서, 타입 Person도 되고, Developer도 될테니까
함수 안에서 각 인터페이스(person, developer)에 담겨있는 속성들인 age나 skill을 사용 가능할거라 생각하겠지만
++ TS의 관점에서 introduce() 함수를 호출하는 시점에서
person타입이 올지, Developer타입이 올지 알 수 가 없기 때문에 에러가 발생합니다.
◇ 즉, tsc는 어느 타입이 들어오든 간에 오류가 안 나는 방향으로,
확실하게 타입을 추론해내는 특성이 있습니다. [ 항상 값이 확실해야 함 !]
==>> 위에 코드에선 결과적으로, 두 인터페이스가 공통적으로 가지고 있는 name에만 정상 접근이 가능합니다.
● 함수에서도 리턴값을 유니온으로 사용하게 되면, 에러가 발생합니다.
ex)
-- > 모든 경우의 수를 고려해서, x와 y의 매개변수에 'number'가 들어오느냐 'string' 이 들어오느냐에 따라서
function add(x: string | number, y: string | number): string | number {
return x + y;
}
add(1, 2);
add('1', '2');
add(1, '2');리턴값이 달라지도록 유니온을 명시했지만, '컴파일러'의 입장에서는 옳지 않은 방식입니다.
function add(x: string | number, y: string | number): string | number {
return x + y;
}
const result: string | number = add(1, 2);
result.charAt(1);이런 식으로 string 및 number 타입의 "result" 변수에 add(1,2) 의 값을 받도록 코드를 구성해주면,
유니온 입장에서 맞는 것 같지만?? 이 역시 오류가 발생합니다.
이렇게 논리적으로 구성해주더라도!
"컴파일러 입장" 에서는 여전히 result 변수가 string인지, number인지 확실하게 알 수 없기 때문입니다.
++ "함수 오버로딩"으로 해결 가능.
ⅩⅣ. 타입 : Intersection
※ &(ampersand) 를 사용해서 2개 이상의 타입을 조합하는 경우, 이를 "인터섹션(Intersection)" 이라고 합니다.
◎ 위쪽의 Union(유니언)을 마치 "또는(Or)" 과 같이 이해할 수 있는 것처럼,
Intersection(인터섹션)은 "그리고(And) == 교집합"와 같이 보면 됩니다.
● Intersection(인터섹션)은 새로운 타입을 생성하지 않고, 기존에 타입들을 조합 가능하기에 유용하지만
" 자주 사용되는 방법"은 아닙니다.
type Person = {
name: string;
age: number;
};
type Developer = {
name: string;
skill: number;
};
const heropy: Person = {
name: 'Heropy',
age: 36,
skill: 11 // Error - { name: string; age: number; skill: number; }' 형식은 'person' 형식에 할당할 수 없습니다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'person' 형식에 'skill'이(가) 없습니다
};
// 두 타입 별칭을 합쳐 하나의 { name: string, age: number, skill: number } 이라는 타입을 구성한다.
const neo: Person & Developer = {
name: 'Neo',
age: 85,
skill: 11,
};
!! 맨 밑줄의 코드처럼 타입을 "&" 교집합을 해서 타입을 추론하는 것보다,
그냥 새로운 타입 하나 만들어서 할당하는 것을 권장합니다.
ⅩⅤ. 타입 : Type Alias
※ 타입 별칭(Type Alias)는 "사용자가 정의하는 타입" 변수입니다.
==> 한줄로 복잡하고 긴 타입을 정의하면 가독성이 좋지 않기 때문에,
type 별칭으로 타입 형태를 묶어둔 뒤 별칭을 타입명으로 선언해서 사용하는 방법이라고 볼 수 있습니다.
type alias 와 interface의 변수명은 대문자로 쓰는게 국룰
let Dom: {version:string, el:(selector:string)=>void, css:(prop:string)=>void} = {
version: '0.0.1',
el(){},
css(){}
};이거를
type Operation = {
version: string,
el: (selector:string) => void,
css: (prop:string) => void
}
let Dom: Operation = {
version: '0.0.1',
el(){},
css(){}
};요론식으로
☆ 타입 별칭을 선언하는 방법은 변수와 비슷합니다.
- 앞부분에 "자료형"을 선언하고, 뒷부분에 자료형에 부합하는 "값"을 대입하는 것처럼,
=> "타입"도 type 이라는 자료형을 선언하고서 뒤에 타입값을 넣어주면 됩니다.
// type 변수명 = 타입;
type Name = string;
type Age = number;
let name: Name = 'Tom';
let age: Age = 20;
ⅩⅥ. 타입 : Interface
※ Interface(인터페이스)는 상호 간에 정의한 약속 혹은 규칙을 의미합니다.
=== " 타입을 정의한 것들을 한데 모은 객체 타입 "
=== "객체의 껍데기" 혹은 "객체의 설계도"
◇ TS에서의 인터페이스는 밑에 범주에 대해서 약속을 정의합니다.
1. 객체의 스펙 ( 속성과, 해당 속성의 타입 )
2. 함수의 파라미터
3. 함수의 스펙(파라미터, 반환 타입 등)
4. 배열과 객체를 접근하는 방식
5. 클래스.
★ 인터페이스는 단순히 타입 지정 뿐만 아니라, 자체 확장하여 활용도를 높일 수 있다는 장점 !
interface Person {
name: string;
age: number;
}
interface Developer extends Person { // 인터페이스 상속
skill: string;
}
function logUser(obj: Developer) {
console.log(obj.name);
console.log(obj.age);
console.log(obj.skill);
}
let person = {
name: 'Capt',
age: 28,
skill: 'typescript, javascript'
};
logUser(person);
☆ ☆
[ type alias vs interface 사용 선호도 ]
: 타입 별칭과 인터페이스는 얼핏보면 비슷해 보이지만,
이 두가지의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부입니다.
- 인터페이스는 다양한 방법으로 확장이 가능한데에 반해 // 타입별칭은 확장이 불가능합니다.
== 간단한 타입 집합으로 이용할때는 'type alias'를 쓰고,
가능하면 interface로 선언해서 사용하는 것을 추천되는 편.
ⅩⅦ. 타입 : Generic
※ Generic(제네릭)은 타입을 변수화하였다고 생각하면 됩니다.
- 우리가 데이터를 직접 다루지않고, '변수'라는 상자에 담아서 사용하는 이유는 재사용서을 높이기 위해서입니다.
- 타입을 마치 함수 파라미터 처럼 나중에 대입하도록 하여 재사용성을 높이기 위해 탄생한 타입이
"제네릭 타입"이라고 이해하면 됩니다.
○ 제네릭의 선언 문법을 <> 꺾쇠 괄호 기호를 이용합니다.
괄호 안에는 변수명을 넣어주면 됩니다.
function getText<T>(text: T): T {
return text;
}
getText<string>('hi'); // 'hi'
getText<number>(10); // 10
getText<boolean>(true); // true
ⅩⅧ. 타입 간 대입 가능한 표.
'Front_End [JS기반] > 타입스크립트' 카테고리의 다른 글
| [ 3D Web : Front&Back_Type Script ] 타입스크립트 : 타입스크립트 함수 타입 공부하기. (0) | 2024.11.27 |
|---|---|
| [ 3D Web : Front&Back_Type Script ] 타입스크립트의 타입 선언 (0) | 2024.11.18 |
| [ 3D Web : Front&Back_Type Script ] 타입스크립트 트랜스파일링 설정 : ' tsconfig ' 의 옵션 총 정리. (2) | 2024.11.18 |
| [ 3D Web : Front&Back_Type Script ] 타입스크립트 : 트랜스파일링이란 (0) | 2024.11.18 |
| [ 3D Web : Front&Back_Type Script ] 타입스크립트의 정의*동작원리*특징 (1) | 2024.11.18 |