TypeScript

TypeScript는 JavaScript에 타입을 더해 타입을 강제하는 언어입니다.

TypeScript에서는 변수의 타입을 지정하기 때문에 위처럼 다른 타입의 값을 재할당할 수 없습니다.

• TypeScript를 사용하는 이유 => 숫자 변수에는 숫자만, 문자 변수에는 문자만 넣도록 해서 **안정성**을 높여 줍니다.

• 사용법 => 변수에 타입을 선언하면 됩니다. => let aaa : string = "안녕하세요" => let bbb : number = 10

참고 Next 12.1.0, React 17.0.2를 JS로 작업하다가 TypeScript로 전환한 뒤 아래 오류가 날 때 ex) 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead

// js로 받아진 Module을 타입 스크립트로 변환? 

"dependencies": {
	...
},
"devDependencies": {
	...
},
"resolutions": {
  "@types/react": "17.0.2"
}

package.json에 resolutions를 추가합니다.

타입 추론과 타입 명시

• 타입 추론이란? TypeScript는 초기 선언값을 보고 타입을 추론합니다.

• 타입 명시 let aaa : string = "안녕하세요" 변수 이름 뒤에 타입을 적어 명시할 수 있습니다.

타입 명시가 필요한 경우

• 두 가지 타입이 모두 가능한 경우

let ccc: string | number = 1000;
ccc = '1000원';

• 불린 타입

let eee: boolean = true;
eee = false;
// eee = 'false'; // 문자열은 boolean 타입에 할당할 수 없음

배열, 객체 타입

• 배열 타입

• 객체 타입

Event

event를 받아올 때 사용법
const onClickEvent = (event : MouseEvent\<HTMLButtonElement>) => \{
	...
\}
const onChangeEvent = (event : ChangeEvent\<HTMLInputElement>) => \{
	...
\}

==================================================================

useState에서 사용법
const [stateString , setStateString] = useState\<string>('')

==================================================================

GraphQL에서 사용법
const [board] = useMutation\<Pick<응답타입, variables 타입>, 응답받은 타입>()

Utility Type

1. Partial 타입: 모든 속성을 선택(?)으로 만듦

interface IProfile \{
    name : string
    age : number
    school : string
    hobby ?: string
\}

type partial = Partial\<IProfile>

type partial = \{
    name?: string | undefined;
    age?: number | undefined;
    school?: string | undefined;
    hobby?: string | undefined;
\}

2. Required 타입: 모든 속성을 필수로 만듦

type required = Required\<IProfile>

type required = \{
    name: string;
    age: number;
    school: string;
    hobby: string;
\}

3. Pick 타입: 원하는 속성만 골라서 사용

type pick = Pick\<IProfile , "school" | "age">

type pick = \{
    age: number;
    school: string;
\}

4. Omit 타입: 원본 타입에서 특정 속성만 빼고 사용

type omit =  Omit\<IProfile , 'school'>;

type omit = \{
    name: string;
    age: number;
    candy: number;
\}

5. Record 타입: 지정한 키마다 같은 타입을 적용

// 5. Record 타입
// - Record 이전에 유니온 타입을 알아야함
type Union = "철수" | "영희" | "훈이" // Union 타입
let child: Union = '철수' // 철수, 영희, 훈이를 제외한 텍스트가 들어갈 수가 없음

type record = Record\<Union, IProfile>
// 철수, 영희, 훈이를 키값으로 만들고 각각에 IProfile을 적용 시켜줌

type record = \{
    철수: IProfile;
    영희: IProfile;
    훈이: IProfile;
\}

interface와 type의 차이

선언 병합

• interface는 같은 이름으로 여러 번 선언하면 하나로 합쳐집니다.
• type은 같은 이름으로 다시 선언할 수 없습니다.

interface IProfile \{
    candy : number // 선언 병합으로 추가됌
\}

type merge = Partial\<IProfile>

type merge = \{
    name?: string | undefined;
    age?: number | undefined;
    school?: string | undefined;
    hobby?: string | undefined;
    candy?: number | undefined;
\}