6/25 TIL (TypeScript)

📖 진행한 공부 📖

• 프로그래머스 Lv 1. 문자열 내림차순으로 배치하기
• TypeScript 기초

문자열 내림차순으로 배치하기

문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요.
s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.

제한사항

• str은 길이 1 이상인 문자열입니다.

입출력 예
s = "Zbcdefg" return = "gfedcbZ"

나의 풀이

function solution(s) {
    return s.split("").sort().reverse().join("");
}

배열 메서드인 sort() 를 사용하기 위해 split("") 로 배열로 만들어서 거꾸로 바꿔준 뒤, 다시 join("")을 통해 문자열로 복귀

TypeScript 기초

TypeScript = JavaScript + 타입 시스템

즉 자바스크립트 확장팩
정적 타입시스템을 가지고 있는 언어
프로그램이 실행되기 전 (컴파일 타임)에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식, 이를 통해 프로그램의 많은 오류를 미리 발견

정적 시스템이 좋은 이유

• 오류를 미리 발견
• 더 빠른 실행
• 안정성

거의 대부분의 js의 단점은 매우 자유롭고 모든 걸 수정할 수 있다! 에서 오게 되는데
이 문제점을 정적 타입시스템으로 보완한 훌륭한 언어가 ts

ts는 js와 똑같이 동작하는 확장팩 그 이상 그 이하도 아님

브라우저에서 동작하기 위해 ts는 js로 100% 컴파일 됨

우리가 앞으로 많이 사용하게 될 타입
1. number(숫자)
2. string(문자열)
3. Boolean(불리언)
4. Object : Array(배열), Function(함수)
5. Void
6. undefined
7. any
8. null

이런 원시타입들은 바로 사용할 수 있는 built-in type들임
우린 Custom Type들이 필요함

type alias(타입 별칭) 과 interface 를 사용할 수 있어요

인터페이스는 객체 형태로만 선언 가능 (중복 선언 가능)

타입추론과 어노테이션

타입추론
TypeScript는 코드에서 타입을 명시적으로 지정하지 않아도, 코드의 문맥을 통해 타입을 자동으로 추론할 수 있음. 타입 추론은 TypeScript의 중요한 기능 중 하나로, 개발자가 타입을 명시적으로 지정하지 않아도 타입 안전성을 유지할 수 있게 도와줌

이처럼 타입추론에 의존하게 되면 타입스크립트의 특징인 안전한 코드 작성에서 멀어질 수 있는 위험이 있기 때문에 처음 타입을 작성할 때, 꼼꼼히 타입 어노테이션을 해주는 것이 좋음

타입 어노테이션
우리가 타입스크립트에게 우리가 쓰고 있는 타입이 무엇인지를 알리기 위해서 타입 어노테이션 이라는 것을 해줘야 함

방법은 매우 쉬움. 우리가 타입을 쓰려고 하는 곳 앞에다가 :을 붙이고 타입을 설명해주면 됨 ex) : number

구조적 타입
ts의 타입 시스템은 구조적 타입 시스템임. 구조적 타입 시스템에서는 값의 형태와 구조에 따라 타입이 결정. 즉, 타입이 실제로 어떻게 선언되었는지가 아니라, 어떤 프로퍼티와 메서드를 가지고 있는지가 중요

제네릭
타입을 마치 클래스나 함수 등에서 파라미터처럼 사용하는 것

그럼 어떨 때 쓰임?
말 그대로 Type을 변수화 해서 주입한 타입을 가지고 만들어 줘야 할 때

03. .d.ts 파일 알아보기

• .d.ts 파일은 JavaScript 라이브러리도 TypeScript 코드에서 사용할 수 있게 하는 보물

@types 라이브러리의 등장

• TypeScript는 @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보를 제공
  
• 해당 디렉토리로 들어가 보면 .d.js 파일들이 많이 있음

.d.ts 파일의 정체

• .d.ts 파일은 TypeScript 타입 정의 파일
  즉, JavaScript 라이브러리에 대한 타입 정보 제공

• .d.ts 파일로 TypeScript 컴파일러는 다음을 알 수 있음

  • 외부 라이브러리의 함수 타입 정보
  • 외부 라이브러리 클래스 타입 정보
  • 외부 라이브러리 객체 타입 정보

• .d.ts 파일로 외부 라이브러리의 타입 추론도 가능

  • 타입 추론이란, 타입이 명시 되지 않았을 때 컴파일러가 알아서 해당 타입에 대해 추론하는 것

JavaScript 라이브러리를 TypeScript에서?

• 해당 라이브러리에 대한 .d.ts 파일만 제공해주면 됨
• TypeScript 프로젝트에서도 JavaScript 라이브러리를 한 줄도 수정하지 않고 그대로 쓸 수 있음

실습 - js 라이브러리를 ts에서 사용해보기

1. 우선 Node.js를 생성
   npm init -y

2. tsconfig.json 생성
   tsc --init

3. tsconfig.json에서 아래 옵션 주석 해제
   "allowJs": true "checkJs": true

4. 커스텀 js 라이브러리 생성

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a, b) { // export를 넣지 않으면 import 할 수 없는 것 아시죠?
  return a + b;
}

1. 위 주석문은 JSDoc 라고 함
2. JSDoc은 API의 시그니처 (인자, 리턴 타입)을 설명하는 HTML 문서 생성기
3. JSDoc로 js 소스코드에 타입 힌트를 제공할 수 있음

01. 타입을 왜 제대로 알아야 하는가?

1) 변수, 그리고 타입에 대하여

변수란?

• 데이터를 저장하는 공간

변수, 그리고 타입

• 변수에 저장되는 데이터는 여러가지 타입이 있음

  • 숫자, 문자열, 논리값, 배열, 객체 등

• 타입을 이해하고 올바르게 사용하면 코드 가독성 / 안정성 향상

2) 잘못된 타입 / 올바른 타입

잘못된 타입을 사용할 경우

• 이러한 오류는 컴파일 타임에 발생하지 않고, 실행 시간에 발생함
• 코드가 복잡해질수록 찾기 어려워짐

올바르게 타입을 사용한 경우

• 타입 안정성이 높아지고 코드 품질이 좋아짐
• 테스트와 디버깅 시간을 줄일 수 있음

02. 기본 타입 훑어보기

1) boolean

참(true) 혹은 거짓(false) 값을 나타냄
조건문, 비교 연산 등에서 주로 사용됨

사용 예시

function inValidPassword(password: string): boolean {
	return password.length >= 8;
}

const password = "q1w2e3r4";
const valid = isValidPassword(password);

if (valid) {
	console.log("유효");
} else {
	console.log("유효 X");
}

2) number

TypeScript에서 사용하는 모든 숫자를 나타냄
모든 수치 연산에 사용되는 값은 number 타입으로 명시

사용 예시

function calculateArea(radius: number): number {
	return Math.PI * radius * radius;
}

const radius = 5;
const area = calculateArea(radius);
console.log(`반지름이 ${radius}인 원의 넓이: ${area}`)'

Math.PI x radius x radius와 같이 무리수와 정수를 곱한 값도 number로 취급을 할 수 있기 때문에 calculateArea 함수의 리턴 타입도 number

3) string

작은 따옴표('), 큰 따옴표("), 백틱(`)을 사용해 문자열 표현 가능
텍스트를 조작하거나 출력할 때 사용

function greet(name: string): string {
	return `안녕, ${name}!`;
}

const name = "Spartan";
const greeting = greet(name);
console.log(greeting);

4) 배열

기본 타입에 []가 붙은 형태

사용 예시

function calculateSum(numbers: number[]): number {
	let sum: number = 0;
  for (let i = 0; i < numbers.length; i++) {
  	sum += numbers[i];
  }
  return sum;
}

const testScores: number[] = [90, 85, 78, 92, 88];
const sumScore = calculateSum(testScores);

5) 튜플(tuple)

서로 다른타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열

사용 예시

const person: [string, number, boolean] = ["Spartan", 25, false];

const person2: [string, number, boolean] = [25, "Spartan", false]; // 오류!

정의된 데이터 타입의 개수와 순서에 맞추는 것이 필수

6) enum

열거형 데이터 타입이라 부름
enum 안에 있는 각 요소는 값이 설정돼 있지 않으면 기본적으로 숫자 0으로 시작함
enum 안에 있는 요소에는 number, string 타입의 값만 할당 O

사용 예시

enum UserRole {
  ADMIN = "ADMIN",
  EDITOR = "EDITOR",
  USER = "USER",
}

enum UserLevel {
  NOT_OPERATOR, // 0
  OPERATOR // 1
}

function checkPermission(userRole: UserRole, userLevel: UserLevel): void {
  if (userLevel === UserLevel.NOT_OPERATOR) {
    console.log('당신은 일반 사용자 레벨이에요');
  } else {
    console.log('당신은 운영자 레벨이군요');
  } 

  if (userRole === UserRole.ADMIN) {
    console.log("당신은 어드민이군요");
  } else if (userRole === UserRole.EDITOR) {
    console.log("당신은 에디터에요");
  } else {
    console.log("당신은 사용자군요");
  }
}

const userRole: UserRole = UserRole.EDITOR;
const userLevel: UserLevel = UserLevel.NOT_OPERATOR;
checkPermission(userRole, userLevel);

03. readonly

const와 readonly는 불변성을 보장

TypeScript 에서 등장한 키워드이며, 객체의 속성을 불변으로 만들 때 사용되는 키워드
즉, 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 됨

사용 예시

class Person {
	readonly name: string;
  	readonly age: number;
  
  constructor(name: string, age: number) {
  	this.name = name;
    this.age = age;
  }
}

const person = new Person('Spartan', 30);

console.log(person.name); // 출력: 'Spartan'
console.log(person.age); // 출력: 30

person.name = 'Jane'; // 재할당 불가능이기에 오류 뜸
person.age = 25; // 위와 같음

readonly를 const로 치환하면 클래스의 속성에 const 키워드를 사용할 수 없다고 에러를 반환함

04. any와 unknown, union

어쩔 수 없이 가변적인 타입의 데이터를 저장하고 싶다면 any를 쓰기 보단 unknown을 사용, 그리고 가변 적인 타입을 일일이 정의할 수 없다면 union 사용이 제일 나음

1) any 타입

모든 타입의 슈퍼타입
어떤 타입의 값이든 저장할 수 잇음
JavaScript의 Object 타입과 같은 최상위 타입

사용 예시

let anything: any;
anything = 5; // 숫자도 가능
anything = "hello"; // 문자열도 가능
anything = {id:1, name: 'john'}; // JSON도 가능

2) TypeScript에서 any를 쓰는 게 맞는지?

• 주된 이유는 프로그램의 타입 안정성 확보를 위한 것
• 그러나 아주 위험한 애임
• 코드의 안정성과 유지 보수성을 저해할 수 있음

3) unknown 타입

any 타입과 비슷하지만 더 안전한 방식으로 동작
얘도 마찬가지로 모든 타입의 값 저장 가능
하지만, 그 값을 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 함

let unknownValue: unknown = '나는 문자열';
console.log(unknownValue); // 나는 문자열

let stringValue: string;
stringValue = unknownValue; // 에러 발생, string임이 보장이 안 되기 때문
stringValue = unknownValue as string;
console.log(stringValue); // 나는 문자열

stringValue = unknownValue as string;와 같은 코드를
Type Assertion(타입 단언)이라고 함

unknown 타입의 변수를 다른 곳에서 사용하려면 타입 단언을 통해 타입 보장을 하여 사용할 수 있음

let unknownValue: unknown = '나는 문자열이지롱!';
let stringValue: string;

if (typeof unknownValue === 'string') {
  stringValue = unknownValue;
  console.log('unknownValue는 문자열이네요~');
} else {
  console.log('unknownValue는 문자열이 아니었습니다~');
}

typeof 키워드를 사용해 타입 체크를 미리한 후 unknown 타입의 변수를 string 타입의 변수에 할당할 수 있음

4) union

unknown의 한계 = 재할당이 일어나지 않으면 타입 안정성 보장 X

반면 union은 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용하며 | 연산자를 사용해 여러 타입을 결합하여 표현

type StringOrNumber = string | number; // 뒤에 다른 타입 추가 가능

function processValue(value: StringOrNumber) {
	if (typeof value === 'string') {
    	// value는 여기서 string 타입으로 간주
      console.log('String value:', value);
    } else if (typeof value === 'number') {
    	// value는 여기서 number 타입으로 간주
      console.log('Number value:', value);
    }
}

processValue('Hello');
processValue(42);

5) 잊지 말아야 할 것

• TypeScript를 쓰면서 여러 타입을 하나의 변수로 해결하겠다는 생각은 가급적 지양
• 이런 사소한 습관들이 코드의 안정성을 높이고 유지 보수성을 개선할 수 있다는 것을 명심