[TIL] 01월 20일 Typescript 적응기

이번 오전 교육에서는 Typescript의 기초에 대해 배웠다.

 

자세한 목차

• 이걸 쓰면 더 안전하다고? => Typescript
• 기존의 Javascript를 typescript로 바꾸자 

Typescript는 기존의 Javascript에서 한단계 UP된 언어이다.

 

타입 스크립트란?

자바스크립트의 타입을 강제시키는 언어이다.

let aaa = "안녕하세요"
aaa = 123;

예를 들어 aaa라는 상자에 문자열을 넣다가 다시 숫자 타입으로 넣을 수 있는 방식이 기존의 자바스크립트의 방식이었다.

let aaa:string = "안녕하세요"

aaa = 123 // 문자만 들어가는 string type이라 숫자는 불가능

typescript에서는 문자열로 선언을 string값으로 넣어주면 숫자는 들어갈 수 없다.

 

타입 스크립트를 사용하는 이유?

실제로 Javascript 방식으로 사용하면 문제가 발생하는 경우가 많은데 예를 들어 1인당 글쓰기 권한: 5개이상을 올릴 수 있다고 가정하면 어떤 특정 서비스 관련 사이트가 있을때 경매 상품을 올리는 기준을 5개씩만 올린다고 하면 

 

이것을 만들때 Javascript 의 방식으로 if문을 사용하면 되는데, if문을 사용하게 되면 작성할때마다 

사용자가 올린 글의 count가 5가될때까지 더하는 if 문을 만들면 된다.

 

게시글의 수가 5개가 넘어갈때 경고 메시지를 넣으면 되는 간단한 로직인데 이런 if문을 사용하면 발생하는 

문제점은 만약 어떤 사람이 글을 여러개로 도배하면 

011111111; // 숫자와 문자랑 더하면 나오는 숫자

글의 count는 숫자이기 떄문에 숫자라는 타입으로 강제하게 되면 글수의 초기값 0에서 1씩 더하면서 글을 올릴때

예를 들어  문자열과 숫자 1 또는 숫자 1에 문자열을 if문을 돌리면 1과 문자열이 연결되는 문제가 발생한다.

 

그래서 if문에서 검증을 못하는 경우가 많다. 그런데 이것은 그저 하나의 예이고 이런 서비스가 점점 커지게 되면 

우리가 이런것을 하나하나씩 체크하지 못한다. 어디서 이런 것들이 발생하는지 문제를 판단할 수 없기 때문이다.

 

만약 정말 큰 서비스를 배포하는 시점이라면 ?

지뢰밭에 놓이는 현상이 발생할 것이다.

경매 상품을 게시판에 올려주는 aaa에는 문자열만 상품 게시판을 count 가는 bbb에는 숫자 타입만 넣을 수 있도록

정의할 수 있다. Javascript에서는 이것을 정의하지 못해 오류가 발생한다.

 

Typescript는 어떻게 사용할 수 있는가?

let aaa:string = "안녕하세요" // 정상 작동
let bbb: number = 123 // 숫자만 들어감 문자를 넣으면 에러

typescript에서는 선언한 함수안에 type을 넣을 수 있도록 정의되어있다. 

string은 문자열만 가능하고 number는 숫자 타입만 가능하도록 함수를 강제시킬 수 있다.

 

객체 형태 정의법

interface IProfile {
  name: string;
  age: number;
}

// name에 숫자, age에 문자열을 넣으면 에러 발생
// 타입을 미리 정해놓았기 때문에 
let profile:IProfile = {name: "철수", age: 13 }

이렇게 profile이라는 Interface를 만들 수 있다 Interface로 만들떄는 IProfile로 I를 포함해 넣는것이 관례이다.

Interface IProfile이라는 객체를 만들고 그곳에서 name과 String, age:number가 들어갈 수 있다.

 

이렇게 하면 좋은 방식인데, number값에 123을 age에 문자열을 넣게 되면 에러가 발생한다.

 

package.json 정의

package.json에는 2가지로 분류된 라이브러리 목록이 있는데 이곳은 라이브러리를 설치할때 나오는 목록들이다. 

실제 설치된 소스들을 node_modules에 들어가 있다. 

 

package.json에서는 설치한 목록들이 나오고 설치한 목록들이 dependercies목록에 나온다.

devDependencies항목은 개발시 vscode에서 필요한 항목들이다.

 

브라우저 자체에서는 typescript를 읽을 수 없다.

그래서 vsCode에서 typescript를 실행시키면 코드를 작성해도 맞지 않으면 vscode자체에서 걸러준다.

 

하지만 실행할 떄는 전부다 js형태로 바껴서 실행 된다.

typescript 자체로 실행하는 것이 아니다.

 

dev목록은 개발 시 필수 사항들인데.

--dev를 이용해 설치할 필요없고 전부다 dependercies에 들어간다.

가급적이면 이것을 나눠주는것도 중요하다.

 

react에서 typescript를 실행해주기 위해서는 기존의 ts파일로는 실행이 불가능하다 그래서 html을 넣을 수 있는 

TSX파일을 생성해서 구현해야한다.

 

interface IProps {
    onClickMoveToEdit: () => {};
}

export default function BoardWrite(props: IProps) {

Typescript에서도 상태값을 넘겨줄 수 있는데 그것을 넘겨주기 위해 Interface라는 함수를 사용한다.

interface에 들어갈 api함수를 넣어주고 props에 Iprops

  // 타입 추론 이됨
    // 어떤 변수 상자를 넣고 데이터를 담으면 자동으로
    // 문자받게 못들어간다고 만들어 버림

    // let aaa = "안녕하세요";

typescript에서는 타입을 굳이 지정하지않아도 해당되는 값을 넣어준다면 자동으로 타입이 추론된다.

    aaa = 1; // 기존 타입과 다르다면 불가능

하지만 기존에 선언한 함수에서 문자열을 선언한뒤 다시 숫자타입으로는 재할당이 불가능하다.

 // 자기가 알아서 추론
    let ccc:number = 5;
    ccc = "ㅁㄴㅇㄴㅁㅇ"
 // 문자 넣으면 에러
 // 강제로 숫자타입을 고정 number
 // let ccc:number = 5;
 // ccc = "ㅁㄴㅇㄴㅁㅇ"

타입스크립트에서는 자기가 알아서 추론이되면서 숫자타입으로도 다시 문자열로 선언이 불가능하다.

 let ddd: boolean
    ddd = 123;
    ddd = "asdsad"
    ddd = true

boolean 타입도 선언이 가능하다. 타입을 boolean 으로 선언하니까 숫자 타입으로는 들어갈 수 없다.

 // 배열 타입
  // 문자열 들어가면 에러
  let eee: number[] = [1,2,3,4,5,6, "asds"];
  let fff: string[] = ["철수", "영희", "훈이", 2];

배열 타입도 가능한데 let에 타입을 정하고 [] 형태로 묶어주면 기존의 정한 타입을 배열 형태로 넣을 수있고 

만약 타입이 다르다면 오류가 발생한다.

 let ggg: (string | number)[] = [1, 2, 3, 4, '영희', '철수'];

숫자 타입과 문자열 타입을 동시에 사용할 수 있는데,  string 또는 number 타입을 받아올 수 있게 정의한뒤 숫자열과 문자열에 배열을 생성할 수 있다.

    // 숫자 배열로 타입 이 정의
    // 바꾸는 순간 타입 추론이됨
    // string 또는 number로 추론
    // string하는 순간 string만 들어 가야함
    let hhh: string[] | number[] = ['철수', '영희', '훈이'];
     // 바꾸기 가능
    hhh = [1, 2, 3];

숫자배열로도 타입을 정의할 수 있는데 만약 문자열과 숫자만 받을 수 있는 배열형태를 hhh에서 숫자형태로 배열을 

만들어 type을 바꿀 수 있다. string을 하는 순간은 무조건 string 값만 넣어야 한다. 

interface iProfile {
    name:string,
    age: number | string,
    school: string | number,
 }
 
 profile.school = 13;
   // 가능 
 profile.age = "살"

객체 타입으로 도 Interface를 사용해 타입추론이 가능하다. 객체형태로 타입값을 주면 된다.

  // html영역 JSX
        // Javascript XML 영역
        // HTML : <div>
        // XML : <writer></writer> 내가 만드는 html 영역가능
        // XML = extensible Markup Language 확장 가능한 Markup Langauge
        // JSON : 우리가 사용하는 방식
        // 옛날에는 xml방식으로 주고 받음 그래서 writer를 하지 않고
        // <title>hello</title> 한것을 객체 형태로 바뀜
        // jsx로 되어야함
        // tsx를 해야함
        // js형태를 내보낼때는 tsx
        <div>타입스크립트 연습</div>

return으로 html영역이 들어간다. 기존의 HTML은 <div> 형식 XML은 내가 만드는 html 영역이고

XML은 extensible Markup Lanagauge 확장가능한 Markup Langauge이다. JSON은 우리가 사용하는 방식 

js 형태를 내보낼때는 tsx를 사용한다.