학습내용
- 기본
- 함수
- Enum
- Union
- Type Alias
- Interface
String, Number, Boolean, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never 등
Array
let arr: number[] = [1, 2, 3];
let arr2: string[] = ['1', '2', '3'];
let arr3: boolean[] = [true, false, true];
타입 뒤에 []
를 추가하면 해당 타입의 배열임을 명시할 수 있다.
타입스크립트에서는
number
와string
을 소문자로 표기한다. 첫글자를 대문자로 표기시 자바스크립트의Number
,String
객체를 가리키기 때문이다.
let arr: Array<number> = [1, 2, 3];
let arr2: Array<string> = ["1", "2", "3"];
let arr3: Array<boolean> = [true, false, true];
또는 Array<타입>
으로도 가능하다.
Object
let person: {
name: string;
birth: number;
};
이때 {중괄호}
는 자바스크립트의 객체가 아닌 타입스크립트 객체 타입을 의미한다. 또한 객체 뿐만 아니라 객체 안의 요소들까지도 타입을 지정할 수 있다.
Tuple
let tuple: [string, number, boolean] = ['str', 1, false];
요소의 타입과 갯수 지정
Any
어떤 타입이든 가능. 즉, 자바스크립트의 변수는 모두 any
에 해당된다.
Null & Undefined
자기자신 말고는 할당이 불가능하기 때문에 주로 유니온 타입과 같이 사용한다.
Never
비정상적으로 종료되거나 함수가 끝까지 실행되지 않는 경우에 사용. 사실상 거의 사용하지 않는다고 봐도 무방하다.
JavaScript
function add(n1, n2) {
return n1 + n2;
}
TypeScript
function add(n1: number, n2: number): number {
return n1 + n2;
}
const a = add(1, 2); // 3
const b = add('1', 2); // Error ➡️ 타입 불일치
const c = add(10, 20, 30); // Error ➡️ 요소 갯수 초과
const d = add(10); // Error ➡️ 요소 갯수 부족
자바스크립트 함수를 타입스크립트 함수로 변환시 위와 같다. 세 번째 number
는 return
값에 대한 타입으로 매개변수의 타입이 모두 지정된 상태라면 생략이 가능하다.
위 예시 중 마지막처럼 요소의 갯수가 부족한 경우 옵셔널 파라미터?
를 사용하면 예외 처리가 가능하다.
function add2(n1: number, n2?: number): number {
if (!n2) return n1;
return n1 + n2;
}
타입 뿐만 아니라 타입의 기본값까지 지정해주는 속성으로 타입스크립트가 아닌 자바스크립트의 속성이다.
function add3(n1: number, n2: number = 5): number {
if (!n2) return n1;
return n1 + n2;
}
const a3 = add3(1, 2); // 3
const c3 = add3(10); // 5
매개변수 앞에서부터 차례대로 배열안에 있는 요소들을 할당 후, 남은 요소들을 배열 안에 모두 할당하는 속성
function add4(n1: number, ...nums: number[]): number {
let totalOfNums = 0;
for (let key in nums) {
totalOfNums += nums[key];
}
return n1 + totalOfNums;
}
const result = add4(10, 20, 30, 40); // 100
n1 = 10
...nums: [20, 30, 40]
n1 = 10
n2 = 20
...nums: [30, 40]
const printAnything = (value: any) => {
console.log(value)
}
함수에서 return
값이 없는 경우. null
, undefined
와 비슷하지만 함수형에서만 사용할 수 있다는 차이점이 있다. void
에 해당하는 함수의 반환값은 undefined
가 된다.
특정 값들의 집합을 의미하는 자료형으로 타입스크립트에만 존재한다.
enum Direction {
Up,
Down,
Left = 7,
Right,
}
console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right);
> 0 1 7 8
console.log(Direction[1]);
> Down
숫자형의 요소에는 인덱스가 자동으로 할당된다. 그러나 실제 인덱스는 아니기 때문에 임의로 설정할 수도 있다. 수동 설정시 다음 요소는 이전 요소의 설정값에서 +1한 값이 적용된다.
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
문자형은 숫자형과 달리 특정 요소에 특정값이 할당돼도 다음 요소에 +1한 값을 적용하지 않는다.
enum BooleanLikeHeterogeneousEnum {
No = 0,
Yes = "YES",
}
숫자형과 문자형을 혼합해서 사용하는 방식. 유지보수에 혼란을 야기하기 때문에 권장하지 않는다.
자바스크립트의 OR 연산자와 같은 의미로 |
연산자를 이용해 여러개의 타입을 연결할 수 있다.
const printOut = (input: string | number) => {
console.log(input);
}
특정 타입이나 인터페이스를 참조할 수 있는 타입 변수로 사용자 정의 타입 혹은 타입 별칭이라고도 한다. 매번 타입을 새로 작성하지 않기 위해 탄생된 기능이기 때문에 재사용이 가능하다. 자바스크립트의 constructor
와 비슷한 개념이다. 타입 별칭은 타입스크립트에만 존재하기 때문에 자바스크립트로 컴파일시 해당 코드는 사라진다.
type.ts
type Hero = {
name: string;
power: number;
height: number;
};
Heroes.ts
import type { Hero } from './type';
const hero1: Hero = {
name: '슈퍼맨',
power: 1000,
height: 190,
};
현업에서는 위와 같이 타입 별칭 파일을 따로 생성 후 import
해오는 방식으로 사용한다.
다양한 유형의 프로퍼티로 이루어진 타입을 정의
interface Person {
name: string;
age: number;
}
Type Alias와 Interface의 차이
- Type Alias Interface 확장 X O 선언 병합 X O 📌 참조
기본형의 Optional Parameter와 같이 ?
를 추가하면 해당 key
:value
를 사용하지 않는 경우에도 에러가 발생하지 않는다.
interface Person {
name: string;
age?: number;
}
읽기만 가능한 타입
interface Person {
readonly name: string;
age?: number;
}
const person1: Person = { name: 'js' };
person1.name = 'ljs'; // Error
readonly
속성을 정의한 후에 value
를 할당시 에러가 발생한다.
key
의 이름을 정의하지 않고 타입만 정의. 단, key
의 타입은 String
과 Number
만 가능하다.
interface Person {
readonly name: string;
[key: string]: string | number;
}
두 번째 key
는 string
형식이라면 무엇이든 가능하다.
기본형의 함수타입과 같은 원리
interface Print {
(name: string, age: number): string;
}
= type Print = (name: string, age: number) => string;
기존의 인터페이스에 새로운 타입을 추가로 확장해서 새로운 인터페이스를 정의하는 형식
interface Person {
name: string;
age: number;
}
interface Korean extends Person {
birth: 'KOR';
}
interface Korean {
name: string;
age: number;
birth: 'KOR';
}
기존 인터페이스를 여러개 활용할 수도 있다.
interface Developer {
job: 'developer';
}
interface KorAndDev extends Korean, Developer {}
interface KorAndDev {
name: string;
age: number;
birth: 'KOR';
job: 'developer';
}
기존의 인터페이스 타입을 하나로 합쳐서 정의. &
는 자바스크립트의 &&
연산자와 비슷한 의미다.
interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: string;
}
type DevJob = Person & Developer;
const nbcPerson: DevJob = {
name: 'a',
age: 20,
skill: 'ts',
};