#2 typescript study

interface

// 인터페이스 정의
interface User {
    age: number;
    name: string;
}

// 변수에 인터페이스 활용
const seho: User = {
    age: 33,
    name: '세호'
}

// **함수에 인터페이스 활용
function getUser(user: User) {
    console.log(user)
}

const capt = {
    name: '캡틴'
}

getUser(capt) // interface에 맞지 않는 인자

// 함수의 스펙(구조)에 인터페이스를 활용
interface SumFunction {
    (a: number, b: number): number
}

let sum: SumFunction
sum = (a:number, b:number): number => {
    return a + b;
}

// 인덱싱
interface StringArray {
    [index: number]: string
}

const arr: StringArray = ['a', 'b', 'c']
arr[0] = '하이' // 통과
arr[1] = 123 // 오류

// 딕셔너리 패턴
interface StringRegexDictionary {
    [key: string]: RegExp
}

const obj: StringRegexDictionary = {
    sth: /abc/,
    cssFile: /\.css$/,
    jsFile: /\.js$/
}

Object.keys(ob

タイプとインタフェース

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

type Person = {
    name: string;
    age: number;
}

const seho: Person = {
    name: '세호',
    age: 30
}

// 타입 별칭: 정의한 타입에 대해 나중에 수비게 참고할 수 있게 이름을 부여하는 것.
type MyString = string
const str: MyString = 'hello'

type Todo = { id: string; title: string; done: boolean }
function getTodo(todo: Todo) {

}

// 타입과 인터페이스 차이점
// type은 확장이 불가능하지만 interface는 확장이 가능하기때문에 추천한다.

typeは拡張不可能ですが、インタフェースは拡張可能なのでおすすめです。

//유니온 타입 특징: 공통된 속성에만 조건을 통과한다
interface Developer {
    name: string;
    skill: string;
}

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

function askSomeone(someone: Developer | Person) {
    someone.name // 공통된 속성에 접근 가능
    someone.skill
    someone.age
}

enum

ドロップダウンメニューなど、UIを作成するときに使用しましょう...?
まだよくわかりませんが...

enum Shoes {
    Nike,
    Adidas
}

let myShoes = Shoes.Nike
console.log(myShoes)

enum Name {
    Jason = '제이슨',
    Mark = '마크'
}

let myName = Name.Jason
console.log(myName)

// 예제
enum Answer {
    Yes = 'Y',
    No = 'N'
}

function askQuestion(answer: Answer) {
    if (answer == Answer.Yes) {
        console.log('정답입니다.')
    }

    if (answer == Answer.No) {
        console.log('오답입니다.')
    }
}

askQuestion(Answer.Yes)

クラス構文のタイプスクリプト

class Person {
    // 멤버 변수 타입 정의
    private name: string
    public age: number
    readonly log: string // 읽기 전용
    
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}

// 리액트 클래스 - 클래스 기반 코드
class App extends React.Component {

}

// 리액트 훅 - 함수형 코드
function App() {
    return <div>Hello world</div>
}

// 뷰
new Vue({
  el: '',
  setup() {

  }
})

ジェニーリック

これは高繰返し使用性素子を製造する際によく用いられる特徴である.

/*
 함수를 호출 할때 인자의 타입을 정의 할 수 있다.
* */
function logText<T>(text: T): T {
    console.log(text)
    return text
}

logText<string>('콘솔 메세지 입니다.')

// 제네릭의 장점

function logText2(text: string) {
    console.log(text)
    text.split('').reverse().join()
    return text
}

logText2('a')

function logNumber(num: number) {
    console.log(num)
    return num
}

// 유니온 활용하기
function logText3(text: string | number) {
    console.log(text)
    return text
}

logText3(1)
logText3('텍스트')

// 제네릭의 장점과 타입 추론에서의 이점
function logText4<T>(text: T): T {
    console.log(text)
    return text
}

const str = logText4<string>('a')
str.split('')
const login = logText4<boolean>(true)