프로그래머스 프론트엔드 데브코스를 시작 한지 벌써 한달이 흘러 갔다.
그동안 바닐라JS로 여러가지 기능 구현도 해보고, 공공 API를 사용하여 간단한 SPA 서비스를 구현 해보는 프로젝트도 진행해 봤다. ( 이는 추후에 블로그에 올려야지... 아직 정리중임 )
본격적인 라이브러리 학습전 요즘은 필수로 자리잡은 Typescript 기본문법을 이틀 동안 학습한다. ( 너무 짧은거 아잉교...😂 )
그래서 예습(?) 및 복습(?) 개념으로 '타입스크립트 핸드북'을 한번 정리해 보는 시간을 갖으려 한다.
그럼 시작해 봅시다.
기본 타입
TS는 JS와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 사용하여 더 편리하게 사용할 수 있다. ( 열거 타입이 뭐야?? 일단, 차례대로 읽어 보자. )
-
불리언(Boolean)
let isDone: boolean = false; -
숫자(Number)
let decimal: number = 0; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744;=> JS처럼, TS의 모든 숫자는 부동 소수 값이다.
=> 16진수, 10진수, 2진수, 8진수 리터럴 지원. -
문자열(String)
let color: string = 'blue'; color = 'red'; let fullName: string = 'Vanlan'; let age: number = 37; let sentence: string = `Hello, my name is ${ fullName }. I'll be ${ age + 1 } years old next month.`=> JS와 동일하게 백틱 사용가능.
-
배열(Array)
let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];=> 타입 뒤에
[]를 사용 또는 제네릭 배열Array<elemType>타입 사용. -
튜플(Tuple)
// 튜플 타입으로 선언 let x: [string, number]; // 초기화 x = ['hello', 10] // 성공 // 잘못된 초기화 x = [10, 'hello'] // 오류=> 요소의 타입과 갯수가 고정된 배열을 표현할 수 있다. ( 요소들의 타입이 모두 같을 필요는 X )
console.log(x[0].substring(1)); // 성공 console.log(x[1].substring(1)); // 오류, 'number'에는 'substring'이 없습니다.=> 인덱스를 통해 요소에 접근하면 요소의 타입이 나타남.
x[3] = 'world'; // 오류, '[string, number]' 타입에는 프로퍼티 '3'이 없습니다. console.log(x[5].toString()); // '[string, number]' 타입에는 프로퍼티 '5'가 없습니다.=> 없는 요소에 접근하면, 오류가 발생.
-
열거(Enum)
Enum이 열거였군...😂enum Color {Red, Green, Blue} let c: Color = Color.Green;=>
enum은 값의 집합에 더 나은 이름을 붙여줄 수 있다( 무슨 말인지 아직 이해가 잘... )enum Color {Red = 1, Green, Blue} let c: Color = Color.Green;=>
enum은 기본적으로는 '0' 부터 시작하여 멤버들의 번호를 매긴다.
=> 하지만, 위와 같이 멤버의 번호를 수동으로 설정해서 바꿀 수 있다.enum Color {Red = 1, Green = 2, Blue = 4} let c: Color = Color.Green;=> 모든 값을 수동으로 설정할 수도 있다.
enum Color {Red = 1, Green, Blue} let colorName: string = Color[2]; console.log(colorName); // 'Green'=>
enum의 유용한 기능 중 하나는 매겨진 번호를 사용해enum 멤버의 이름에 접근 할 수 있다.
=> 위 예처럼 '2'라는 번호 위의 어떤Color enum 멤버와 매칭되는지 알 수 없을 때, 일치하는 이름을 알아낼 수 있다. -
Any
let notSure: any = 4; notSure = 'maybe a string instead'; notSure = false;=> 알지 못하는 타입을 표현해야 될때 사용.
=> 다만, 이경우는 타입 검사를 하지 않기 때문에 사용을 지양해야 한다.( 대신,unknown타입 또는 적절한 타입 검사를 통해 타입을 유추 하는게 좋다. )
그냥 사용하지 말자. 차피 ESLint룰을 빡시게 쓰면 오류가 발생하니까! -
Void
const warnUser = (): void => { console.log('This is my warning message'); };=>
void는 어떤 타입도 존재할 수 없음을 나타냄. ( 보통 함수의 반환 값이 없을때 반환 타입을 표현하기위해 사용. )
=> 만약void타입 변수를 선언하게 되면, 그 변수에는null또는undefined만 할당이 가능. -
Null & Undefined
let u: undefined = undefined; let n: null = null;=>
null과undefined는 다른 모든 타입의 하위 타입. (number같은 타입에 할당할 수 있다는 것을 의미! )
=> 위의 설명은 TS옵션 중--strictNullChecks이 활성화 되어 있다면 사용이 불가함. -
Never
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다. const error = (msg: string): never => { throw new Error(msg); }; // 반환 타입이 never로 추론된다. const fail = () => { return error('Something failed'); }; // never를 반환하는 함수는 함수의 마지막에 도달할 수 없다. const infiniteLoop = ():never => { while(true) {} };=>
never타입은 절대 발생할 수 없는 타입을 나타냄.
=> 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 사용됨.
=>never타입은 모든 타입에 할당 가능한 하위 타입이지만, 어떤 타입도never타입에는 할당 할 수 없음. -
객체(Object)
declare function create(o: object | null): void; create({}); // 성공 create({ props: 0 }); // 성공 create(null); // 성공 create(42); // 오류 craete('string'); // 오류 craete(false); // 오류 create(undefined); // 오류 -
타입 단언(Type assertions)
let someValue: any = 'this is a string'; let strLength: number = (<string>someValue).length; let strLength: number = (someValue as string).length;=> TS의 타입 추론 보다 개발자가 값의 타입을 더 정확히 알고 있을 경우 '타입 단언'을 통해 타입을 강제 할 수 있다.
=> '타입 단언'을 하게 되면 특별한 검사나 데이터를 재구성 하지 않는다.
=> 타입단언에는 위와 같이 두가지 방법을 사용할 수 있으나,JSX를 함께 사용하는 개발환경이라면,as문법을 사용해야 한다.
