[TypeScript] TypeScript 기본 문법 - 1

 

---

원시타입, 리터럴타입

원시 타입

- 하나의 값만 저장하는 타입

- 예) number, string, boolean, null, undefined

// number
let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity;
let num6: number = -Infinity;
let num7: number = NaN;

// string
let str1: string = "hello";
let str2: string = "hello";
let str3: string = `hello`;
let str4: string = `hello ${num1}`;
let str5: string = "hello";

// boolean
let bool1: boolean = true;
let bool2: boolean = false;

// null
let null1: null = null;

// undefineed
let unde1: undefined = undefined;

 

 

 리터럴 타입

- 특정 값만 저장하는 타입

// literal
let num8: 10 = 10; // 10만 허용
let str6: "hi" = "hi"; // hi만 허용
let bool3: true = true; // true만 허용
let bool4: false = false; // false는 지원 암함

 

배열과 튜플

배열

- 여러가지 값을 한번에 저장하고 있는 값

- 일차원 배열과 다차원 배열로 나눌 수 있다.

 

튜플

- 길이와 타입이 고정된 배열

- 자바스크립트로 변환 시 배열로 사용된다.

// 배열
let numArr: number[] = [1, 2, 3];

let strArr: string[] = ["a", "b", "c"];

let boolArr1: boolean[] = [true, false, true];
let boolArr2: Array<boolean> = [true, false, true];

let allArr: (string | number | boolean)[] = [1, "a", true];

// 2차원 배열
let arr1: number[][] = [
  [1, 2, 3],
  [4, 5],
];

// 튜플
let tup1: [number, number] = [1, 2];
// tup1 = [1, 2, 3] // type error
// tup1 = ['1', '2'] // type error

const user: [string, number][] = [
  ["a", 1],
  ["b", 2],
  ["c", 3],
  // [4, "d"], // type error
];
=

 

 

객체 타입

- 프로퍼티를 가지고 있는 값, 일반적으로 키(key)와 값(value)의 쌍으로 구성 된다.

- 데이터와 함수를 가지는 자료구조

// 객체
let user1: {
  id: number;
  name: string;
} = {
  id: 1,
  name: 'kim'
}
user1.id;
user1.name;

let car: {
  brand: string;
  readonly model: string; // 값 수정 불가
  year: number;
  isRunning: boolean;
  start: () => void;
  stop: () => void;
} = {
  brand: "Toyota",
  model: "Camry",
  year: 2022,
  isRunning: false,
  start: function () {
    this.isRunning = true;
    console.log("The car is started.");
  },
  stop: function () {
    this.isRunning = false;
    console.log("The car is stopped.");
  },
};
// car.model = "new Camry"; // error

 

 

타입 별칭

- 중복되는 타입을 변수처럼 사용하는 것

type User = {
  id: number;
  name: string;
  nickname: string;
  age: number;
};

// type User = { // 같은 scope내 변수는 타입을 중복이 안 된다.
//   id: number;
//   name: string;
//   hobby: string;
// };

function newUser() {
  type User = { // 다른 타입에 별칭을 재정의 하는 가능하다.
    id: number;
    name: string;
    hobby: string;
  };

  let user4: User = {
    id: 1,
    name: "kim",
    hobby: "love",
  };
};


let user2: User = {
  id: 1,
  name: "kim",
  nickname: "kimm",
  age: 20,
};

let user3: User = {
  id: 2,
  name: "park",
  nickname: "parkk",
  age: 22,
};

user1.id;
user1.name;

 

인덱스 시그니처

- 작성 시 규칙에 어긋나지만 않으면 빈값이나 다른 예외 처리

- string  값만 있다거나 할 때 코드 작성을 간편하게 할 수 있다.

// 인덱스 시그니처
type Codes = {
  ko: string; // ko 무조건 지정
  [key: string]: string;
};
// type Codes2 = {
//   ko: string; // error - 인덱스 시그니처의 값과 타입은 동일해야 한다.
//   [key: string]: number;
// };

let country1: Codes = {
  ko: "ko",
  en: "en",
  vi: "vit",
};

// let country2: Codes = {}; // error - ko 값이 없다.

 

Enum 타입

- 열거형 타입이라고 부른다.

- 키값으로 작성해도 정해진 값으로 할당 할 수 있어서, 편리하고 안전하게 코드 작성이 가능하다.

- 열거형(enum)은 컴파일 시에 자바스크립트 객체로 변환되며, 타입 지정이 유지되는데, 이는 할당된 값이 유지된다

// enum
enum Rloe {
  admin = 0,
  user = 1,
}
const user4 = {
  name: "kim",
  rloe: Rloe.admin,
};
const user5 = {
  name: "lee",
  rloe: Rloe.user,
};
const user6 = {
  name: "park",
  rloe: Rloe.user,
};

enum Index {
  start = 10,
  next = 1,
}

console.log(Index.next); // 11
// enum은 값이 없는 경우 자동으로 1씩 값이 증가되어 할당된다.

 

 

Any와 Unknown 타입

특정 변수의 타입을 확실하게 모를 때, 자바스크립트처럼 사용하고자 타입을 체크하지 않는 경우 사용

- any : 타입이 다른 값을 재할당 할 수 있다. 타입 검사에서 예외 처리 되어 런타임에 오류가 발생 할 수 있기 때문에 지양하는 것이 좋다.

- unknown : 전체 집합 타입, 타입이 다른 값을 재할당 할 수 없다. 연산자도 사용할 수 없다. 변수를 다른 값에 저장하거나 조작하는 메서드 코드를 체크하여 컴파일 시 오류를 알 수 있다. 

 

// any
let anyVar1 = 10;
// anyVar = "10"; // error - 초기값 지정 시 타입 자동 지정 된어 숫자만 할당 가능

let anyVar2:any = 10;
anyVar2 = "10";
anyVar2 = () => {};
anyVar2.split('.'); // error - 런타임시 문자열이 아니라 오류가 발생 함

// unknown
let anyVar3: unknown = 10;
anyVar3 = "10";
anyVar3 = () => {};
// anyVar1 = anyVar3; // error - unknown 변수는 다른 값으로 참조할 수 없다.
// anyVar3.split("."); // error - unknown에 프로토타입이 없는 함수는 오류, 연산 포함

 

 

Void와 Never 타입

- void : 아무것도 없음을 뜻하는 함수의 반환 타입, undifined만 return 이 가능하다.

- never: 존재하지 않는 타입을 반환해야 할때, 불가능하고 모순이 있는 타입을 지정할 때 사용, nerver 타입 변수는 undifined를 포함하여 타입이 있는 값은 할당 할 수 없다.

// void
function func1():string {
    return "hi";
}

function func2():void {
  console.log('hi')
}

function fun3():void { // void는 값을 반환 값이 없는 함수라는 뜻이고 undefined만 리턴 가능하다.
  // let result = "a";
  // let result = boolean;
  // let result = {};
  // let result = null;
  let result; // undefined
  return result;
}

// never
function fun4(): never {
  while (true) {}
}
function fun5(): never {
  throw new Error();
}

// never는 타입을 저장할 수 없다.
let a: never;
let b: any;
// a = 1; // error
// a = 'a'; // error
// a = ()=> {}; // error
// a = null; // error
// a = undefined; // error
// a = b; // error

 

 

출처

• 한 입 크기로 잘라먹는 타입스크립트(TypeScript)