타입스트립트 기본타입 1

TS은 JS의 상위 확장이며 타입스크립트는 컴파일 이후에 자바스크립트가 된다(자바스크립트의 슈퍼셋이다)

 

🤔Typescript를 써야하는 이유

1. type 안정성과 더 나은 개발 디버깅

2. 자바스크립트와 상호 호환

3. 넓은 생태계 보유

4. 코드 퀄리티

 

 

TypeScript 설치하기

npm install -g typescript

 

 

TypeScript 컴파일러를 실행

tsc ex.ts

 

 

 

Boolean(불리언)

boolean은 true/false 값을 나타낸다.

let isDone: boolean = false;

 

Number(숫자)

TS의 모든 숫자는 부동 소수 값이기에 number라는 타입을 붙인다. 16진수, 10진수, 2진수, 8진수도 지원한다.

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

 

String(문자열)

텍스트 데이터 타입을 string으로 표현하며, JS처럼 (")나 (')로 문자열 데이터를 감싸는 데에 사용한다. 템플릿 문자열이나 백틱을 사용하면 여러 줄의 문자열을 작성할 수 있고, ${expr} 같은 형태로 표현식을 포함할 수도 있다.

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

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

 

Array(배열)

배열 타입은 2가지 방법으로 쓸 수 있다.

// 1. 배열 요소들을 나타내는 타입 뒤에 `[]` 쓰기
let list: number[] = [1,2,3];

// 2. 제네릭 배열 타입 쓰기 - `Array<elemType>
let list: Array<number> = [1,2,3];

 

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가 없음

 

Enum(열거)

enum은 값의 집합에 더 나은 이름을 붙여줄 수 있다. enum은 0부터 시작하여 멤버들의 번호를 매기며, 멤버 중 하나의 값을 수동으로 설정함으로써 번호를 바꿀 수 있다(문자열도 가능)

// 0부터 번호를 매김
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 0이 아닌 1로 시작하게끔 할 수 있음
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

// 모든 값을 수동으로도 설정 가능함
enum Color {Red = 1, Green = 3, Blue = 6}
let c: Color = Color.Green;

특정 값이 어떤 Color enum멤버와 매칭되는지를 알고 싶을 때, 이 값을 이용하면 일치하는 enum 멤버의 이름을 알아낼 수 있다.

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

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

 

 

Any

알지 못하는 타입(사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 컨텐츠로 부터 온 값들)을 표현해야 할 때, 타입 검사를 하지 않는 any를 사용할 수 있다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공

any 타입은 컴파일 중 타입 검사를 할 수도 있고 안할 수도 있다. Object로 선언된 변수들은 어떤 값이든 그 변수에 할당할 수 있게 해주는 점에서 any와 비슷한 역할을 할 수 있을 것 같지만, 실제로는 메서드가 존재하더라도 임의로 호출할 수는 없다.

let notSure: any = 4;
notSure.ifItExists(); // 성공, ifItExists는 런타임엔 존재할 것
notSure.toFixed(); // 성공, toFixed는 존재함(하지만 컴파일러는 검사하지 X)

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

 

 

Object(객체)

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); // 오류

 

 

읽기 전용 속성

속성명 앞에 readonly 키워드를 붙여 해당 속성의 재할당을 막을 수 있다. readonly 키워드가 붙은 속성은 const 키워드를 이용한 변수의 정의와 비슷하게 동작한다.

const user: {
readonly name: string;
height: numer;
} = { name: '김소라', height: 155 };
[user.name](<http://user.name/>) = '김소라'; // error TS2540: Cannot assign to 'name' because it is a constant or a read-only property.