타입스크립트 기초 실습

타입스크립트 파일 확장자와 실습

타입스크립트를 사용하는 파일 중 return 을 포함하고 있다면 확장자를 ts로 두면 오류가 발생한다.

return 부분이 사실 html이 아니라 JSX 즉, 자바스크립트 XML 이기때문에 그렇다.

따라서 단순히 javascript 만 있는 .js 파일은 typescript의 **.ts**로 변경하고,

javascript에서 **JSX(React의 HTML)**를 return 하는 컴포넌트들은 typescript의 .tsx 로 변경한다.

 

1. JSX 를 return 하는 컴포넌트 : tsx

2. 자바스크립트만사용하는 컴포넌트 : ts

 

타입스크립트를 사용할 땐 위의 확장자를 잘 구분해서 사용하셔야 한다.

 

타입 추론

파일의 확장자를 ts 혹은 tsx로 변경하게 되면서 기존의 자바스크립트 작성 부분이 타입스크립트 영역으로 바뀌게 된다.

따라서 변수에 타입을 먼저 입히지 않고 할당을 하게되면 타입스크립트는 할당된 값의 자료형을 타입으로 추론 하게 된다.

 

타입스크립트 배열, 객체 실습

export default function Qqq() {
     
    // 타입추론

    let aaa = "안녕하세요"
    aaa = "ddd"

    // 타입명시
    let bbb:string = "반갑습니다"
    bbb = "dd"

    // 문자타입(선언과 할당 분리)
    let ccc: string
    ccc = "반가워요!!"

    // 숫자타입
    let ddd: number = 10

    // 불린타입
    let eee: boolean = true
    eee = false

    // 배열타입
    let fff: number[] = [12,31,23]
    let ggg: string[] = ['철수','영희']
    let hhh: (string | number)[] = ['철수','영희',10]

    // 객체타입
    interface IProfile {
        name : string
        age : number | string
        school : string
    }

    const profile: IProfile = {
        name: "철수",
        age: 8,
        school: "다람쥐초등학교"
    }

    // age에 number, string 둘다 쓸 수 있음.
    profile.age = "10살"

    // 함수타입 => 어디서 몇번이든 호출 가능하므로, 타입추론 할 수 없음(반드시, 타입명시 필요).
    const add = (number1:number, number2:number, unit:string): string => {
        return number1 + number2 + unit
    }
    const result = add(1000, 2000, "원") // 결과의 리턴 타입도 예측 가능!!

    // any타입
    let qqq: any = "철수" // 자바스크립트와 동일!
    qqq = 1
    qqq = "weqw"
    qqq = true

    return <></>
}