number
- 숫자형 데이터 타입
- TS,JS는 int,float의 구분을 하지 않고 모두 number이다.
string
- 문자열 데이터 타입
- TS,JS에서 char 데이터 타입은 없다.
- Array-like
boolean
trueorfalse- condition에는 truthy or falsy 값도 많이 쓴다.
- number: 0만false
- string: 빈 문자열만 false,'0'은true
-undefined,null모두false
object
- javascript와 마찬가지로
typeof를 했을 때 object를 반환하는 객체, 배열, 함수 등 모든 타입을 의미함 - 여러 타입들을 의미하기 때문에 typescript에서는 object를 그대로 type으로 쓰기에는 많은 어려움이 있음
- 객체 리터럴에 타입을 명시한 다음 할당하는 방법이 있으나, 가독성이 좋지 않음
- typescript에서는 type alias나, interface를 사용하여 해결할 수 있음
const person:
name: string,
age: number;
hobbies: string[];
} = {
name: 'Semin',
age: 25,
hobbies: ['Coding', 'Running'],
} // bad중첩된 개체 및 타입
- 객체 타입은 아래와 같이 중첩된 객체 형태도 생성 가능
const product = {
id: 'abc1',
price: 12.99,
tags: ['great-offer', 'hot-and-new'],
details: {
title: 'Red Carpet',
description: 'A great carpet - almost brand-new!'
}
}- 위 객체의 타입은
{
id: string;
price: number;
tags: string[];
details: {
title: string;
description: string;
}
}array
- JavaScript Array에 타입 안정성 추가
- JavaScript의 Array 메서드 사용 O - 배열 선언
TYPE[]:const numbers: number[] = [1, 2, 3];Array<TYPE>:const fruits: Array<string> = ['momo', 'darae', 'cherry'];- 타입 명시가 없으면 tsc가 타입추론
-const testArray = [1, 2, 3];->number[]로 추론
- readonly 배열
const readOnlyArray: readonly number[] = [1, 2, 3];
tuple
- length가 고정되어 있고, type이 고정되어 있는 배열
- 검색해서 알게 되었는데 값을 고정시킬 수도 있다.
push로 넣는 것은 tsc가 잡지 못함(예외라고 생각하면 ok)
let info: [string, number];
info = ['typescript', 3] // 성공
info = [3, 'typescript'] // 실패 -> 순서가 맞지 않음
info = [3, 5] // 실패 -> 자료형이 맞지 않음
info = ['javascript', 1, 5] // 실패 -> 길이가 맞지 않음
let version: [2, number];
version = [2, 3] //성공
version = [3, 2] // 실패any
- 의미 그대로 아무 타입
- 웬만해서는 사용하지 않는 것을 권장
union
- 여러 타입 중 하나일 수 있는 타입
|(파이프) 기호를 사용
type Combinable = number | string;
// 변수 하나에 직접 할당 가능
let unionVariable: string | number;
unionVariable = "Hi";
unionVariable = 25;
unionVariable = true; // Error boolean은 허용되지 않음Enum
- 특정 값(상수)들의 집합
- 특정 값(상수)을 고정하는 독립된 자료형
- 관습적으로 문자열은 대문자로 작성(필수는 아님)
- enum은 멤버들이 index를 가짐(첫 인덱스는 수동으로 주어지면 그 number 값, 주어지지 않으면 0부터)Enum과 대체제에 관해서 -> [링크](추후 추가)
literal
- 엄격한 union type이라고 할 수 있다.
- union type이 type의 합이라고 한다면, literal type은 값의 합이라고 할 수 있겠다. - String Literal
type Easing = "ease-in" | "ease-out" | "ease-in-out";
class UIElement {
animate(dx: number, dy: number, easing: Easing) {
if (easing === "ease-in") {
// ...
} else if (easing === "ease-out") {
} else if (easing === "ease-in-out") {
} else {
// 하지만 누군가가 타입을 무시하게 된다면
// 이곳에 도달하게 될 수 있습니다.
}
}
}
let button = new UIElement();
button.animate(0, 0, "ease-in");
button.animate(0, 0, "uneasy");- Numeric Literal Types
type diceResult = 1 | 2 | 3 | 4 | 5 | 6;
// Type Alias
- TypeScript는 별도의 type을 선언하여 코드의 가독성을 향상 시킬 수 있다.
type Combinable = number | string;
type ConversionDescriptor = 'as-number' | 'as-text';
function combine(
input1: Combinable, //number | string,
input2: Combinable,//number | string,
resultConversion: ConversionDescriptor//리터럴 타입
) {
let result;
if (typeof input1 === "number" && typeof input2 === "number" || resultConversion === 'as-number') {
result = +input1 + +input2;
} else {
result = input1.toString() + input2.toString();
}
return result;
}- 타입 별칭을 사용하여 타입을 직접 “생성”할 수 있음.
- 유니온 타입을 저장하는 것만 가능한 것이 아니고 복잡할 수 있는 객체 타입에도 type alias를 붙일 수 있습니다.
type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 }; // this works!- 불필요한 반복을 피할 수 있으며 가독성 상승
- 아래와 같은 코드를 단순화 할 수 있다.
- 단순화 전
function greet(user: { name: string; age: number }) {
console.log('Hi, I am ' + user.name);
}
function isOlder(user: { name: string; age: number }, checkAge: number) {
return checkAge > user.age;
}- 단순화 후
type User = { name: string; age: number };
function greet(user: User) {
console.log('Hi, I am ' + user.name);
}
function isOlder(user: User, checkAge: number) {
return checkAge > user.age;
}함수 표현 방법
type Combinable = number | string;
type ConversionDescriptor = 'as-number' | 'as-text';
// function 키워드 + 파라미터와 함수 바디 한 번에
function combine1(
input1: Combinable, //number | string,
input2: Combinable,//number | string,
resultConversion: ConversionDescriptor//리터럴 타입
) {
let result;
if (typeof input1 === "number" && typeof input2 === "number" || resultConversion === 'as-number') {
result = +input1 + +input2;
} else {
result = input1.toString() + input2.toString();
}
return result;
}
// 익명함수 + 파라미터와 함수 바디 한 번에
const combine2 = (
input1: Combinable,
input2: Combinable,
resultConversion: ConversionDescriptor
) => {
...
}
// 익명함수 + 함수 시그니처 간단히
const combine3 : (a: Combinable, b: Combinable) => Combinable = () => {
//
}
🐣 Data Engineer