[TS] 타입스크립트 메모_땅콩코딩

 

✏️유튜브에서 땅콩코딩 타입스크립트 강의를 보면서 간단히 메모한 것

 

---

 

 ✘ 타입스크립트는 정적 타입(Static Typing)

 

 ✘ 타입 추론(Type Inference): 타입 표기가 없는 경우 코드를 읽고 분석해 타입을 유추해내는 것

// ====예제 1====
let student: {
  name: 'Eve', // name 속성은 type이 string이라고 추론.
  course: 'TypeScript',
  codingIQ: 120,
  code: function() {
    console.log('brain is working hard');
  }
}
student.name = 10; // number이기 때문에 에러 발생!

// ====예제 2====
function calculateCodingIQ(lostPoints) {
  return 150 - lostPoints; // 빼기 연산자로 인자가 number라고 추론.
}

 

 

✘ 타입 명시(Type Annotations): 변수를 선언할 때, 변수 값의 타입을 명시함으로써 데이터 타입을 지정하는 것

 

✘ 인터페이스(Interface): 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다. 

   - 선택적 프로퍼티(optional property): 변수(프로퍼티) 뒤에 '?'붙여서 optional임을 알려줌

   - 인터페이스와 메서드: 

interface Student {
  studentID: number;
  studentName: string;
  age?: number; // optional
  gender: string;
  subject: string;
  courseCompleted: boolean;
  addComment (comment: string): string; // 메서드. 위아래 같음
  addComment: (comment: string) => string;
}

 

✘ 숫자 열거형(Numberic Enum) 문자 열거형(String Enum)

// 숫자 열거형
enum GenderType {
  Male,
  Female,
  genderNeutral
}

// 문자 열거형
enum GenderType {
  Male = 'male',
  Female = 'female',
  genderNeutral = 'genderNeutral'
}

 

 

✘ 리터럴 타입: enum과 같지만 더 간단

✘ readonly 프로퍼티: 객체 생성시 할당된 프로퍼트 값을 바꿀 수 없음(재할당X)

interface Student {
  readonly studentID: number, // readonly 프로퍼티
  studentName: string,
  age?: number, // optional
  gender: 'male' | 'female' | 'genderNeutral', // 리터럴 타입
  subject: string,
  courseCompleted: boolean,
  addComment?: (comment:string) => string // optional
};

 

✘ 유니언 타입: 한 가지 타입뿐 아니라 파이프로 여러 타입 지정

✘ Type Aliases: 같은 코드를 반복하지 않고 재활용 

let price: number | string = 5;
price = 'free';
price = true; // 에러

type StrOrNum = number | string; // type aliases

 

✘ 타입 가드(Type Guard): 유니언 타입을 사용할 때 typeof 연산자로코드 검증을 수행하는 것

type StringOrNum = string | number;
let itemPrice: number;

// 이렇게 하면 에러!❌
// itemPrice는 number이지만 매개변수는 string도 가능하기 때문에 
const setItemPrice = (price: StringOrNum):void => {
  itemPrice = price;
};

// 이렇게 하면 해결!⭕️
// if문과 typeof 연산자로 해결
const setItemPrice = (price: StringOrNum):void => {
  if (typeof price === 'string') {
    itemPrice = 0;
  } else {
    itemPrice = price;
  }
};

setItemPrice(50);

 

✘ 함수의 타입: 반환타입, 매개변수 타입

 전달되는 매개변수가 여러 개이고 몇 가지만 선택적 매개변수 인 경우 선택적 매개변수들은 필수 매개변수 뒤에 위치해야 한다.

function sendGreeting (msg: string, name: string): string[] {
  return ['Hello', 'Mark'];
}

sendGreeting('Hello', 1) // 에러 (타입이 number)
sendGreeting('Hello') // 에러 (매개변수 개수와 인자 개수가 같아야 함)


// optional, default parameter로 해결
// default parameter를 사용하면 타입추론을 할 수 있기 때문에 string 안 써줘도 된다.
function sendGreeting(msg: string, name = 'there'): void {
  console.log(`${msg}, ${name}`);
}

sendGreeting() // Hello, there
sendGreeting('Good morning'); // Good morning, there
sendGreeting('Good afternoon', 'Jenny'); // Good afternoon, Jenny

 

✘ 화살표 함수의 타입 지정

const sendGreeting = (msg: string, name: string):void => console.log(`${msg}, ${name}`);

 

 

 

 

---

참고📚

유튜브 - [땅콩코딩] 타입스크립트