#1 typescript study

설치

• npm i typescript -g

ts -> js 변환 (컴파일링)

• tsc index.js

tsconfig.json

컴파일링 할때 설정 할 수 있는 옵션을 지정할때

{
  "compilerOptions": {
    "allowJs": true, // 프로젝트에 자바스크립트를 허용할지 여부
    "checkJs": true, // 타입 체크 검사 활성화
    "noImplicitAny": true // 모든 타입에 대해서 기본적인 타입이라도 부여 해야 할때
  }
}

타입스크립트 플레이 그라운드

https://www.typescriptlang.org/play

변수 선언

// JS 문자열 선언
const str = 'hello'

// TS 문자열 선언
const ts_str: string = 'hello'
const ts_num: number = 10

// TS 배열 선언
const ts_arr: Array<number> = [1,2,3]
const heroes: Array<string> = ['Capt', 'Thor', 'Hulk']
const items: number[] = [4,5,6]

// TS 튜플 (배열의 특정 인덱스의 타입을 지정)
const address: [string, number] = ['gangnam', 500]

// TS 객체
const obj: object = {}
const person: object = {
    name: 'Capt',
    age: 100
}

const people: {name: string, age: number} = {
    name: 'Capt',
    age: 100
}

// TS 진위값
const show: boolean = true

함수 선언

// 함수의 파라미터에 타입을 정의하는 방식
function sum(a: number, b: number) {
    return a + b
}

sum(10, 20)

// 함수의 반환 값에 타입을 정의하는 방식
function add():number {
    return 100
}

// 함수에 타입을 정의하는 방식
function foo(a: number, b: number):number {
    return a + b
}

// 불필요한 인자를 오류로 판단..
foo(10, 20, 30, 40)
foo(10)

// 함수의 옵셔널 파라미터
function log(a: string, b?:string) {
    // ...
}

log('sring')

옵셔널 파라미터를 사용하지 않았을때

중복제거-> 여러번 쓰이는 타입의 형태 정의하기

*(기억할것) 객체모양인데 콤마로 값을 구분하지 않고 세미콜론으로 구분되어있다.

type Todo = { id: number; title: string; done: boolean }

interface Todo {
  id: number;
  title: string;
  done: boolean
}

let todoItems: Todo[];

타입 선언 실습

*타입 선언 포인트

• 변수 선언 값
• 반환 값
• 인터페이스 사용하여 반복코드 줄이기

// type Todo = {
//   id: number;
//   title: string;
//   done: boolean
// }

interface Todo {
  id: number;
  title: string;
  done: boolean
}

let todoItems: Todo[];

// api
function fetchTodoItems(): Todo[] {
  const todos = [
    { id: 1, title: '안녕', done: false },
    { id: 2, title: '타입', done: false },
    { id: 3, title: '스크립트', done: false },
  ];
  return todos;
}

// crud methods
function fetchTodos(): object[] {
  const todos = fetchTodoItems();
  return todos;
}

function addTodo(todo: Todo): void {
  todoItems.push(todo);
}

function deleteTodo(index: number): void {
  todoItems.splice(index, 1);
}

function completeTodo(index: number, todo: Todo): void {
  todo.done = true;
  todoItems.splice(index, 1, todo);
}

// business logic
function logFirstTodo(): object {
  return todoItems[0];
}

function showCompleted(): object[] {
  return todoItems.filter(item => item.done);
}

// TODO: 아래 함수의 내용을 채워보세요. 아래 함수는 `addTodo()` 함수를 이용하여 2개의 새 할 일을 추가하는 함수입니다.
function addTwoTodoItems(): void {
  // addTodo() 함수를 두 번 호출하여 todoItems에 새 할 일이 2개 추가되어야 합니다.
  addTodo({
    id: 4,
    title: '아이템 4',
    done: false
  })

  addTodo({
    id: 5,
    title: '아이템 5',
    done: false
  })

}

// NOTE: 유틸 함수
function log(): void {
  console.log(todoItems);
}

todoItems = fetchTodoItems();
addTwoTodoItems();
log();