1. 기본 타입
TypeScript에서 사용 가능한 기본 타입에는 number, string, boolean, undefined, null, unknown, any, void, never, object와 같은 것들이 있습니다.
TypeSscript에서 변수를 선언할 때 타입을 지정할 수 있는데 아래 방법으로 변수를 선언하고 값을 할당할 수 있습니다.
const mynum: number = 10;
console.log(mynum);물론 타입은 생략될 수 있습니다. 그러면 대입되는 값에 따라 타입이 자동으로 결정됩니다. 이를 타입 추론이라 하는데 함수를 사용할 때 매개변수나 반환되는 타입도 생략하면 매개변수는 any나 반환 형태는 return 되는 값의 타입에 따라 자동으로 결정됩니다.
let myValue = 'abc';
console.log(myValue);undefined는 변수에 타입이 정해지지 않았음을 의미하며 null은 값이 아예 없는 것을 의미합니다. 이들 타입은 단독적으로 사용되지 않고 보통 다른 타입과 같이 사용돼서 변수는 ndefined나 null이 될 수 있음을 표현합니다.
let myvalue: number | undefined;
myvalue = 10;'|'의 의미는 '또는'인데 하나의 변수에 복수의 타입을 적용합니다.
let myvalue: number | string;
myvalue = 123;또는 어떤 함수가 반환하는 데이터 타입을 복수의 타입으로 정의하기도 합니다.
let myfunc = function (x: number, y: number) : number | string {
return x + y;
}
console.log(myfunc(1, 2));복수의 타입이 아닌 어떤 데이터든 담을 수 있는 상태로도 만들 수 있는데 unknown이나 any를 사용하면 됩니다.
let myun: unknown;
myun = 'abc';
myun = 10;
let myun: any;
myun = 'abc';
myun = 10;unknown은 '변수를 선언할 때 타입을 알 수 없는 상태의 변수이므로 어떤 데이터도 담을 수 있다'라는 것이고, any는 '처음부터 어떤 타입이든 답을 수 있는 변수'로서 선언됩니다. 하지만 이들 타입은 타입 자체가 모호하기에 가급적 사용하지 않는 것이 좋습니다.
void와 never는 주로 함수에서 사용되며 void는 함수가 아무 값도 반환하지 않는다는 것을 의미하고 never는 반환식(return)이 사용되지 않음을 의미합니다. 따라서 void는 return;이 존재하는 함수, never는 return;문이 존재하지 않는 함수로 구분 지어 생각할 수 있습니다.
마지막 object는 상기에서 언급한 타입 이외에 나머지 타입 모두를 말하는 것으로 함수 객체나 배 열등을 담는 데 사용됩니다.
위의 예제에서 처럼 변수를 선언할 때와 동일한 방법을 함수에서도 적용할 수 있습니다.
TypeScript에서 함수는 다음과 같이 작성될 수 있습니다.
function myfunc(x: number, y: number) : number {
return x + y;
};
console.log(myfunc(100, 200))에제 함수는 myfunc라는 함수이며 number형 매개변수 2개를 받고 number형의 결과를 반환하는 함수입니다. 만약 함수의 매개변수 중 하나를 생략할 수 있다면 ?: 을 사용해 매개변수의 타입을 정의합니다. (반대로 -?: 로 표현하면 반드시 있어야 하는 타입이 됩니다.)
function myfunc(x: number, y?: number) : number {
if (y === undefined) {
return x + 100;
}
else {
return x + y;
}
};?:구문은 일반 변수를 선언할때도 사용될 수 있는데 ?:로 타입을 정하면 값이 있을 수도 있고 없을 수도 있다는 의미가 됩니다. 따라서 myfunc함수에서 두 번째 y에 해당하는 매개변수는 값을 주거나 생략할 수 있습니다. 값이 생략되는 경우 해당 매개변수는 undefined이므로 함수 내부에서 이에 대한 처리가 필요합니다.
또한 매개변수나 반환되는 데이터 타입이 하나 이상이라면 변수를 선언할 때와 마찬가지로 '|'를 사용해 반환되는 타입을 복수로 지정할 수 있습니다.
function myfunc(x: number, y: number | undefined) : number {
if (y === undefined) {
return x + 100;
}
else {
return x + y;
}
};
console.log(myfunc(100, undefined매개변수는 기본값을 설정할 수 있는데 함수를 호출할 때 매개변수를 생략하면 기본값이 사용됩니다.
function myfunc(x: number, y: number = 1) : number {
if (y === undefined) {
return x + 100;
}
else {
return x + y;
}
};
console.log(myfunc(100));상기 예제에서 myfunc()는 매개변수의 개수가 x, y 2개입니다. 그런데 이처럼 매개변수를 정해놓지 않고 임의의 수만큼 무작위로 매개변수를 받아야 한다면 매개변수를 배열로 받아야 합니다.
function myfunc(...num: readonly number[]) : number {
return num.reduce((x, y) => x + y);
};
console.log(myfunc(1, 2, 3, 4, 5));매개변수 num은 number 배열로 숫자만 받을 수 있으며 ...으로 매개변수를 지정합니다. 함수의 반환 형식은 number []에 의해 배열형임을 알 수 있습니다. 만약 매개변수로 전달된 배열 값이 함수 안에서 변경되지 말아야 한다면 타입 이전에 readonly키워드를 사용해 전달된 배열 값을 변경할 수 없도록 할 수 있습니다.
2. 배열
배열은 아래와 같이 선언됩니다.
const myValues: number[] = { 10, 20, 30 };이 예제는 배열에 숫자만 들어온다는 것을 가정하고 있는데 여러 가지의 데이터에 대한 배열이 필요하다면 Array객체를 사용할 수 있습니다.
const myArray : Array<number> = [1, 2, 3, 4, 5];
console.log(myArray[0]);
Array에서 사용된 <number>는 이 배열이 number형 배열임을 의미합니다. <와 >사이에 타입을 지정했는데 이를 제네릭이라고 하며 주어진 타입에 따라 다양한 데이터를 담을 수 있습니다.
3. Tuple
2개 이상의 데이터 타입에 해당하는 데이터를 담아둘 수 있는 형태를 말합니다.
let myTuple: [number, string];
myTuple = [100, 'cliel.com'];
console.log(myTuple[0]);값을 가져오는 경우에는 변수의 뒤에 배열처럼 값의 인텍스 번호를 지정하면 됩니다. 혹은 아래와 같이 구조 분해 할당을 사용하기도 합니다.
const [num, str] = myTuple;
console.log(str);4. Type Alias
특정 타입을 임의의 다른 타입명으로 대신 사용하는 것을 말합니다.
type myType = number;
const age: myType = 100;
console.log(age);Type Alias는 type으로 사용하며 임의의 식별자를 주고 사용하고자 하는 타입을 전달하면 됩니다. 따라서 예제에서의 myType은 number형의 타입이며 number와 동일하게 값을 저장하고 불러올 수 있습니다.
물론 새로운 형식을 정의해 줄 수도 있습니다.
type Car = {
color: string;
speed: number;
};
const car: Car = {
color: 'red',
speed: 100
}
console.log(car.color);예제에서는 Car라는 새로운 객체 형식을 정의하고 있고 이 객체는 color와 speed속성을 가지는데 각각 string과 number형 속성입니다. type내부에 선언하는 변수는 일반 변수를 선언하는것과 동일합니다. 따라서 타입선언을 ?:로 하게 되면 생략가능한 변수가 되며
type Car = {
color: string;
speed?: number;
};
const car: Car = {
color: 'red'
};
console.log(car.color);readonly키워드를 붙이게 되면 최초 설정 후 읽기만 가능한 변수가 되는등 변수가 가질 수 있는 대부분의 특징을 담을 수 있습니다.
type Car = {
readonly color: string;
speed?: number;
};혹은 Readonly 타입을 이용해 type을 감싸서 type전체를 readonly상태로 만들 수도 있습니다.
type Car = {
color: string;
speed?: number;
};
function test(car: Readonly<Car>) {
car.color = 'red'; //적용불가
};특정 Type에서 키의 데이터타입을 그대로 반영하는 경우도 있는데 에를 들어 aaaType의 name키에 지정되어 있는 타입을 가져와서 다른 변수의 타입으로 설정하려면 다음과 같이 할 수 있습니다.
type aaa = {
aaa: number;
bbb: string;
};
const xy: aaa['aaa'] = 100;
console.log(xy);
//혹은 다른 타입의 타입을 설정
type aaa = {
aaa: number;
bbb: string;
};
type bbb = {
name: string;
bbb: aaa['aaa'];
};
const x: bbb = {
name: 'kim',
bbb: 100
};
console.log(x.bbb);경우에 따라 keyof를 사용해 type의 전체테이터타 이름을 모두 가져오면 해당 키의이름으로만 설정가능한 타입을 만들 수 있으며
type aaa = {
aaa: number;
bbb: string;
};
type mytype = keyof aaa;
const b: mytype = 'aaa'; //b에는 aaa아니면 bbb값만 들어갈 수 있음
console.log(b);조건별로 타입이 다르에 들어가야 하는 경우도 설정이 가능합니다.
type returnType<T> = T extends string ? boolean : number;
type myType = returnType<string>;
const i: myType = true;예제는 Type이 string인지 아닌지의 여부에 따라 다른 타입이 설정될 수 있도록 한것인데 이 밖에 Partical을 사용하면 type의 일부분만을 다룰 수 있고
type Car = {
color: string;
speed?: number;
};
function test(car: Partial<Car>) : Partial<Car> {
return car;
};
console.log( test({ color: 'red' }).color );Pick를 사용해 기존 type에서 일부분만 추출해 새로운 타입을 추가할 수 있습니다.
type Car = {
color: string;
speed: number;
};
function test(car: Car): Pick<Car, 'color'> {
return {
color: car.color
};
};
const c: Car = {
color: 'red',
speed: 100
};
console.log(test(c).color);반대로 특정 요소를 제외하려면 Omit을 사용하면 됩니다.
type Car = {
color: string;
speed: number;
};
function test(car: Car): Omit<Car, 'color'> {
return {
speed: car.speed
};
};
const c: Car = {
color: 'red',
speed: 100
};
console.log(test(c).speed);Pick나 Omit과는 다르게 Record는 서로다른 type을 묶어주는 역활을 수행합니다.
type CarType = 'truck' | 'seden';
type Car = {
color: string;
speed: number;
};
const carport: Record<CarType, Car> = {
truck: {
color: 'red',
speed: 100
},
seden: {
color: 'bluue',
speed: 80
}
};
console.log(carport.truck.color);5. Union Type
새로운 타입을 정의할 때는 들어갈 수 있는 값 자체를 지정해 줄 수도 있습니다. 별다른 방법은 없고 그냥 변수에 필요한 값을 할당하는 것입니다.
type myStr = 'abc';
let mystr: myStr = 'abc';
console.log(mystr);따라서 위와 같은 방법으로 타입을 정의하면 myStr형의 변수는 정확히 'abc'라는 값만을 담아낼 수 있습니다. 이러한 타입 정의는 하나가 아닌 다수의 값을 할당할 수 있다는 특징이 있습니다.
type myType = 1 | 'abc' | false;
const mytype: myType = false;값의 구분은 '|' 문자로 구분해 전달하면 되는데 해당 변수에는 지정한 값들 중 하나의 값만을 받을 수 있습니다.
6. intersection
Union Type의 경우 여러 가지 값들 중 하나만 가지는 경우지만 intersection은 모두를 합치는 개념입니다.
type Car = {
color: string;
speed: number;
};
type Driver = {
name: string;
drive: () => void;
};
let driving: Car & Driver;
driving = {
color: 'red',
speed: 100,
name: 'cliel',
drive: () => { return; }
};
console.log(driving.name);Car와 Driver라는 새로운 타입을 만들고 driving변수에 2개의 타입을 &로 묶었습니다. 이렇게 되면 driving는 2개의 타입을 모두 가지게 되므로 각각의 타입에 대한 속성에 모두 접근할 수 있게 됩니다.
7. Enum
TypeScript에서 Enum은 다음과 같이 정의할 수 있습니다.
enum Days {
Mon,
Tue,
Wed
};
const day = Days.Mon;
console.log(day);실제값은 순서대로 0부터 시작해 각 요소에 값이 대입됩니다. 따라서 day변숫값은 0입니다. 만약 숫자 값 보다 문자열이 사용되어야 한다면 모든 요소에 문자열을 하나씩 할당해 줘야 합니다.
enum Days {
Mon = 'monday',
Tue = 'tuesday',
Wed = 'wednesday'
};
const day = Days.Mon;
console.log(day);8. Type Assertion
암묵적인 데이터 타입의 변수를 특정 타입으로 해석하고자 하는 것을 말합니다.
function myFunc() {
return 'abcdef';
};
const result = myFunc();예제에서 myFunc() 함수는 반환되는 데이터의 타입이 명시되지 않은 순수한 javascript에서의 함수이고 TypeScript에서는 이 함수의 반환되는 타입을 알 수 없기 때문에 any로 처리되고 자연스럽게 result변수도 any타입이 됩니다.
만약 위에서 처럼 any 등의 타입이 생성되었을 때 이를 특정 타입으로 취급하고자 한다면 as키워드를 통해 특정 타입으로 변환해 주면 됩니다.
console.log((result as string).length);또는 변수에 값이 있다는 걸 알려주는 경우도 있는데
function myFunc(): number | undefined {
return 1;
};
const result = myFunc();
console.log(result! + 1);myfunc() 함수는 숫자를 주는 경우도 있지만 undefined를 줄 수 있습니다. 이 상태에서 함수의 결괏값을 받으면 변수는 number 또는 undefined를 가지는 변수가 되는데 해당 변수가 값을 가지고 있음을 확신하는 경우 변수뒤에 !를 붙여주면 이때부터 변수는 값을 가지고 있는 변수로서 취급됩니다.
'Web > TypeScript' 카테고리의 다른 글
| [TypeScript] Visual Studio에서 TypeScript사용하기 (0) | 2022.05.06 |
|---|---|
| [TypeScript] tsconfig.json (0) | 2021.03.13 |
| [TypeScript] 일반화 (Generic) (0) | 2021.03.11 |
| [TypeScript] 객체지향 프로그래밍 (0) | 2021.03.11 |
| [TypeScript] 개요및 준비 (0) | 2021.03.10 |