들어가기 전에
- 타입스크립트는 최신 ECMAScript 표준에 포함된 기능을 발빠르게 지원한다.
- 아직 proposal 단계인 기능 일부까지도... - 자바스크립트와는 엄밀히 다른 언어이지만,
뿌리가 되는 JS에 대한 숙련도는 TS를 이용한 프로그래밍의 생산성과 직결된다.
타입 표기
// 식별자(값): 타입
value: type
// ex
const answer: number = 42;
const isTrue: boolean = true;점진적 타이핑
- 점진적으로 타입 안정성을 키워나가는 것을 허용하는 타입 시스템
- 타입스크립트 컴파일러는 타입 시스템의 엄격한 정도를 위한 다양한 옵션을 제공
- 타입스크립트는 타입 추론을 지원하나, 의존성을 줄이고 명시적으로 타입 정보를 적어주는 것이 좋다.
기본 타입
1. boolean
2. number
3. string
4. null / undefined
null/undefined,void이외의 타입을 할당하면 에러 발생
let nullVaule: null = null;
nullValue = 123; // Error 발생5. JS에서 대응되지 않는 특수한 타입
any
- 모든 타입과 호환이 가능
- 꼭 필요한 경우에만 사용할 것
let bool: any = true;
bool = 3;
bool = 'hello';void
null,undefined만을 값으로 가질 수 있는 타입
never
- 아무런 값도 가질 수 없는 타입
- ex. 항상 에러를throw하는 함수의 반환 타입으로 설정
배열
- 표현 방식:
type[], Array<type>
튜플
- 배열 원소의 수와 타입이 정확히 지정된 경우, 타입을 지정할 수 있음
const nameAndHeigth: [string, number] = ['홍길동', 170];
// 타입 정의와 다른 갯수의 원소를 갖는 배열을 할당할 경우, 에러 발생
// TypeScript 2.7 부터 적용
const invalidNameAndHeigth: [string, number] = ['홍길동', 170, 42]; // Error객체
- 중괄호(
{})를 이용해 표현 속성 : 속성의 타입으로 표현- 구분자로 콤마(
,), 세미콜론(;) 모두 사용 가능
const user: { name: string; height: number; } = { name: '홍길동', height: 170 };객체의 속성
1. 선택 속성
- 속성명 뒤에 물음표(
?)를 붙여 선택적인 속성을 표현할 수 있음
const userWithUnknownHeight: { name: string; height?: number; } = { name: '홍길동'};2. 읽기 전용 속성
- 속성명 앞에
readonly키워드를 붙여 속성의 재할당을 막을 수 있다
-const변수와 비슷하게 동작
const user: {
readonly name: string;
height: number;
} = { name: '홍길동', height: 170 };
user.name = '동길홍'; // Error타입 별칭
type 타입 별칭 = 실제 타입;- 타입에 다른 이름을 붙이기
-> 프로그래머의 의도를 명확히 나타낼 수 있음
type UUID = string;
type Height = number;
function getUser(uuid: UUID) {
// ...
}
getUser(7); // Error함수
- 매개변수의 타입
- 반환값의 타입
function sum(a: number, b: number): number {
return a + b;
}매개변수 타입
1. 기본 매개변수
매개변수명: 타입 = 기본값2. 선택 매개변수
- 매개변수명 뒤에 물음표(
?)를 붙여 명시 - 선택 매개변수는 항상 필수 매개변수 뒤에 정의되어야한다.
function hello(name: string = 'stranger', age?: number): void {
console.log(name); // kim
if(age) {
console.log(age); // 20
}
}
hello('kim');함수 값의 타입 표기
(...매개변수) => 반환 타입
const sum: (a: number, b: number) => number (a, b) => (a + b);함수 오버로딩
- 하나 이상의 타입 시그니처를 가진 함수 선언
- 단 한번의 함수 구현
- 여러 타입에 대한 분기는 함수 내에서 처리
function double(str: string): string;
function double(num: number): number;
function double(arg) {
if(typeof arg === 'string') {
return `${arg}${arg}`;
} else if(typeof arg === 'number') {
return arg*2;
}
}This 타입
- JS에서의
this값은 실행되는 시점에 결정
함수의 this 타입 명시하기
- 타입 시그니처 매개변수 가장 앞에
this추가
interface HTMLElement {
tagName: string;
/* ... */
}
interface Handler {
(this: HTMLElement, event: Event, callback: () => void): void;
}
let cb: any;
// 실제 함수 매개변수에는 this가 나타나지 않음
const onClick: Handler = function(event, cb) {
// this는 HTMLElement 타입
console.log(this.tagName);
cb();
}제네릭
- 여러 타입에 대해 동작하는 함수 정의
- 함수를 정의할 때는 타입을 알 수 없으나, 사용할 때에만 타입 정보를 알 수 있는 경우 사용
타입 변수
<타입변수>- 요소를 사용하는 시점에만 알 수 있는 타입을 담아두는 변수
- PascalCase 명명법 사용
function getFirstElem<T>(arr: T[]): T {
// ...
}
const language = getFirstElem<string>(['hi', 'hello']);유니온 타입
- 여러 타입을 가질 수 있는 경우에 사용
- 가능한 타입들을 파이프 기호(
|)로 이어서 사용
type Whatever = number | string | boolean;
// 여러 줄에 걸쳐 정의 가능
type Whatever
= number
| string
| boolean;인터섹션 타입
- 여러 타입을 모두 만족하는 타입을 표현할 때 사용
- 여러 타입을 앰퍼샌드 기호(
&)로 이어서 사용
type Awesome = Programmer & BeerLover & CatLover;
// 여러 줄에 걸쳐 정의 가능
type Awesome
= Programmer
& BeerLover
& CatLover;열거형
- 열거형 사용을 웬만해서 추천하지 않는 듯 하다...
멤버
1. 상수 멤버: 컴파일 타입에 알 수 있는 상수값으로 초기화되어있는 멤버
2. 계산된 멤버: 실제로 코드를 실행시켜봐야 값을 알 수 있는 멤버
- 계산된 멤버 뒤에 오는 멤버는 열거형 정의 시 반드시 초기화되어야 함.
1. 숫자 열거형
- 열거형의 멤버 값을 초기화 하지 않은 경우,
0부터 순차적으로 증가하는 값을 가짐
enum Direction {
East,
West,
South,
North
}
const south: Direction = Direction.south;
console.log(south); // 2
// 중간에 초기화되지 않은 멤버가 있을 경우, 이전 멤버 값으로 부터 순차적으로 증가됨
enum InitializedDirection2 {
East = 3,
West /* 4 */,
South = 7,
North /* 8 */
}2. 문자 열거형
- 숫자 열거형과 달리 자동 증가되지 않는다
- 정의할 때, 명시적으로 초기화되어야 함
3. 유니온 열거형
- 모든 멤버가 값이 표기되지 않거나 / 문자열 리터럴 / 숫자 리터럴 중 하나에 해당하는 열거형
- 유니온 열거형의 멤버는 값인 동시에 타입이 됨
junior backend-developer 👶💻