자바스크립트의 한계점과 타입스크립트

변수 선언 시, 콜론(:)과 자료형을 같이 선언할 것.

타입스크립트는 자바스크립트에 타입 형식이 추가된 것이다!

동적 타입 시스템: 변수의 타입이 하나로만 고정되지 않고, 아무 타입의 값이나 자유롭게 담을 수 있음. 정적 타입 시스템: 변수의 타입이 하나로 고정되어 있음. 모든 변수에 타입을 다 지정해주어야 하기 때문에 타이핑 양이 매우 증가함. 점진적 타입 시스템: 모든 변수에 타입을 일일이 지정할 필요 없음.

TS 연습

/*
- 두 숫자를 더하고 결과를 반환하는 함수
- 문자열을 받아서 문자열을 반환하는 함수
- 불리언 값을 인자로 받아서 아무것도 반환하지 않는 함수 (void 반환)
- 문장에서 가장 긴 단어를 반환하는 함수 (string , 배열아님)
    - function longText(str) {} ;  “Hello, World”
*/
const add = (n1: number, n2: number): number => n1 + n2;
// const add: (n1: number, n2: number) => number = (n1, n2) => n1 + n2;
// function add(n1: number, n2: number): number {
//   return n1 + n2;
// }

// 문자열을 받아서 문자열을 반환하는 함수
const greet = (name: string): string => `Hello, ${name}`;

// 불리언 값을 인자로 받아서 아무것도 반환하지 않는 함수 (void 반환)
const isLogin = (status: boolean): void => {
  console.log(status ? "login success" : "login falied");
};

// 문장에서 가장 긴 단어를 반환하는 함수 (string , 배열아님)
const getLongestString = (value: string) => {
  return value.split(" ").sort((a, b) => b.length - a.length)[0];
};

console.log(getLongestString("a bc def ghij"));

/*
[연습문제 - 암스트롱 수 구하기]
난이도 ★★★★★

100부터 999까지 암스트롱 수를 구하세요 

&암스트롱 수란?

암스트롱의 수는 세 자리의 정수 중에서 각 자리의 수를 세 제곱한 수의 합과 자신이 같은 수를 말합니다. 
예를 들어 153 = 1 + 125 + 27 입니다. 
이와 같은 수를 암스트롱의 수라고 말합니다.

153 -> 1, 5 ,3
*/

// 매개변수로 넘어 온 수가 암스트롱 수이면 true, 아니면 false를 반환
function isArmstrongNumber(num: number): boolean {
	// 100 -> "100" -> ["1", "0", "0"] -> [1, 0, 0]
	const digits = num.toString().split("").map(Number); // 문자열 배열 -> 숫자열 배열
	const sumOfCubes = digits.reduce((sum, digit) => sum + Math.pow(digit, 3), 0);
	return num === sumOfCubes;
}

// 암스트롱 수를 출력하는 함수
function printArmstrongNumbers() {
	for(let i = 100; i <= 999; i++) {
		if (isArmstrongNumber(i)) {
			console.log(i);
		}
	}
}

printArmstrongNumbers();  // 암스트롱 수 출력

JS ver.

const todos = [];

const addTodo = (text) => {
  const todo = {
    id: todos.length + 1,
    text,
    completed: false,
  };
  todos.push(todo);
};

const removeTodo = (id) => {
  const findIndex = todos.findIndex((todo) => todo.id === id);
  todos.splice(findIndex, 1);
};

const toggleTodo = (id) => {
  const find = todos.find((todo) => todo.id === id);
  find.completed = !find.completed;
};

TS 변경 ver.

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

const todos: Todo[] = [];
const addTodo = (text: string): void => {
  const todo: Todo = {
    id: todos.length + 1,
    text,
    completed: false,
  };
  todos.push(todo);
};

const removeTodo = (id: number) => {
  const findIndex: number = todos.findIndex((todo) => todo.id === id);
  todos.splice(findIndex, 1);
};

const toggleTodo = (id: number) => {
  const find: Todo | undefined = todos.find((todo) => todo.id === id);
  if (find) find.completed = !find.completed;
};