TypeScript
타입스크립트는 자바스크립트의 슈퍼셋으로 자바스크립트에 타입을 추가한 언어입니다.
컴파일(Compiled) 과정을 통해 런타임(브라우저, Node.js)에서 이해할 수 있는 자바스크립트 언어(Interpreted)로 변환됩니다.
✨ Compiled 언어와 Interpreted의 가장 큰 차이점은 컴파일 언어의 경우 에러가 컴파일 시점에 발견되므로 사전에 수정할 수 있습니다.
Basic Types
1. Primitive Type
- 객체와 레퍼런스 형태가 아닌 실제 값을 저장하는 자료형입니다.
- 프리미티브 형의 내장 함수를 사용 가능한것은 자바스크립트 처리 방식 때문입니다.
- ES6 기준 6가지
- boolean
- number
- string
- symbol
- null
- undefined
- 리터럴 방식으로 서브타입을 표시할 수 있습니다.
- 소문자를 이용해 타입을 나타내야 합니다.
1. boolean
let isDone: boolean = false;
isDone = true;
console.log(typeof isDone); // boolean
let isOkay: Boolean = true;
let isNotOkay: boolean = new Boolean(true); // Boolean은 래퍼 객체2. number
let decimal: number = 6; // 10진수 리터럴
let hex: number = 0xf00d; // 16진수 리터럴
let binary: number = 0b1010; // 2진수 리터럴
let octal: number = 0o744; // 8진수 리터럴
let notANumber: number = NaN;
let underscoreNum: number = 1_000_000;3. string
let myName: string = "Ji Seok";
myName = "Ji";
let fullName: string = "Yu Ji Seok";
let age: number = 12;
let sentence: string = `Hello, My name is ${fullName}.
I'm ${age} years old.
`;4. symbol
Symbol 함수로 사용해서 symbol 타입을 만들어낼 수 있습니다.
- 프리미티브 타입의 값을 담아서 사용합니다.
- 고유하고 수정 불가능한 값으로 만들어줍니다.
- 주로 접근을 제어하는데 사용하는 경우가 많습니다.(객체)
console.log(Symbol("foo") === Symbol("foo")); // false
const sym: symbol = Symbol();
const obj = {
[sym]: "value",
};
obj[sym];5. null & undefined
- 실제로 null과 undefined 라는 타입을 갖습니다.
- void 와 마찬가지로 그다지 유용하지 않습니다.
- 둘다 소문자만 존재합니다.
- 이 두 타입은 모든 타입의 서브 타입입니다. (number에 null 또는 undefined 할당 가능)
- 할당을 방지하기 위해 tsconfig 에서
--strictNullChecks를 사용해야 합니다.- 만약 null 또는 undefined 할당하려면 union 타입을 사용해야 합니다.
let myName: string = null; // Type 'null' is not assignable to type 'string'
let u: undefined = null; // Type 'null' is not assignable to type 'undefined'null in JS
- null 이라는 값으로 할당된 것을 null 이라고 합니다.
- 무언가가 있는데, 사용할 준비가 되지 않은 상태를 말합니다.
- 런타임에서 typeof 연산자를 사용하면 object 를 반환합니다.
undefined in JS
- 값을 할당하지 않은 변수는 undefined 라는 값을 갖습니다.
- 무언가 아예 준비가 덜 된 상태를 말합니다.
- 객체의 프로퍼티가 없을 때도 undefined 를 반환합니다.
- 런타임에서 typeof 연산자를 사용하면 undefined 를 반환합니다.
2. Object Type
- primitive type 이 아닌 타입을 나타낼 때 사용하는 타입입니다.
const person1 = {
name: "ji",
age: 12,
};
const person2 = Object.create({
name: "ji",
age: 12,
}); // o: object | nullarray
- array 는 객체입니다.
- 사용법
- Array<타입>
- 타입[]
let list: number[] = [1, 2, 3, 4, 5]; // 이 방식을 선호
let list2: Array<number> = [1, 2, 3, 4, 5];tuple
- 길이가 정해져있고 앞 뒤의 타입이 다른 자료형입니다.
let x: [string, number] = ["Hello", 12];
x = [123, "Hi"]; // 튜플 타입 순서에 맞지 않습니다.
x[2] = "world"; // 배열의 길이를 넘겨 오류 발생
const pesrson: [string, number] = ["Yu", 12];
const [first, second, third] = pesrson; // 배열과 다르게 정확한 타입이 정해집니다. 3. any
- 어떤 타입이어도 상관없는 타입입니다.
- 최대한 사용하지 않는 것이 핵심입니다.
- any를 사용하면 컴파일 시 타입 체크가 정상적으로 이뤄지지 않습니다.
- any를 명시적으로 쓰지 않으면 오류를 뱉도록 하는
noimplicitAny옵션이 있습니다. - any는 계속 전파가 되어서, 타입 안정성을 잃습니다.
✨ any는 적폐입니다..
function returnAny(message: any): any {
console.log(message);
}
const any1 = returnAny("리턴은 아무거나");
any1.toString();
let looselyTyped: any = {};
const d = looselyTyped.a.b.c.d; // any가 계속 전파 됩니다.
// 타입 누수
function leakingAny(obj: any) {
const a: number = obj.num; // 이 부분에서 타입 누수가 멈춥니다. 이러한 방식보단 타입 가드를 사용하는 것이 좋습니다.
const b = a + 1;
return b;
}
const c = leakingAny({ num: 0 });
c.indexOf("0");4. unknown
- 모르는 변수의 타입을 묘사해야 할 수도 있습니다. 이런 동적 콘텐츠의 누수를 멈추기 위해 unknown 타입을 사용합니다.
- any 와 비슷하지만 any 보다 type-safe한 타입입니다.
- any와 같이 아무거나 할당할 수 있습니다.
- 타입을 추론하게 끔 유형을 좁히거나, 확정해주지 않으면 사용할 수 없습니다.
- unknown 타입을 사용하면 런타임 에러를 줄일 수 있습니다.
- API에 유용
✨ any 를 사용할 자리에 unknown 을 사용해 타입을 안전하게 합니다.
declare const maybe: unknown;
const aNumber: number = maybe; // Type 'unknown' is not assignable to type 'number'.
// 타입 가드
if (maybe === true) {
const aBoolean: boolean = maybe; // true 값
const aString: string = maybe; // if 문의 maybe는 true 이기 때문에
}
if (typeof maybe === "string") {
const aString: string = maybe; // string
const aBoolean: boolean = maybe; // maybe는 string 이기 때문에
}5. never
- never 타입은 모든 타입의 서브 타입 입니다.
- never 에는 어떤 것도 할당할 수 없습니다.
- 잘못된 타입을 넣는 실수를 막고자 할 때 사용합니다.
function error(message: string): never {
throw new Error(message);
}
function fail() {
return error("failed");
}
function infiniteLoop(): never {
while (true) {}
}
let a: string = "hello";
if (typeof a !== "string") {
a; // never
}
declare const b: string | number;
if (typeof b !== "string") {
b; // number
}6. void
- 리턴된 무언가를 가지고 아무것도 하지 않을때 사용하는 타입입니다.
function returnVoid(msg: string): void {
console.log(msg);
return undefined;
}
const r = returnVoid("리턴이 없다."); // void