TypeScript basic

Juhwan Lee·2022년 5월 9일
0

Learning TypeScript

목록 보기
1/5
post-thumbnail

Core Types

📍number: typescript에서 숫자는 javascript와 같이 number만 존재합니다.

ex) 1, 5.3, -10

📍string: 모든 text values

ex) ‘hi’, “hi”, hi

📍boolean: truthy or falsy

ex) true, false

💡 타입스크립트의 주요 원시 타입은 모두 소문자입니다!

📍object: javascript의 모든 object가 가능하고, 더 나아가 특정한 타입도 가능합니다.

ex) {age:30}

중첩된 개체 및 타입

물론 객체 타입은 중첩 객체에 대해서도 생성할 수 있습니다.

다음과 같은 자바스크립트 객체가 있다고 가정해 봅시다:

const product = {
  id: 'abc1',
  price: 12.99,
  tags: ['great-offer', 'hot-and-new'],
  details: {
    title: 'Red Carpet',
    description: 'A great carpet - almost brand-new!'
  }
}

이러한 객체의 타입은 아래와 같습니다.

{
  id: string;
  price: number;
  tags: string[];
  details: {
    title: string;
    description: string;
  }
}

따라서 객체 타입 안에 객체 타입이 있다고 말할 수 있습니다.

📍Array: javascript의 모든 array가 가능하고, 유연하거나 엄격하게 타입을 제한할 수 있습니다.

ex) [1,2,3]

📍 Tuple: typescript에 추가된 type, 고정된 길이의 배열을 말합니다.

ex) [1,2]

tuple을 사용하면 data type을 보다 명확하게 알 수있습니다.

그러나 tuple에서 push는 걸러내지 못합니다.

📍 Enum: typescript에 추가된 type, 자동적으로 전역변수 식별자를 열거합니다.

ex) enum {NEW, OLD}

enum Role {
  ADMIN = 'ADMIN',
  READ_ONLY = 100,
  AUTHOR,
}
// 기본적으로 0,1,2로 시작되지만 특정 string이나 number로 지정할 수 있다.

if (person.role === Role.AUTHOR) {
  console.log('is author');
}

📍 Any: 모든 종류의 값을 가질 수 있음, 타입 배정 또한 필요없음.

→ 가능한 any를 사용하지 말자.

ex) *

Type alias 및 객체 타입

타입 별칭을 사용하여 타입을 직접 “생성”할 수 있습니다. 유니온 타입을 저장하는 것만 가능한 것이 아닙니다. 복잡할 수 있는 객체 타입에도 별칭을 붙일 수 있습니다.

예:

type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 }; // this works!

타입 별칭을 사용하면 불필요한 반복을 피하고 타입을 중심에서 관리할 수 있습니다.

예를 들어, 다음 코드를 아래와 같이 단순화할 수 있습니다.

function greet(user: { name: string; age: number }) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: { name: string; age: number }, checkAge: number) {
  return checkAge > user.age;
}

단순화 후:

type User = { name: string; age: number };
 
function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}

Void(function types)

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

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

printResult(add(5, 12));

unkown, never -> github source code 참고

profile
keep going

0개의 댓글