TypeScript 기본 타입
안녕하세요. Humanscape의 개발자 David입니다.
이전 글인 TypeScript를 사용하는 이유에 이어 TypeScirpt 문서의 Handbook 을 살펴보겠습니다.
Handbook은 크게 두 가지 세션(The Handbook: TypeScript에 대한 포괄적인 개념, The Handbook Referance: TypeScript 작동 개념에 대한 풍부한 이해)으로 나누어져있습니다. 오늘을 The Handbook의 기본타입 내용을 다루겠습니다.
Handbook을 공부하고 나면 아래와 같은 능력이 생기게됩니다.
- 일반적으로 사용하는 TypeScript 구문 및 패턴을 읽고 이해하기
- 중요한 컴파일러 옵션의 효과 설명하기
- 대부분의 경우에서 타입 시스템 동작을 올바르게 예측하기
- 간단한 함수, 객체 또는 클래스에 대한 .d.ts 선언 작성하기
기본타입
Boolean, Number, String, Array, Tuple, Enum, Any, Void, Null and Undefined, Never, Object, Type assertions, let
Boolean
let isDone: boolean = false;Number
JavaScript처럼, TypeScript의 모든 숫자는 부동 소수 값입니다.
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;String
let color: string = "blue"; // "", '' 모두 가능
color = 'red';let fullName: string = `Bob Bobbington`;
let age: number = 37;// sentence1과 sentence2의 결과는 같다.
let sentence1: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;let sentence2: string = "Hello, my name is " + fullName + ".\n\n" +
"I'll be " + (age + 1) + " years old next month.";
Array
let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];위 두 가지 선언은 완전 같을까?
number[]는 Array<number>의 축약형이기 때문에 의미적으로 완전히 같다.
Despite its appearance, the
readonlytype modifier can only be used for syntax on array types and tuple types. It is not a general-purpose type operator.
그러나 readonly modifier에서는 아래와 같은 차이가 있다. (참고PR링크, 참고질문링크)
let err1: readonly Array<boolean>; // error!
let okay: readonly boolean[]; // works fine
let okay2: ReadonlyArray<boolean>; // works fineTuple
튜플 타입 변수는 Array와는 달리 정확히 명시된 개수 만큼의 원소만을 가질 수 있습니다.
let x: [string, number];
x = ["hello", 10]; // 성공
x = [10, "hello"]; // 오류
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'가 없습니다.
// 단, Array 타입의 프로토 타입 매소드로의 접근은 허용
const validNameAndHeight: [string, number] = ['다비드', 182];
validNameAndHeight.push(123); // 성공Enum
enum Color {Red, Green, Blue}
let c: Color = Color.Green;// 기본적으로 Enum은 0부터 시작, 아래와 같이 1부터 시작하도록 바꿔줄 수 있음
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;// 수동 지정도 가능
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;// enum의 유용한 기능 중 하나는 매겨진 값을 사용해 enum 멤버의 이름을 알아낼 수 있다는 것입니다.
// 예를 들어, 2라는 값이 위의 어떤 Color enum 멤버와 매칭되는지 알 수 없을 때, 이에 일치하는 이름을 알아낼 수 있습니다:
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
console.log(colorName); // 값이 2인 'Green'이 출력됩니다.
Any
알지 못하는 타입을 표현해야할 때, 컴파일에서 오류를 잡고 싶지않을 때 사용합니다. 3rd 라이브러리 같은 동적인 콘텐츠를 핸들링 할 때 쓰일 수 있습니다.
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공let notSure: any = 4;
notSure.ifItExists(); // 성공, ifItExists 는 런타임엔 존재
notSure.toFixed(); // 성공, toFixed 존재. (하지만 컴파일러는 검사하지 않음)let prettySure: Object = 4;
prettySure.toFixed(); // 오류: 프로퍼티 'toFixed'는 'Object'에 존재하지 않음let list: any[] = [1, true, "free"];
list[1] = 100; // 성공
Void
void는 어떤 타입도 존재할 수 없음을 나타내기 때문에, any의 반대 타입 같습니다.
function warnUser(): void {
console.log("This is my warning message");
}let unusable: void = undefined;
unusable = null; // 성공 `--strictNullChecks` 을 사용하지 않을때만
(참고) JS의 void 사용 케이스
Null, Undefined
기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입니다. 이건, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미합니다.
// 이 밖에 이 변수들에 할당할 수 있는 값이 없습니다!
let u: undefined = undefined;
let n: null = null;하지만, --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능합니다. (예외적으로 undefined는 void에 할당 가능합니다) 이건 많은 일반적인 에러를 방지하는 데 도움을 줍니다. 이 경우, string 또는 null 또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있습니다. 유니언 타입은 상급 주제로, 이후 챕터에서 다룹니다.
// As a note: 가능한 경우 --strictNullChecks를 사용할 것을 권장합니다. 하지만 핸드북의 목적에 따라, 사용하지 않는다고 가정합니다.Never
never는 어떤 타입과도 호환되지 않는 타입입니다. 논리적으로 끝까지 실행될 수 없는 함수의 반환 값은 never타입이 됩니다.
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
throw new Error(message);
}// 반환 타입이 never로 추론된다.
function fail() {
return error("Something failed");
}// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
while (true) {}
}
위 fail 함수는 타입이 없지만 논리적으로 끝까지 실행될 수 없으니 never 타입추론됩니다.
타입 추론이란? 타입스크립트는 타입 표기가 없는 경우 타입 정보를 제공하기 위해 한다고 합니다.
// x는 타입이 없지만 number로 추론합니다.
// 이러한 추론은 변수와 멤버를 초기화하고, 매개변수의 기본값를 설정하며, 함수의 반환 타입을 결정할 때 발생합니다.
let x=3;Object
declare function create(o: object | null): void;create({ prop: 0 }); // 성공
create(null); // 성공create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류// object vs Object vs {}
// object: 원시형이 아닌 모든 값들을 받을 수 있다.
// 여기서 원시형은 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 7가지 이다.
// Object: 자바스크립트에 포함된 모든 생성자들은 Object를 extend한다. 따라서 Object에는 모든 객체가 할당될 수 있다.
function foo1(bar:object){console.log(bar);}
function foo2(bar:Oject){console.log(bar);}
function foo2(bar:{}){console.log(bar);}foo1([1,2,3]); // OK
foo1({a:1, b:2}); // OK
foo1(123); // Error!!foo2([1,2,3]); // OK
foo2({a:1, b:2}); // OK
foo2(123); // OKfoo3([1,2,3]); // OK
foo3({a:1, b:2}); // OK
foo3(123); // OK
Object vs any
let foo: any;
let bar: Object;
console.log(foo.customMethod()); // 1. error
console.log(bar.customMethod()); // 2. error- foo 의 타입이 any 이기 때문에 어떠한 값이 들어와도 된다. 즉 customMethod가 있는지 없는지는 트랜스파일 단계에서는 문제가 되지 않습니다.
- 트랜스파일 단계에서 에러가 난다. Object 타입에 customMethod 라는 메서드가 정의 되어있지 않기 때문이다.
Type assertions(타입 단언)
개발자가 더 타입에 대해 잘 알 때, Type assertions은 컴파일러에게 "날 믿어, 난 내가 뭘 하고 있는지 알아"라고 말해주는 방법입니다.
다른 언어의 타입 변환(형 변환)과 유사하지만, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않습니다.
이는 런타임에 영향을 미치지 않으며, 온전히 컴파일러만 이를 사용합니다.
// 사용 예시1: angle-bracket 문법
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;// 사용 예시2: as 문법
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
감사합니다.
Get to know us better!
Join our official channels below.
Telegram(EN) : t.me/Humanscape
KakaoTalk(KR) : open.kakao.com/o/gqbUQEM
Website : humanscape.io
Medium : medium.com/humanscape-ico
Facebook : www.facebook.com/humanscape
Twitter : twitter.com/Humanscape_io
Reddit : https://www.reddit.com/r/Humanscape_official
Bitcointalk announcement : https://bit.ly/2rVsP4T
Email : support@humanscape.io
