TIL #26) 타입스크립트 발 담구기

TypeScript

TypeScript는 마이크로소프트에서 개발한 오픈소스 프로그래밍 언어!

JavaScript의 단점을 상소해하기 위해 등장했다!!

 

타입스크립트가 들어오고 바뀐점들

• 실행시간에 결정되는 변수타입 => 이제는 컴파일 시간에 변수의 타입을 체크!!
• 약한 타입 체크 => VSCode에 코드를 입력하는 순간 에러 메시지 발생!!
• 물렁물렁한 객체 => 코드를 입력하는 순간 에러 메시지 발생!!

그리고 자바스크립트 라이브러리를 쉽게 쓸수있다는것도 타입스크립트의 장점 !!!!

 

JavaScript에서 파생된 기본타입

• string
• number
• boolean
• null
• undefined

새로 추가된 타입

• tuple - 배열은 number[], string[] 처럼 같은 타입의 원소만 가질 수 있지만, 튜플은 어떤 타입의 원소를 허용할것인지 정의해주면 된다!

const person: [string, number, boolean] = ['Spartan', 25, false];
const person2: [string, number, boolean] = [25, 'Spartan', false]; // 오류!
// 여기서는 string, number, boolean이라는 3개의 각각 다른 타입의 데이터를 보관하게 정의

• enum - 열거된 데이터 타입, 값이 설정되어 있지 않으면 기본적으로 숫자 0으로 시작!, number 또는 string타입의 값만 할당 가능하다
• any - 모든 타입의 슈퍼타입, 어떤 타입의 값이든 저장할수있다는 의미! but 모든 타입을 허용한다는거 자체가 타입스크립트의 장점인 안정성을 위배시킴. 그러니까 any를 쓰는것 보단 unknown을 사용하고 가변적인 타입을 일일이 정의할수있다면 union 사용이 제일 낫다.

let anything: any;
anything = 5; // 최초에는 숫자를 넣었지만
anything = 'Hello'; // 문자열도 들어가고요
anything = { id: 1, name: 'John' }; // JSON도 들어가네요

• unknown - any와 비슷하지만 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야함(타입을 보장)~

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

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

• union -  여러 타입 중 하나를 가질 수 있는 타입을 정의할때 사용한다.

type StringOrNumber = string | number; // 원한다면 | boolean 이런식으로 타입 추가가 가능해요!

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);