[React] React 심화(2)

❗❗  데브코스 71일차 (11.8)

오늘은 TS에 대해 학습을 진행한다. JS을 좀 더 똑똑하고 안정성 있게

사용할 수 있을 뿐만 아니라 모집 공고에서 볼 수 있듯이

요즘 TS는 무조건 알아야 하는 지식 중에 하나이다.

 

✅ TypeScript 타입스크립트

말 그대로 타입이 적용된 자바스크립트이다.

 

장점

• 안정성 : 컴파일 단계에서 미리 오류를 감지할 수 있다.
• 가독성 : 타입을 보고 무엇을 하는지 미리 알 수 있다.

단점

• 초기 설정을 해야한다. (초기 설정 하는법 포스팅 해두었으니 참고)
• 스크립트 언어의 유연성이 낮아진다.
• 컴파일 시간이 길어질 수 있다.

 

✅ 타입스크립트 문법

✍ 1. 타입 주석과 타입 추론

타입 주석은 변수, 상수 혹은 반환 값이 무슨 타입인지를 나타내는 것을 의미

타입 추론은 해당 변수가 어떤 타입인지 추론하는 것. 생략하면 컴파일 타임에 알아낸다.

// 타입 주석
let a: number = 1;
let b: boolean = false;
let arr: number[] = [];

// 타입 추론
let c = 2;
let d = { a : 1 };

// 특정 값을 타입으로 지정
// i에는 good이라는 문자열만 지정 가능
let i: 'good' = 'good';

// any : 모든 타입 지정가능
let j: any = 1;
j = 'asd';
j = false;

// 함수 사용시
function add(a: number, b: number(매개변수 타입)): number(return타입){
	return a + b; 
}

console.log(add(1,'3')) // 에러
console.log(add(1,3)) // 4

✍ 2. 인터페이스

객체의 타입을 정의하는 방법, interfacr라는 키워드로 가능하다.

자바의 interface과 유사하다.

interface Company{
    name: string;
    age: number;
    address: string;
    // 옵셔널 선택 속성: 있어도되고 없어도되고
    title?: string;
}

const naver: Company = {
    name: 'naver',
    age: 10,
    address: '서울특별시'
}

// 익명 인터페이스
const person: {	
    name: string,
    age?: number
} = {
    name: 'partro',
    age: 26
}

✍ 3. tuple

배열을 tuple로 이용하는 방법

const tuple: [string, number] = ['partro', 26];

✍ 4. enum

열거형을 사용하는 방법

enum Color {
    RED = 'red',
    GREEN = 'green',
    BLUE = 'blue'
}

const color = Color.BLUE;

✍ 5. 대수 타입

여러 자료형의 값을 가질 수 있게하는 방법

합집합 타입과 교집합 타입이 있다.

// 숫자형 또는 문자열
let numOrStr: number | string = 1;
numOrStr = 'str';

// &는 원시 타입에서는 사용할 수 없다.
let numAndStr: number & string = '' // 숫자형과 문자열은 함께 사용할 수 없기 때문

// &는 interface에서 주로 사용된다.
interface Name{
    name: string;
}
interface Age{
    age: number;
}

// Name, Age interface 둘다 지정
let partro: Name & Age = {
    name: 'partro',
    age: 26
}

// type키워드를 이용해서 새로운 type을 만들 수 있다.
type Person = Name & Age;

✍ 6. 옵셔널 Optional chaining

const response = [
  {
    post:{
      title: 'Hello',
      content: 'test'
    },
    status: 200
  },
  {
    message: 'Error!',
    status: 500
  }
];

console.log(response[0].post.title); // Hello
console.log(response[1].post.title); // 에러
// 이전에 흔히 사용하던 방어 코드
console.log(response[1].post && response[1].post.title ); // undefined
// 옵셔널 체이닝을 사용하면 간단하게 사용 가능
// 데이터가 없다면 자동으로 undefined를 반환한다.
console.log(response[1].post?.title ); // undefined

✍ 7. Generic 제네릭

하나의 인터페이스로 여러 타입을 이용할 수 있게 하는 방법

자바의 제네릭과 유사하다.

interface Value<T> {
    value: T;
}

const value: Value<number> = {
    value: 10;
}

✍ 8. extends

특정 인터페이스를 상속받아 인터페이스를 확장할 수 있다.

자바의 상속과 유사하다.

interface IExample1 {
  x: number;
  y: number;
}

interface IExample2 extends IExample1 {
  z: string; 
}

const time: IExample2 = {
  x: 10,
  y: 20,
  z: 'asda'
}

 

그 외에 Partial, Required, Pick, Omit 등이 있다.

 

📖 학습한 내용

• 타입스크립트 소개