Typescript 문법

songtofu·2022년 5월 24일
0

출처

1. 기본 타입

  • 간단한 데이터 단위

1.1) Boolean

  • 참/거짓 값
let isDone: boolean = false;

1.2) Number

  • 부동 소수 값.
  • Typescript는 16진수, 10진수, ECMAScript 2015에 소개된 2진수, 8진수 리터럴도 지원
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

1.3) String

  • "'를 문자열 데이터를 감싸는데 사용.
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.`;

1.4) Array

  • 방법1: 배열 요소들을 나타내는 타입 뒤에 []을 쓰는 것.
let list: number[] = [1, 2, 3];
  • 방법2: 제네릭 배열 타입 Array<elemType>
let list: Array<number> = [1, 2, 3];

1.5) Tuple(튜플)

  • 요소 타입과 개수가 고정된 배열을 표현할 수 있다. 단, 요소들의 타입이 같을 필요는 없다.
// 튜플 타입으로 선언
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'가 없습니다.

1.6) Enum(열거)

  • 값의 집합에 이름을 붙여줄 수 있다.
  • enum은 0부터 시작하여 멤버들의 번호를 매긴다.
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
  • 멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있다.
enum Color {Red = 1, Green, Blue} // 0 대신 1부터 시작해 번호를 매긴다.
let c: Color = Color.Green;
  • 모든 값을 수동으로 설정 할 수 있다.
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
  • 유용한 기능 중 하나는 매겨진 값을 이용해 enum 멤버의 이름을 알아낼 수 있다는 것.
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName); // 값이 2인 'Green'이 출력됩니다.

1.7) Any

  • 애플리케이션을 만들 때, 알지 못하는 타입을 표현해야 할 수도 있음. 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 컨텐츠에서 올 수 있다. 이 경우 타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하길 원한다. 이를 위해 any 타입을 사용할 수 있다.
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공, 분명히 부울입니다.
  • 컴파일 중에 점진적으로 타입 검사를 하거나 하지 않을 수 있다. 혹 다른 언어에서 그렇든 Object가 비슷한 역할을 해줄 수 있을 것 같다고 생각할수 있으나, Object로 선언된 변수들은 오직 어떤 값이든 그 변수에 할당할 수 있게 해주지만 실제로 메서드가 존재하더라도, 임의로 호출 할 수 없다.
let notSure: any = 4;
notSure.ifItExists(); // 성공, ifItExists 는 런타임엔 존재할 것입니다.
notSure.toFixed(); // 성공, toFixed는 존재합니다. (하지만 컴파일러는 검사하지 않음)

let prettySure: Object = 4;
prettySure.toFixed(); // 오류: 프로퍼티 'toFixed'는 'Object'에 존재하지 않습니다.

Object
- 객체 타입인 Object는 interface, class 의 상위 타입이다.
- http://daplus.net/typescript-any%EB%8C%80-object/

  • 타입의 일부만 알고 전체는 알지 못할 때 유용, 여러 다른 타입이 섞인 배열을 다룰 수 있다.
let list: any[] = [1, true, "free"];

list[1] = 100;


### 1.8) Void
- 어떤 타입도 존재할 수 없음. (<-> any)
- 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰인다.

### 1.9) Null and Undefined
- Undefined과 null 둘 다 각각 자신의 타입 이름으로 undefined , null로 사용합니다. void처럼 그 자체로 유용한 경우는 거의 없다.
```ts
// 이 밖에 이 변수들에 할당할 수 있는 값이 없습니다!
let u: undefined = undefined;
let n: null = null;
  • 기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입니다. 이건, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미합니다.
    하지만, --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능합니다. (예외적으로 undefined는 void에 할당 가능합니다) 이건 많은 일반적인 에러를 방지하는 데 도움을 줍니다. 이 경우, string 또는 null 또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있습니다.

1.10) Never

  • 절대 발생할 수 없는 타입. ex) never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다. 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지만 never 타입을 얻게 될 수 있다.
  • never 타입은 모든 타입에 할당 가능한 하위 타입이다. 하지만 어떤 타입도 never에 할당할 수 없다. (never자신은 제외) 심지어 any도 never에 할당 할 수 없다.
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
    while (true) {
    }
}

1.11) Object(객체)

  • 원시 타입(number, string, boolean, bigint, symbol, null, undefined)이 아닌 타입을 나타낸다.
  • object 타입을 쓰면, Object.create 같은 API 가 더 잘 나타난다.
declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

1.12) Type assertions(타입 단언)

  • 가끔, TypeScript보다 개발자가 값에 대해 더 잘 알고 일을 때가 있습니다. 대개, 이런 경우는 어떤 엔티티의 실제 타입이 현재 타입보다 더 구체적일 때 발생한다.
  • 타입 단언(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;

2. 인터페이스

  • TypeScript의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것. 이를 덕 타이핑(duck typing) 혹은 구조적 서브타이핑(structural subtyping)이라고 한다.
  • TypeScript에서, 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고 코드 안의 계약을 정의하는 것뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법

2.1)

3. 함수 (Function)

  • 기명 함수(named function)과 익명 함수(anonymous function)로 만들 수 있다.
  • 이를 통해 API에서 함수 목록을 작성하든 일회성 함수를 써서 다른 함수로 전달하든 애플리케이션에 가장 적합한 방법을 선택할 수 있다.

    기명 함수 vs 익명 함수
    - 기명 함수: 브라우저가 런타임(RunTime) 이전에 선언 및 할당되는 함수
    - 익명 함수: 브라우저가 런타임(RunTime)에 할당되는 함수
    => 함수가 호이스팅되고 안 되고 차이

3.1) 함수 타입 (Function Types)

profile
읽으면 머리에 안들어와서 직접 쓰는 중. 잘못된 부분 지적 대환영

0개의 댓글