[TS] TypeScript 정리하기 (2) - 기본 변수 선언과 컴포넌트 불러오기

오늘은 뷰3에서 ts를 이용해서 변수를 선언하는 방법과

컴포넌트를 불러와서 쓰는 방법을 알아보겠다

(아직 공부 초반이라 틀리거나 부족한 부분이 있을수도 있따 이해해라)

 

 

그리고 composition api에서 <script setup> 을 사용할거다

 

먼저 저번시간에 프로젝트 생성까지 한 프로젝트에서 

 

내 입맛대로 하려고

 

layout 폴더를 삭제하였고 그에 따른 라우터도 정리해주고 component에 ByeWord.vue 파일을 추가해 주었다

 

---

컴포넌트 불러오기

 

컴포넌트를 불러와서 다른곳에서 보여주기 위해서

 

원래 했던 방식대로 export default { name: ""} 요런식으로 하려했더니

 

에러가 나는거 아닌가!

 

이게 뭐고

저기 에러 메시지에 나와 있듯 <script setup> 안에 export를 못쓴다는데?

그래서 공식문서를 보니까

이 전에는 export를 썼는데 이제 export 안쓰고 정의를 하라는 거다

 

그럼 어떻게 하냐고??

ByeWorld.vue

HelloWorld.vue

위의 코드는 HelloWorld.vue 에서 ByeWorld.vue를 가져다 쓰는 코드이다

export하고 name을 지정해 주지 않아도 저렇게 import해 와서 컴포넌트를 사용할 수 있다.

 

주의할거는 template부분에서 사용할 때는 소문자로 단어를 "-"로 이어서 사용해야 한다.

인줄 알았는데! 

 

공식문서에서 PascalCase 컴포넌트 태그를 강력히 권장한다고 한다!! 그럼 이렇게 해야지!!

 

쨌는 이제 name을 굳이 지정 안하고 export도 사용안해도 되니 더 편해졌다.

 

 

---

기본 변수 선언

코딩애플 선생님과 타입스크립트 공식문서의 자료를 많이 참고했다

 

정말 가볍게

let 이름: string = 'moo'

이런식으로 변수명:타입 이렇게 정하면 된다.

 

함수에 경우에는 이런식으로 하면된다

function myFunction(a: number) : number {
  retunr a + 123
}

 

그럼 기본적인 타입이 뭐뭐 있는지를 봐보자

 

1. 불리언 (Boolean)

 

let isDone: boolean = false;

 

2. 숫자(Number)

let decimal: number = 6;

 

 

3. 문자열(String)

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;

 

4. 배열 (Array)

배열 타입은 두가지로 쓸 수 있다

첫 번째 방법은, 배열 요소들을 나타내는 타입 뒤에 [] 를 쓰는 방법이고

 

let list: number[] = [1, 2, 3];

두 번째 방법은 제네릭 배열 타입을 쓰는 것이다 Array<type>

let list: Array<number> = [1, 2, 3];

 

5. 객체(Object)

object는 원시 타입이 아닌 타입을 나타낸다 예를 들어 number, string, boolean, null 등등을 의미한다

let obj: object = {};
let arr: object = [];
let func: object = function () {};
let nullValue: object = null;
let date: object = new Date();

이처럼 여러 타입의 상위 타입으로 인식되기 때문에 object를 그대로 쓰기에는 애로사항이 많다

그래서 alias 와 interface 를 사용하게 된다

// type alias
type IUser = {
    name: string,
    age: number
}
 
let userA: IUser = {
    name: 'HEROPY',
    age: 123
};
 
let userB: IUser = {
    name: 'inpa',
    age: false, // Error
    email: 'inpa@naver.com' // Error
};

 

// interface
interface IUser {
  name: string,
  age: number
}

let userA: IUser = {
  name: 'HEROPY',
  age: 123
};

let userB: IUser = {
  name: 'inpa',
  age: false, // Error
  email: 'inpa@naver.com' // Error
};

 

아직 다루지 않은 타입들도 많이 있지만 그러한 타입들은 직접 프로젝트를 하면서 더 공부해보자

 

나는 타입스크립트의 이러한 변수 선언을 보고

 

하.. 이제 뭐 변수고 함수고 선언 할 때마다 타입을 다 지정해줘야하구나 하고 

 

너무 귀찮겠다 라고 생각했다.

 

근데 또잉? 

 

변수 생성시에 타입스크립트가 타입을 자동으로 부여해 준다고 한다

 

아니 그러면 자바스크립트랑 별 다를게 없는 아니야??

아니 그려면 언제 명시적으로 타입을 선언해 줘야해??

 

두개의 차이를 보자면 

자바스크립트는 동적타입, 인터프리터 언어이고

타입스크립트는 정적타입언어, 컴파일 언어이다

 

ㅎ 뭔소리냐고?

GPT에게 물어봤다

 

이렇다고 한다

 

또한  타입스크립트는 컴파일 과정에서 오류를 잡아내고

자바스크립트는 런타임 환경에서 오류를 잡아내기 때문에

타입스크립트가 훨씬 오류를 잡아내기 쉽다는 장점이 있다.

 

 

예를 들어 개발자가 예전에 만들어 놓은 함수의 파라미터 값을 숫자로 받아야 하는데

한참뒤에 그 함수를 사용하면서 스트링으로 파라미터를 받았을 경우, 자바스크립트는 이것을 잘못됐다고 하지 않고

타입스크립트는 컴파일 단계에서 잘못됐다고 잡아준다.

 

 

그래서 나는 젤 궁금했던게 그럼 언제 명시적으로 타입을 적어줘야 하나 였다.

 

이것을 적재적소에 하는것이 타입스크립트를 잘 쓰는것이라고 생각이 되는데

 

일단 지금 내가 조사하고 생각하는 바로는

 

다른 사람이 나의 코드를 봤을때 이 변수 타입이 무엇인지 알아야 할 필요가 있을 때

 

혹은 프로젝트를 같이하는 사람들끼리 컨벤션을 정했을 때

 

API를 통해 데이터를 받아올 때?

 

크게 이러한 경우들이 있지 않을가 싶다

 

 

오늘은 ts를 뷰에 적용시켰을 때 컴포넌트를 불러와서 쓰는 방법과

 

ts에서의 타입과 기본적인 타입 지정 방법에 대해 알아봤다

 

그럼 안녕~