TIL 40 | TypeScript Basic Type

song hyun·2021년 12월 29일
0

TypeScript

목록 보기
1/4
post-thumbnail

🛠 TypeScript 사용하는 이유

Typescript는 사용하는 목적은 코드의 목적을 명시하고, 목적에 맞지 않는 변수 또는 함수 함수에서 에러를 사전에 제거하기 위해서 이다.

✌ Basic type - string number, boolean

함수에서 매개변수로 받은 타입들을 명시.

// string, number, boolean
function add(n1: number, n2: number, showResult: boolean, phrase: string) {
  const result = n1 + n2;

  if (showResult) {
    console.log(phrase + result);
  } else {
    return result;
  }

};

const number1 = 5;
const number2 = 2.8;
const printResult = true;
const resultPhrase = "Result is : ";

add(number1, number2, printResult, resultPhrase);

✌ 타입 추론, 타입 할당

  • 타입 추론 : 받는 타입을 추론한다.
  • 타입 할당 : 어떤 타입 받을지 지정함으로써 선언과 초기화 단계에서 쓰인다.
function add(n1: number, n2: number, showResult: boolean, phrase: string) {

  // 타입 추론
  const result = n1 + n2;

  if (showResult) {
    console.log(phrase + result);
  } else {
    return result;
  }

};

// 타입 할당
let number1: number;
number1 = 5;
let number2 = 2.8;
const printResult = true;
let resultPhrase: string;
resultPhrase = "Result is : ";

add(number1, number2, printResult, resultPhrase);

✌ Basic type - object

객체는 {}기호를 사용해서, key/value type을 명시한다.

// 중첩된 객체
const product: {
  id: string;
  price: number;
  tags: string[];
  details: {
    title: string;
    dascription: string
  }
} = {
  id: 'vo2020',
  price: 12.99,
  tags: ['great-offer', 'hot-and-new'],
  details: {
    title: 'Red Carpet',
    dascription: 'A great carpet - almost brand-new!'
  }
};

✌ Basic type - Array

배열에 요소들의 타입이 다를 때 any써서 대체할 수 있지만, 함부로 쓰면 안된다.

let activities: string[];
activities = ['Tv', '1']

✌ Basic type - Tuple

  • 요소의 타입과 개수 고정된 배열을 표현할 때 사용
  • 배열의 길이가 고정되어있으므로 배열의 길이는 수정안된다.
// Tuple
const user: {
  name: string;
  age: number;
  hobbies: string[];
  role:[number, string]
} = {
  name: 'Tom',
  age: 20,
  hobbies: ['Sports', 'Cooking'],
  role:[2, 'author']

✌ Basic type - Enum

  • 열겨형(Enum)은 0부터 시작하여 값에 집합에 이름 붙인 것이다.
  • Enum은 시작 번호 사전에 명시하여 1로도 바꿀 수 있고, 모든 값을 수동으로 설정 가능하다.
  • Enum은 첫 글자는 대문자로 작성한다.
// Enum
enum Role { ADMIN = 5, USER = 100, AUTHOR = 200 };

const user = {
  id: 'vi2020',
  age: 30,
  hobbies: ['Sports', 'Cooking'],
  role: Role.USER,
};

if (user.role === Role.USER) {
  console.log('yes user'); // yes user
}

✌ Basic type - Any

  • any는 어떤 종류의 값이나 데이터가 있는 모를 때 대비책으로만 사용해야한다.
  • any는 모든 타입을 허용하면서, JavaScript로 작업 사용할 수 있는게 장점이다.
  • any를 함부로 쓰게 되면 TypeScript가 컴파일 단계에서 아무것도 검사 못하는 큰 단점이다.
  • 즉, any는 어떤 값도 가질 수 있기 때문에 TypeScriptr가 컴파일 단계에서 타입을 검사하지 않을 수도 있다
// any
let activities: any[];
activities = ['Tv', 1]

✌ Basic type - Void

void는 함수에 반환(return)값이 없을 때 사용된다.

function add(n1: number, n2: number) {
  return n1 + n2;
}

function printResult(num: number): void {
  console.log('Result : ' + num);
}

printResult(add(5, 12))

✌ Basic type - Never

  • never 타입은 절대 발생할 수 없는 타입을 나타낸다.
  • never는 함수 표현식 또는 화살표 함수에서 오류를 발생시키거나 절대 반환지 않는 반환 타입으로 쓰인다.
  • never는 모든 타입에 할당 가능한 하위 타입이다.
  • never는 함수의 마지막에 도달할 수 없다.
function generateError(msg: string, code: number): never {
  throw { msg: msg, code: code };
}

generateError('An error occured!', 500);

Reference

기본 타입 →(SITE)

profile
Front-end Developer 🌱

0개의 댓글