TypeScript란?

TypeScript란, JavaScript의 타입을 강제시키는 언어이다.

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

aaa = 123 //문자열로 타입을 강제시켰기 때문에 숫자를 넣을 수 없어 에러가 뜬다.

왜 타입을 강제시키면서까지 TypeScript를 사용하는가?

//1인당 글쓰기 권한 5개인데 한명이 도배가 가능했다.
//"0" + 1 = "01" 이 되므로 게시글이 "01" "011" "0111" "01111"등 추가적으로 계속해서 등록가능했다.
//이러한 경우를 막기 위해 TypeScript를 사용하기 시작했다. 
//yarn add typescript로 설치 가능
let aaa: string = "안녕하세요"
let bbb: number = 123
//브라우저에서 화면에 보이지는 않는다. vscode에서 typescript를 확인하고 javascript로 다시 만든 다음 브라우저에서 실행하게 해준다.
Interface IProfile {
  name: string;
  age: number;
}
let profile: IProfile = {name: "철수", age: 13}
//객체 타입은 없으므로 직접 Interface로 만들어야한다. Interface 타입명 형태로 만든다.
//일반적으로 Interface의 I를 변수명 앞에 붙인다.

Ts와 TSX

Ts는 일반적인 자바스크립트, TSX는 컴포넌트를 의미한다. JSX가 있으면 원래 폴더이름이 jsx로 끝나야한다. ex)BoardWrite container,presenter의 return()문 Js만 있으면 Ts, JSX가 있으면 TSX를 붙여준다. 여기서의 X는 XML을 의미한다. XML은 eXtensible Markup Language 확장가능한 마크업 언어이다. HTML은 Hyper Text Markup Language Markup Language 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지로 같은 것들이다. 현재는 JSON형태로 넘어왔다.

export default function TypeScriptPage(){
    
    let aaa = "안녕하세요"
    aaa = 3     //에러
                //파일명을 tsx로 지정해주었기 때문에 직접 타입을 정해주지 않아도 처음에 넣어준 값으로 타입이 추론된다. 
                //마우스를 올려보면 타입이 추론되어 어떤 타입인지 알려준다.
    
    //타입 명시
    // let bbb: string = "반갑습니다"
    
    //문자타입
    let ccc: string  //미리 타입을 지정해놓아줄 수도 있다.
    ccc = 3          //에러
    ccc = "반가워요"

    //숫자타입
    let ddd: number
    ddd = 5
    ddd = "안녕하세요" //에러

    //boolean타입
    let eee: boolean
    eee = true
    eee = false
    eee = "false"  //문자열 안에 글자가 하나라도 있으면 true로 작동하므로 에러가 난다.

    //배열 타입
    let fff: number[] = [1,2,3,4,5]
    let ggg: string[] = ["철수","영희","훈이"]
    let hhh: (number | string)[] = [1,2,3,4,5, "안녕하세요"]

    //객체 타입
    interface IProfile{
        name: string
        age: string | number  // string타입도 가능하고, number타입도 가능하다는 뜻이다.
        school: string
        hobby?: string   //?를 붙여주면 있어도 좋고, 없어도 좋다라는 뜻이다.
    }

    let profile: IProfile = {
        name: "철수",
        age: 8,
        school: "다람쥐초등학교"
    }
    profile.age = "8살"  
    profile.school = 123  //string형식이므로 에러

    //함수타입
    const add = (money1: number, money2: number, unit: string): string => {
        return money1 + money2 + unit
    }
    const result = add(1000, 2000, "원")  //add: string이므로 result도 string이 된다.

    return <div>타입스크립트 연습하기</div>

}

*.types.ts 파일을 만들어서 export, import 해주기.