'코딩애플' 님의 유튜브 강의를 듣고 내용을 정리해 보았습니다.😀
https://www.youtube.com/watch?v=xkpcNolC270

타입 지정하기

변수에 타입 지정하기

let catName: string = 'bangul'
// 이 변수에는 string 형식만 들어올 수 있습니다.

변수명 : 타입이름 = 변수 값 의 형식으로 변수에 타입을 지정 가능하다.
string 타입의 변수에 string 이 아닌 다른 타입의 값을 넣어주려 하면 컴파일 오류가 발생한다.

배열에 타입 지정하기

let cat : string[] = ['bangul', 'malbok']

배열 타입의 명시는 array가 아닌 []를 사용한다!
배열 안에 들어갈 type을 기재해 주어야 한다.

tuple 타입

type ItemInfo = [string, number];
let myItem : ItemInfo = ['사료', 30];

자바스크립트만 해 왔던 나에게는 너무 낯선 자료형..🤔 이었지만
그냥 첫 번째 순서에는 어떤 타입, 두 번째 순서에는 어떤 타입이 오는지 명시해 주는 array였다.

객체에 타입 지정하기

let catInfo : {name: string, age: number, birth?: string,} = {
  name: '방울이',
  age: 4,
}

객체에 들어갈 속성에 대한 타입을 명시해 준다.
저렇게 타입 속성을 명시했는데, 객체 값에 name이나 age 속성이 없으면 오류가 난다... 🤔 그런데 개발을 하다 보면 속성이 있을 수도 있고 없을 수도 있다.

있을 수도, 없을 수도 있는 속성에는 birth?: string 처럼 속성 이름의 뒤에 물음표❓ 를 붙여서 옵션 값임을 표시해준다.

함수에 타입 지정하기

function addSum(a: number, b: number) : number{
  	// 인자에 무조건 number가 들어오고, 무조건 number를 리턴해주어야 한다.
	return a + b;
}

함수에는 두 가지 부분에 타입 지정을 해 줄 수 있다.

1. 함수에 들어갈 인자
2. 함수의 return 값

여기서 함수의 return 값은, 인자 다음에 콜론(:)을 붙여 타입 지정을 해 줄 수 있다.

Class에 타입 지정하기

class Cat {
  name : string;

  constructor(name : string){
  	this.name = name;
  }
}

기본적으로 함수에 타입 지정하는 방법과 거의 유사하나,
constructor 함수에 들어갈 인자를 위쪽에서 한번 더 타입 지정을 해 주어야 한다는 차이점이 있다.

다양한 타입 지정하기 (Union type)

let equipment = string[] | null;
// 장비를 아무것도 소지하지 않은 상태도 필요하다면? ⚔️

한 변수에 한 타입만 들어오는 게 아니라, 여러 타입이 들어오게 하고 싶다면
OR 기호(|)로 여러 타입이 들어올 수 있도록 지정해 줄 수 있다.

타입 별칭(Type alias)

type WorkType = {
  title: string;
  thumb: string;
  category: string;
  link?: string;
  tag: string[];
  github?: string;
  desc: string;
};
const workList: WorkType[] = [
  {
    title: '타이틀',
    thumb: '/image/work01.png',
    category: '카테고리1',
    link: 'https://velog.io/@kimbangul',
    tag: ['Javascript','HTML','CSS','TypeScript'],
    github: 'https://github.com/Kimbangul',
    desc: '설명01',
  },
 }

객체나 배열 등을 사용할 때는 타입 지정하는 문법이 길어질 수도 있다. 이 때는 type 이라는 키워드를 통해 타입을 지정해 주는 변수를 따로 만들 수 있다.

const workList: {
  title: string;
  thumb: string;
  category: string;
  link: string | false;
  tag: string[];
  github: string | false;
  desc: string;
}[] = [
  {
    title: '타이틀',
    thumb: '/image/work01.png',
    category: '카테고리1',
    link: 'https://velog.io/@kimbangul',
    tag: ['Javascript','HTML','CSS','TypeScript'],
    github: 'https://github.com/Kimbangul',
    desc: '설명01',
  },
 }

만약 타입 별칭을 사용하지 않는다면 이런 문법으로 타입 지정을 해 주어야 하고 가독성이 크게 떨어질 것이다...

타입명은 일반적으로 대문자로 작명하는 것이 관례! (일반 변수와의 차별화를 위해)

객체 안에 지정해야 할 속성이 너무 많다면

type Cat = {
	[key: string] : string, // 글자로 된 모든 object 속성의 타입은 string
}

let catList : Cat = {name: 'bangul'}

객체 안에 속성이 1~10개 정도 있을 수도 있지만, 몇백 개가 넘을 수도 있다.
이를 하나하나 지정해 줄 수는 없다 ... [key:string] 형식(모든 오브젝트 속성)으로 객체에 들어갈 속성의 타입 지정을 한 번에 해줄 수 있다.