# π» Typescript

waterglassesΒ·2022λ 6μ 24μΌ
0

## TIL

33/50

β οΈ μ λ¦¬ν λ΄μ©μ μ€νλ μλͺ»λ μ λ³΄κ° μμ μ μμ΅λλ€. λκΈλ‘ μλ €μ£Όμλ©΄ κ°μ¬νκ² μ΅λλ€.

## νμμ€ν¬λ¦½νΈ λ¬Έλ²

### 1. νμ μ£Όμκ³Ό νμ μΆλ‘

• νμ μ£Όμ: λ³μ, μμ νΉμ λ°ν κ°μ΄ λ¬΄μ¨ μ°¨μμΈμ§λ₯Ό λνλ΄λ κ²μ μλ―Έ
• νμ μΆλ‘ : ν΄λΉ λ³μκ° μ΄λ€ νμμΈμ§ μΆλ‘ νλ κ², μλ΅νλ©΄ μ»΄νμΌ νμμ μμλΈλ€.
let a: number = 1
let b = 2
let c: boolean = false
let d: string = 'TypeScript'
let f = { a: 1 }
f.a = 2
f.b = 3 // λΆκ°λ₯

let f: number[] = []
h.push(1) // κ°λ₯
h.push('a') // λΆκ°λ₯

let i: 'good' : 'good' // iλΌλ λ³μλ goodλ§ κ°λ₯νλ€.
let g: any = 3 //jsμμ νλ―μ΄ μλ¬΄ κ°μ΄λ λ€μ΄κ° μ μλ€.

function add(a: number, b: number): number {
return a + b
}
console.log(add(1,3)) // 4

### 2. μΈν°νμ΄μ€

• κ°μ²΄μ νμμ μ μνλ λ°©λ².
• interfaceλΌλ ν€μλλ‘ κ°λ₯νλ€.
interface Company {
name: string
age: number
address?: string // ?λ₯Ό λΆμ΄λ©΄ μ ν μμ±μ΄ λ¨ (optionalμ΄λΌ λΆλ¦)
}

const kakao: Company = {
name: 'kakao',
age: 10,
address: 'Seoul', // μ λ£μ΄λ μλ¬κ° λμ§ μμ(?λ₯Ό λΆμ¬μ)
}
console.log(kakao) // μ μ μΆλ ₯

// μ΅λͺ μΈν°νμ΄μ€
const person: {
name: string
age?: number
} = {
name: 'Sugyeong',
age: 100,
}

### 3. tuple

const tuple: [string, number] = ['Sugyeong', 100]
console.log(tuple) // ['Sugyeong', 100]

### 4. enum

enum Color {
RED,
GREEN,
BLUE,
}

const color = Color.BLUE
// if(color === Color.BLUE ){

// }
enum Color {
RED = 'red',
GREEN = 'green',
BLUE = 'blue',
}

### 5. λμ νμ

• μ¬λ¬ μλ£νμ κ°μ κ°μ§ μ μκ² νλ λ°©λ²
let numOrStr: number | string = 1 // number νΉμ stringμ΄ λ€μ΄κ° μ μλ€.

let numAndStr: number & string = '' // μμ νμμμ μ¬μ©ν  μλ μλ€.

interface Name {
name: string
}

interface Age {
age: string
}

let sunhyoup: Name & Age = {
// κ°μ λ λ€ λ£μ΄μ€μΌν¨
name: 'Sugyeong',
age: 100,
}

type Person = Name & Age
let julia: Person = {
name: 'julia',
age: 100,
}

### 6. Optional

• ES 2021μλ μΆκ°λ κΈ°λ₯, νμμ€ν¬λ¦½νΈλ μ΄λ―Έ μμλ€.
interface Post {
title: string
content: string
}

interface ResponseData {
post?: Post
message?: string
status: number
}

const response: ResponseData[] = [
{
post: {
title: 'Hello',
content: 'Hi~'
},
status: 200
},
{
message: 'Error!'
status: 500
}
]

console.log(response[0].post.title) // Hello
console.log(response[1].post?.title) // λ°μ΄ν°κ° μλ€λ©΄ μλμΌλ‘ undefinedλ₯Ό λ°ννλ€.

### 7. Generic

• νλμ μΈν°νμ΄μ€λ‘ μ¬λ¬ νμμ μ΄μ©ν  μ μκ² νλ λ°©λ²
interface Value<T> {
value: T
}

const value: Value<number> = {
value: 1,
}

const value: Value<string> = {
value: '1',
}

function toString<T>(a: T): string {
return \${a}
}

console.log(toString<string>('5'))

### 8. Partial, Required, Pick, Omit

• κΈ°μ‘΄ interfaceλ₯Ό μ¬νμ© ν  μ μκ² λ§λ λ€.
interface User {
id: number
name: string
age: number
createAt?: string
updateAt?: string
}

// λͺ¨λ  νλκ° Optionalμ΄ λλ€.
const partial: Partial<User> = {}

// λͺ¨λ  νλκ° Requiredκ° λλ€.
const required: Required<User> = {
id: 1
name: 'Lee'
age: 10
createAt: '',
updateAt: ''
}

// νΉμ  νλλ§ κ³¨λΌμ μ¬μ©ν  μ μλ€.
const pick: Pick<User, 'name' | 'age'> = {
name: ''
age: '10'
}

// νΉμ  νλλ§ λΉΌκ³  μ¬μ©ν  μ μλ€.
const omit: Omit<User, 'id' | 'createAt' | 'updateAt'> = {
name: ''
age: '10'
}

//
const mixed: Omit<User, 'id' | 'address' | 'age' | 'createAt' | 'updateAt'> & Pick<Partial<User>, 'address' | 'age'> = {
name: ''
}

### 9. extends

• νΉμ  μΈν°νμ΄μ€λ₯Ό μμλ°μ μΈν°νμ΄μ€λ₯Ό νμ₯ν  μ μλ€.
interface Time {
hour: number
minute: number
second: number
}

interface DateTime extends Time {
year: number
month: number
day: number
}

interface OffsetDateTime extends DateTime {
offset: number
}

interface OffsetDateTime extends DateTime {
zoneId: string
}

interface TimeFormat extends Pick<Time, 'hour' | 'minute'> {
ampm: 'am' | 'pm'
}

const timeFormat: TimeFormat = {
hour: 10
minute: 30
ampm: 'am'
}

## π₯ λλμ 

μ€κ° νλ‘μ νΈκ° λλκ³  λ°λ‘ λ€μλ λΆν° λ€μ κ°μλ£λ μΆμ μμνμλ€π₯² μ€λμ typescriptμ λν΄μ λ°°μ λλ° μμ§ μ’ λ¨Ό μκΈ°λ‘ λ€λ Έλ€.

μ΄λ°μμΌλ‘ μ μνκ³  μ¬μ©νλ κ±°μκ΅¬λ~λΌκ³  μΈμ§μ λ ν κ² κ°λ€. μμ£Ό μ¨κ°λ©΄μ μ΅μν΄μ§λλ‘ λΈλ ₯ν΄μΌμ§! μμμμ!!

## Refer

λ§€ μκ° μ±μ₯νλ κ°λ°μκ° λλ €κ³  λΈλ ₯νκ³  μμ΅λλ€.