New 병아리 개발자

# TypeScript 

## 연산자를 이용한 타입 정의

Union Type (유니온 타입).

• union type : 특정 변수 또는 파라미터에 한가지 이상의 타입을 사용할 수 있도록하는 것. 
• 키워드 : ' | ' 연산자 사용. (or 개념)

function logMessage(value: string | number) {
    console.log(value);
}

logMessage('hello');
logMessage(100);

Union Type 장점.

• 타입 가드 : 특정 타입으로 타입의 범위를 좁혀나가는 (필터링 하는) 과정.

var seho: string | number | boolean;
function logMessage(value: string | number) {
    if (typeof value == 'number') {	// 타입 가드.
        value.toLocaleString();
    }

    if (typeof value == 'string') {	// 타입 가드.
        value.toString();
    }

    throw new TypeError('value must be string or number');
}

logMessage('hello');
logMessage(100);

Union Type 특징.

• 구조체가 union type이 되면 타입의 공통된 속성만 접근 가능.

interface Developer {
    name: string;
    skill: string;
}

interface Person {
    name: string;
    age: number;
}

function askSomeone(someone: Developer | Person) {
    someone.name    // union type으로 구조체 여러개 사용한 경우, 공통 속성만 접근 가능.
    //someone.skill   // 불가.
    //someone.age     // 불가.
}

Intersection Type (인터섹션 타입).

• 키워드 : ' & ' 연산자 사용. (and 개념)

interface Developer {
    name: string;
    skill: string;
}

interface Person {
    name: string;
    age: number;
}

var seho: string | number | boolean;
var capt: string & number & boolean;    // 불가능.

function askSomeone2(someone: Developer & Person) {
    someone.name    // 가능.
    someone.skill   // 가능.
    someone.age     // 가능.
}

유니온 타입과 인터섹션 타입의 차이점.

interface Developer {
    name: string;
    skill: string;
}

interface Person {
    name: string;
    age: number;
}

function askSomeone3(someone: Developer | Person) {
    
}

askSomeone3({name:'디벨로퍼', skill: '웹 개발'});   // Developer or Person 속성을 가져야함.
askSomeone3({name: 'abc', age:100});


function askSomeone4(someone: Developer & Person) { // 두 개 타입의 합집합에 해당하는 새로운 타입을 만들게 됨. 
    
}

askSomeone4({name:'디벨로퍼', skill: '웹 개발', age: 100}); // Developer,Person 속성 모두 가져야함.

# TypeScript 

## 타입 별칭 (Type Aliases)

• 타입 별칭 : 특정 타입, 인터페이스를참조할 수 있는 타입 변수를 의미.

// string 타입을 사용할 때
const name: string = 'capt';

// 타입 별칭을 사용할 때
type MyName = string;	// 타입별칭.
const name: MyName = 'capt';

• interface 구조도 타입 별칭을 이용해서 정의 가능.

type Developer = {
  name: string;
  skill: string;
}

타입 별칭 코드(예)

interface Person1 {
    name: string;
    age: number;
}

type Person2 = {
    name: string;
    age: number;
}

var seho1: Person1 = {
    name: '세호',
    age: 30
}

var seho2: Person2 = {  // 설정한 타입에 마우스를 올렸을 경우 구조 보임.
    name: '세호',
    age: 30
}

type MyString = string;
var str: MyString = 'hello';

type Todo = {id: string; title: string; done: boolean;};
function getTodo(todo: Todo) {
    
}

타입 별칭과 인터페이스의 차이점.

• 타입 별칭은 새로운 타입값을 생성하는 것이 아닌, 정의한타입에 대해 나중에 쉽게 참고할수 있게 이름을 부여하는 것.
• 타입별칭과 인터페이스의 가장 큰 차이점 : 인터페이스는 확장 가능 / 타입 별칭은 확장 불 가능. (그래서 가능하면 타입별칭 보다는 인터페이스로 선언하는게 좋음.)
• 아래와 같이 선언했을때 프리뷰를 살펴보면..

• 인터페이스로 선언한 타입 프리뷰.

• 타입 별칭으로 선언한 타입의 프리뷰.

# TypeScript 

## 인터페이스

• 인터페이스 : 동일한 규칙을 사용하겠다는 상호간의 약속을 의미 한다고 볼수 있음.

interface User {
    age: number;
    name: string;
}

var seho: User = {  // sech라는 변수를 User 타입으로 설정, 위에 정의한 약속에 따라 age, name 정의 필요.
    age: 12,
    name: '조세호'
}

함수의 '인자'를 정의하는 인터페이스.

// 함수에 인터페이스 활용.
function getUser(user: User) {
    console.log(user);
}

const capt: User = {
    age: 11,
    name: '캡틴'
}

getUser(capt);

함수 '구조'를 정의하는 인터페이스.

• 보통 이런 부분은 라이브러리로 만들어서 정의하기도 함.

// 함수의 스펙(=구조)에 인터페이스 활용.
interface SumFunction {
    (a:number, b:number): number;   // 인자, 반환타입 정의.
}

var sum: SumFunction;
sum = function(a:number, b:number): number {
    return a + b;
}

인덱싱 방식을 정의하는 인터페이스.

// 인덱싱
interface StringArray {
    [index: number]: string;
}

var arr:StringArray = ['aa', 'bb', 'cc'];
//arr[0]; // 'aa'
//arr[0] = 10 // string 아니므로 할당 불가.

인터페이스 딕셔너리 패턴.

// 인터페이스 딕셔너리 패턴.
interface StringRegexDictionary {
    [key: string]: RegExp;   // RegExp - 정규표현식 생성자
}

var obj: StringRegexDictionary = {
    //sth: /abc/,
    //cssFile: 'css'  // RegExp가 아닌 string 으로 에러.
    cssFile: /\.css$/,
    jsFile: /\.js$/,
}

//obj.cssFile // 이런식으로 접근 가능.
//obj['cssFile'] = 'a'    // RegExp가 아닌 string 으로 에러.

Object.keys(obj).forEach(function(value) {

})

인터페이스 확장(상속).

// 인터페이스 확장.
interface Person {
    name: string;
    age: number;
}

interface Developer extends Person {
    // name: string;
    // age: number;
    language: string;
}

var captain: Developer ={
    name: 'kim',
    age: 25,
    language: 'hi'
}

# TypeScript

## 할 일 관리 애플리케이션 TS 변환

• 학습 소스 코드 우클릭하여 터미널 진입 후 npm i 입력 하여 인스톨 진행.
• Ctrl + , 으로 VSCode 설정 실행 후 format on save 검색하여 해당 옵션 끄기(체크 해제).

index.ts

let todoItems;

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

// crud methods
function fetchTodos() {
  const todos = fetchTodoItems();
  return todos;
}

function addTodo(todo) {
  todoItems.push(todo);
}

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

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

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

function showCompleted() {
  return todoItems.filter(item => item.done);
}

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

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

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

tsconfig.js : TS 설정파일.

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true
  },
  "include": ["./src/**/*"]
}

package.json : npm 기본 설정 파일.

{
  "name": "1_todo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-typescript": "^7.9.0",
    "@typescript-eslint/eslint-plugin": "^2.27.0",
    "@typescript-eslint/parser": "^2.27.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^2.0.4",
    "typescript": "^3.8.3"
  }
}

타입 관련 추가 설명. (any, void 등)

• any : 모든 타입을 통칭.

let todoItems: any;

• void : 반환 타입이 없는 경우.

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

filter : 걸러주는 역할을 하는 함수.

let arr = [
    {gender: 'male', name: 'kim'},
    {gender: 'female', name: 'mim'},
    {gender: 'male', name: 'lim'},
]

let filltered = arr.filter(function(item){
    if (item.gender === 'female') {
        return item;
    }
});

console.log(filltered);

타입 별칭 정의_1.

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

let todoItems: Todo[];

인터페이스 이용한 정의_2.

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

let todoItems: Todo[];

TS 변환.

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

// let todoItems: Todo[];

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(): Todo[] {
  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); 
  // 위 코드와 동일.
  // return todoItems.filter(function(item) {
  //   if (item.done) {
  //     return item;
  //   }
  // })
}

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

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

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