'전체 글'에 해당되는 글 78건

기본 자료형

• Boolean : 가장 기본적인 데이터 타입, 단순히 true/false 값을 가진다.

let isDone: boolean = false;

• Number : 자바스크립트에서 모든 숫자는 부동소수점 값이다.
  • 10진수 및 10진수 표기법 외에도 타입스크립트는 ECMAScript 2015에 도입된 2진수 및 8진수 표기법도 지원한다.

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

• String : 텍스트 데이터를 가진다.
  • 다른 언어와 마찬가지로 string 타입을 사용하여 이러한 텍스트 데이터 타입을 참조한다.
  • 타입스크립트는 자바스크립트와 마찬가지로 큰  따옴표 또는 작은 따옴표로 문자열 데이터를 묶습니다.
  • 또한 (여러 줄에 걸쳐 있고 표현식이 내장된) 템플릿 문자열을 사용 할 수 있습니다. 
    • 이 문자열은 역 따옴표(`) 문자로 묶여 있으면 내장된 표현식은 ${ expr }로 표현합니다.

let color: string = "blue";
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.

I'll be ${ age + 1 } years old next month.`;

아래와 같은 문장을 선언하는 것과 같습니다.

let sentence: string = "Hello, my name is " + fullName + ".\n\n" +
    "I'll be " + (age + 1) + " years old next month.";

• Array : 데이터의 나열
  • 타입스크립트는 자바스크립트와 마찬가지로 값 배열로 작업 할 수 있습니다.
  • 배열 타입은 두 가지 방법 중 하나를 쓸 수 있습니다.
    • 첫 번째는 요소의 타입 다음에 []를 사용하여 해당 요소 타입의 배열을 나타냅니다.
    • 두 번째는 일반적인(제네릭) 타입 배열인 Array<elemType> 사용합니다. 

let list: Array<number> = [1, 2, 3];

• Tuple : x개의 요소로 된 집합
  • 타입이 같을 필요없고 타입이 알려진 고정 된 수의 요소로 배열을 표현 할 수 있습니다.
  • 예를 들어, string과 number의 쌍으로 값을 나타낼 수 있습니다.
  • 컴파일러에게 알린 인덱스로 요소에 액세스하면 정확하게 해당 타입이 검색됩니다.
  • 컴파일러에게 알린 인덱스의 외부 집합에 액세스하면 오류가 발생합니다.
    • 아주 빽빽거린다. => 행복하다.

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

console.log(x[0].substring(1)); // OK
console.log(x[1].substring(1)); // Error, 'number' does not have 'substring'

x[3] = "world"; // Error, Property '3' does not exist on type '[string, number]'.

console.log(x[5].toString()); // Error, Property '5' does not exist on type '[string, number]'.

• Enum : 열거되는 요소의 집합
  • 자바스크립트의 표준 데이터타입 집합에 유용한 추가 기능 입니다.
    • C#과 같은 언어에서는 enum은 숫자 값 집합에 친숙한 이름을 부여합니다.
  • 각 열거자(값)은 상수 역할을 합니다.
  • 기본적으로 enum은 0부터 시작하여 메버 번호를 매깁니다.
    • 멤버 중 하나의 값을 수동적으로 설정하여 변경 할 수 있습니다.
    • 예를 들어, 0대신 1로 시작 할 수 있습니다.
    • 심지어 enum의 모든 값을 수동적으로 설정 할 수 있습니다.
  • enum 타입의 편리한 기능은 숫자 형 값에 enum 타입의 해당 값 이름으로 이동할 수 있다는 것 입니다.
    • 값이 2이지만 아래 Color enum에 매핑 된 내용이 확실하지 않는 경우라도 해당 이름을 찾을 수 있습니다.
      • 묵시적으로 값이 2라면!

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

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 Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName); // Displays 'Green' as its value is 2 above

• Any
  • 애플리케이션을 작성할 때 모르는 변수 타입을 지정하기 곤란할 때 유용합니다.
  • 사용자 또는 서드파티 라이브러리 같은 동적인 컨텐츠에 유용합니다.
    • 타입 검사를 옵트 아웃하고 값이 컴파일 타입 검사를 대상에서 제외 할 수 있습니다.
    • 단지 any 타입을 붙이면 끝~ 개꿀띠
  • any 타입은 기존 자바스크립트와 함께 작동하는 강력한 방법이므로 컴파일 중에 타입 확인을 점차적으로 옵트인 및 옵트 아웃 할 수 있습니다.
    • 옵트 인
      • Option in 약자
      • 체크박스가 체크가 안 되어 있는 상태
      • 동의를 위해서 행위가 필요한 상태
    • 옵트 아웃
      • Option out의 약자
      • 체크박스가 체크가 되어 있는 상태
      • 동의를 요구하지 않아도 되는 상태
  • 다른 언어와 마찬가지로 Object가 유사한 역할을 수행 할 것으로 예상 할 수 있습니다.
    • 그러나 Object 타입의 변수는 값을 지정할 수만 있습니다.
    • 실제로 존재하는 메소드 조차도 임의의 메소드 호출을 할 수 없습니다.
  • 주의! 원시 객체 타입이 아닌 Object 사용을 피하세요.
    
    • Do’s and Don’ts 설명 참고
  • any 타입은 타입의 일부를 알고 있다면야 편리하겠지만 아마도 그렇지도 않을 겁니다.
    • 예로 배열이 있지만 배열에 다른 타입이 혼합되어 있습니다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

let list: any[] = [1, true, "free"];

list[1] = 100;

• Void : 자료형이 없습니다.
  • void는 any의 정반대 입니다.
  • 어떤 타입도 존재하지 않습니다.
  • 일반적으로 값을 반환하지 않는 함수에서 볼 수 있습니다.
  • void 타입의 변수 선언은 유용하지 않습니다. null을 할당하거나 undefined 이기 때문입니다.
    • --strictNullChecks is not specified 가명시되어 있지 않다면 제일 아래 예문을 참고하세요.

function warnUser(): void {
    console.log("This is my warning message");
}

let unusable: void = undefined;
unusable = null; // OK if `--strictNullChecks` is not given

• Null 과 Undefined
  • 타입스크립트에서 undefined와 null은 실제로 각각 undefined와 null이라는 자체 타입을 갖습니다.
  • void와 마찬가지로, 이것들 자체로는 별 유용하지 않습니다.
    • 원시 값이 아닌 엄연히 타입이 존재한다. (이게 엄청 중요한 내용까지는 아니고 그렇다고 ㅋㅋㅋ)
  • 기본적으로 null 및 undefined는 다른 모든 타입의 하위타입 입니다.
    • 즉, null과 undefined를 number와 같은 것들에 할당 할 수 있습니다.
    • 그러나 --strictNullChecks 플래그를 사용하는 경우 null 및 undefined는 any 타입에만 할당 할 수 있습니다.
      • 주의! undefined를 void로 지정할 수 도 있다는 예외가 있습니다.
    • 이렇게하면 많은 일반적인 오류를 피할 수 있습니다.
      • string 또는 null 또는 undefined를 전달하려는 경우, union 타입을 사용할 수 있습니다.
        • string | null | undefined
        • union 타입은 다른 챕터에서 다루는 고급 주제입니다.
    • 참고, 가능하면 --strictNullChecks를 사용하는 것이 좋지만이 핸드북에서는이 기능이 꺼져 있다고 가정합니다.

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

• Never
  • never 타입은 절대 발생하지 않는 값의 타입을 나타냅니다.
  • never은 항상 예외를 던지거나 절대 반환하지 않는 함수 표현식 또는 화살표 함수 표현식을 위한 리턴 타입 입니다.
    • 절대로 true이 될 수 없는 어떤 타입 가드에 의해 좁혀 질 때, 변수는 또한 결코 never 타입을 얻지 못합니다. 
      • 타입 가드
        • 조건부 블록 내에서 객체의 타입을 좁힐 수 있습니다.
        • 음... 아마도 never라는 타입 명시를 통해 반환되는 것이 never 타입이 아닌 예외 같은 것이기 때문이다.
  • never 타입은 모든 타입의 하위 타입이며 모든 타입에 지정 할 수 있습니다.
    • 그러나 no 타입(타입 없음)은 (never를 제외한) never의 타위 타입 이며 할당 할 수 있습니다.
    • any조차도 never를 할당 할 수 없습니다.
  • never를 반환하는 함수의 예

// Function returning never must have unreachable end point
function error(message: string): never {
    throw new Error(message);
}

// Inferred return type is never
function fail() {
    return error("Something failed");
}

// Function returning never must have unreachable end point
function infiniteLoop(): never {
    while (true) {
    }
}

• Object
  • object는 원시 타입이 아닌 대표적인 타입 입니다.
  • 즉, number, string, boolean, bigint, symbol, null 또는 undefined가 아닌 모든 것 입니다.
  • object 타입은 Object.create 같은 API로 더 잘 나타낼 수 있습니다.

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

• Type assertion (타입 단언)
  • 때로는 타입스크립트 보다 값에 대해 더 많이 알게 될 수도 있습니다.
    • 일반적으로 일부 엔티티가 현재 타입보다 더 구체적 일 수 있음을 알고 있을 때 발생합니다.
  • Type assertion은 컴파일러에게 말하는 한 방법 입니다.
    
    • "날 믿어! 내가 무엇을 하고 있는 지 알고 있어!"
  • Type assertion은 다른 언어로 작성된 타입과 같습니다.
    
    • 그러나 데이터의 특별한 검사 또는 재구성은 수행하지 않습니다.
  • 런타임에 영향을 미치지 않으며 컴파일러가 순수하게 사용합니다.
  • 타입스크립트는 프로그래머가 필요한 특수 검사를 수행했다고 가정합니다.
  • Type assertion은 두 가지 유형이 있습니다.
    
    • 하나는 "angle-bracket"( < > ) 문법 입니다.
    • 다른 하나는 as 문법 입니다.
    • 아래 두 새플은 동일합니다. 둘 중 하나만 사용하는 것이 대부분 선호하는 선택 입니다.
    • 그러나 JSX와 함께 타입스크립트를 사용하는 경우 as 문법만 허용됩니다.

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

• let에 대한 참고 사항
  • 본 문서에서는 친숙한 Javascript의 var 키워드 대신 let 키워드를 사용하고 있습니다. ( 난 아닌데... 죽어버려라 var 키워드 )
  • let 키워드는 ES2015에서 JavaScript에 도입되었으며 var보다 안전하므로 이제 표준으로 간주됩니다.
  • 자세한 내용은 나중에 설명하지만 let을 사용하면 JavaScript의 많은 일반적인 문제가 완화됩니다.
  • 가능하면 var 대신 let을 사용해야합니다.