[TS] 기본 문법 1

1. 타입 종류 1 - 문자, 숫자, boolean, 배열, 객체, 함수

 

// 타입 종류

// 문자
let str: string
let red: string = "red"
let myColor : string = `my color ${red}`

// 숫자
let num: number
let float: number = 3.14
let nan: number = NaN
let infinity: number = Infinity
console.log(infinity)

// boolean
let isBoolean: boolean
let isDone : boolean = false

// null(명시적) / undefined(암시적)
// 배열
let nul : null 
let und: undefined
console.log(nul)
console.log(und)

// 배열
const fruits: string[] = ['apple', 'banana', 'cherry']
const union:(string|number)[] = ['apple', 2]

// 객체
const obj: object = {}
const arr: object = []
const func:object = function(){}

interface User {
    name:string
    age:number
    isValid:boolean
}
const userA : User = {
    name:"a",
    age:11,
    isValid:true
}

// 함수
const add = function(x:number, y:number) : number {
    return x+y
}
const a:number = add(1,2)

// js : return이 없으면 undefined
// ts : return이 없으면 void
const hello = function() : void{
    console.log('hello')
}
const h:void = hello()

 

 

 

2. 타입 종류 2 - Any, unknown, tuple, void, never, union, intersection

 

// ts에서만 존재하는 추가 type들
// any는 지양(어느 타입에 할당해도 문제없기 때문)
let hel: any = 'hello'
hel=123
hel=false
hel=null
hel={}
hel=[]
hel=function(){}

// unknown
const aa : any = 123
const u : unknown= 123

const any: any = aa
const boo: boolean = aa
const object: { x:string, y:number } = aa

// tuple
const tuple: [string, number, boolean] = ['a', 1, false]
const userss: [number, string, boolean][]
= [[1, 'neo', true],[2, 'evan', false]]

// void
// return 키워드를 사용하지 않은 함수에서 반환되는 데이터의 타입
function helloworld(msg:string): void {
    console.log(`helloworld ${msg}`)
}
// 타입이 void라 사실 쓸모없음
const hi: void = helloworld('world')

// never
// 절대 발생할 수 없는 값으로 직접 사용할 일은 거의 없음
// 아래에는 타입지정이 안되어있기에 never가 들어가 있음
// const nev:[never] = []
const nev:[] = []
nev.push(3)

// union
// 동시에 여러개의 타입 지정
// let union_:string|number[] -> 문자 데이터이거나, 숫자데이터를 아이템으로 하는 변수
// let union_:(string|number)[] -> 배열 아이템이 문자 데이터이거나, 숫자데이터
let union_:string|number
union_ = 'a'
union_ = 1
union_ = false

// intersection
// &(and) 연산자와 비슷
interface Validation {
    isValid : boolean
}
const test : User & Validation = {
    name:'aa',
    age:1,
    isValid:true
}

 

 

 

3. 타입 추론

 

// 타입 추론(inference)
// ts는 매번 타입을 지정하지 않고, 필요할 때만 지정해도 됨
// 1) 초기화된 변수
let num = 12

// 2) 기본값이 설정된 매개 변수
// 3) 반환 값이 있는 함수
// 기본값이 지정된 매개 변수 'b' + 반환 값이 확실한 함수 'add'
// function add (a:number, b:number=2) : number {
//     return a+b
// }
function add (a:number, b=2) {
    return a+b
}

 

 

 

4. 타입 및 할당 단언

 

// 타입 단언(Assertion)
// 단언 키워드 - as
// Non-null 단언 연산자 - !, null이나 undefined가 아니라고 명시할 때만 사용

// 1)
// 아래 코드 결과는 찾지못해도 절대 NULL이 되지 않고, HTML BODY ELEMENT가 될 것
// const el = document.querySelector('body') as HTMLBodyElement
// el.textContent = 'hello'
// const el = document.querySelector('body')
// el!.textContent = 'hello'
const el = document.querySelector('.title')
if (el) {
    el.textContent = 'hello'
}

// 2)
function getNumber(x:number | null | undefined){
    // toFixed는 숫자 데이터에서 사용 가능
    // null이 들어가면 에러가 나서 단언을 잘 해야함
    // return Number((x as number).toFixed(2))
    // return Number(x!.toFixed(2))
    if(x){ // 0, null, undefined는 들어갈 수 없음
        return Number(x.toFixed(2))
    }
}
getNumber(3.1415926535)
getNumber(null)

// 3) 
function getValue(x:string | number, isNumber:boolean){
    if(isNumber){
        // toFixed는 문자로 반환하기에 number로 감싸줌
        return Number((x as number).toFixed(2))
    }
    return (x as string).toUpperCase()
}
getValue('hello world', false) // 'hello world'
getValue(3.143535, true) // 3.14




// 할당 단언(Assertion)
// ! 기호 사용, Non-null과 다름, 선의의 거짓말
// 변수가 이미 할당이 되어져있다고 에러 출력하지 않아도 된다는 의미
let num! : number
console.log(num)
num = 123

 

 

5. 타입 가드

 

// 타입 가드(Guards)
// Element타입은 특정 요소를 받는다는 의미

// 1)
function logText(el:Element) {
    console.log(el.textContent)
}
// h1을 못 찾아도 null이 아니라고 단언
const h1El = document.querySelector('h1') as HTMLHeadElement
// h1el의 type을 정확히 알 수 없어도 
// 거짓 데이터가 아닐 때만 실행이 될 수 있는 구조라 guard 되어, 에러 안남
if (h1El instanceof HTMLHeadingElement) {
    logText(h1El)
}

// 2)
function add(val:string | number | boolean) {
    let res = 'result => '
    if(typeof val === 'number') {
        res += val.toFixed(2)
    } 
    if (typeof val === 'string') {
        res += val.toUpperCase()
    }
    console.log(res)
}

add(3.141592)
add('hello world')

 

 

6. 인터페이스 - 기본,  함수 타입, 인덱싱 가능 타입, 확장(상속)

 

// 인터페이스 
// 선택적 속성 - ? : 없으면 모든 속성은 필수로 들어가야함
// 읽기전용 속성 - readonly : 값 할당 불가능
interface User {
    name: string
    readonly age:number
    isValid?: boolean 
}
const test : User = {
    name: 'test',
    age : 80,
    isValid : true
}
test.age = 22

const neo : User = {
    name: 'neo',
    age : 100
}



// 함수 타입 - 호출 시그니처
// 소괄호를 통해 함수 타입 지정 가능
// interface GetName {
//     (message:string) : string
// }
interface User {
    name: string
    age: number
    // 속성을 함수, 즉 메소드라면 호출 시그니처로 타입 지정 가능
    // (매개변수:타입) => (반환 타입)
    getName : (param:string) => string
}

const test:User = {
    name:'test',
    age: 20,
    getName(message:string){
        console.log(message)
        return this.name
    }
}
test.getName('hellow')



// 인덱스(객체 데이터 속성에서 점 표기법 말고, 대괄호로 속성 줄 수 있음) 가능 타입 - 인덱스 시그니처
// 배열
interface Fruits {
    // key 값을 숫자로 지정(제로 베이스 넘버)
    [item:number]:string
}
const fruits : Fruits = ['apple', 'banana', 'cherry']
console.log(fruits)


// 객체
interface User {
    // 인덱스 형식을 지우면, 아래 대괄호 표기법으로 추가 속성 지정 불가능
    [key: string] : unknown
    name: string
    age: number
}
const test2 : User = {
    name: 'test',
    age: 234
}
test2['isValid'] = true
test2['emails'] = ['test@gmail.com']
console.log(test2)


interface Payload {
    [key: string] : unknown
}
function logValues(payload: Payload) {
    for (const key in payload) {
        console.log(payload[key])
    }
}

interface User {
    // 인덱스 가능한 타입의 객체데이터를 요구할 경우,
    // 할당하는 객체데이터가 인덱스 가능한 타입일수 있도록 인덱스 시그니처 내용 추가
    [key: string] : unknown
    name: string
    age: number
    isValid: boolean
}
const test : User = {
    name: 'test',
    age: 80,
    isValid: true
}
// test는 payload와 구조가 일치해야하는데
// 내용이 일치하지 않기에 할당을 할 수 없음
// 
logValues(test)


확장(상속)
// 1)
interface UserA {
    name: string
    age: number
}
interface UserB extends UserA {
    isValid : boolean
}

const test : UserA = {
    name: 'test',
    age: 80,
    isValid: true
}
const neo : userB = {
    name: 'neo',
    age:102,
    isValid: true
}

// 2)
interface FullName {
    firstName : string
    lastName : string
}
// 기존 속성은 이전 속성과 같은 타입이어야함
interface FullName {
    middleName: string
    lastName : boolean
}

const FullName: FullName = {
    firstName : 'Tomas',
    middleName : 'Sean',
    lastName : 'Connery'
}

 

7. 타입 별칭

// 타입 별칭(Alias)
type TypeA = string
// intersection으로 사용 가능
type TypeB = string | number | boolean
type User = {
    name: string
    age: number
    isValid: boolean
} | [string, number, boolean] // 객체타입 뿐 아니라, 튜플타입도 지정될 수 있도록 생성

const userA: User = {
    name: 'nEO',
    age : 80,
    isValid: true
}

const userB : User = ['evan', 36, false]

function someFunc(param: TypeB) : TypeA {
    switch (typeof param) {
        case 'string' :
            return param.toUpperCase()
        case 'number' :
            return param.toFixed(2) // 소수점 자리 최대 2자리
        default :
        return true // string이 아니여서 오류
    }
}


type, interface 비교
// type 별칭은 할당 연산자가 필수
// 객체 데이터의 타입을 만드는 구조라기 보다, 다양한 타입의 별칭을 지정하는 용도
// 사용 범위가 넓음
type TypeUser = {
    name : string
    age: number
    isValid: boolean
}
// 함수, 배열 등 타입도 지정할 수 있지만,
// 객체 데이터를 전제로 하기 때문에 권장
interface InterfaceUser {
    name: string
    age: number
    isValid: boolean
}
// interface를 더 권장
const test : InterfaceUser = {
    name: 'test',
    age:20,
    isValid: true
}