<div id="readability-page-1" class="page"><div><p><img src="https://velog.velcdn.com/images/2taesung/post/a9f386c7-4596-4a04-bc3a-5b5d55ac312e/image.png"></p>
<p>=&gt; Object에선 특정 속성값들의 정보가 없기 때문.</p>
<h2 id="1--옵셔널">1. ? 옵셔널</h2>
<pre><code>interface User {
    name: string;
    age: number;
    gender?: string;
}

let user: User = {
    name: 'xx',
    age: 30
}</code></pre>
<p>선언시 속성값이 선택으로 됨</p>
<h2 id="2-readonly">2. readonly</h2>
<p><img src="https://velog.velcdn.com/images/2taesung/post/913504b8-a5c5-441a-91e1-bd7b44561893/image.png"></p>
<h2 id="3-">3. []</h2>
<p>grade에 무슨 뜻이 있는건 아님.<br>
<img src="https://velog.velcdn.com/images/2taesung/post/93da24dc-5b72-4129-9b1c-860e89fe928a/image.png"></p>
<p>=&gt; key와 벨류를 유기적으로 생성할 수 있게 해줌</p>
<h2 id="4-문자열-리터럴-타입">4. 문자열 리터럴 타입</h2>
<pre><code>type Score = 'A' | 'B' | 'C' | 'F';

interface User {
    name: string;
    age: number;
    gender?: string;
    readonly birthYear: number;
    [grade:number]: Score;
}

let user: User = {
    name: 'xx',
    age: 30,
    birthYear: 1,
}

for (let i=0; i&lt;2; i++) {
    user[i] = 'A'
}

console.log(user)</code></pre>
<p><img src="https://velog.velcdn.com/images/2taesung/post/ae1820a3-89c9-419a-b336-bf7e977a2124/image.png"></p>
<p>=&gt; 다른 값이 개입하면 에러 </p>
<h2 id="5-interface-function">5. interface function</h2>
<pre><code>interface Add {
    (num1: number, num2:number): number;
}

const add: Add = function(x, y) {
    return x+y;
}</code></pre>
<p>=&gt; 함수도 이렇게 input, output 타입 특정 가능</p>
<h2 id="6-class-에-적용-implements">6. class 에 적용 implements</h2>
<pre><code>interface Car {
    color: string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    color;
    wheels = 4;

    constructor(c:string) {
        this.color = c;
    }

    start() {
        console.log('go..')
    }
}

let a = new Bmw('black');
console.log(a)
a.start();</code></pre>
<h2 id="7-interface-extends">7. interface extends</h2>
<pre><code>interface Car {
    color: string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    color;
    wheels = 4;

    constructor(c:string) {
        this.color = c;
    }

    start() {
        console.log('go..')
    }
}

let a = new Bmw('black');
console.log(a)
a.start();

interface Benz extends Car {
    door: number;
    stop(): void;
}

const benz: Benz = {
    color: 'black',
    wheels: 4,
    door: 5,
    start() {
        console.log('go');
    },
    stop() {
        console.log('stop');
    }
}

console.log(benz)</code></pre>
<p><a href="https://yamoo9.gitbook.io/typescript/interface/extends">https://yamoo9.gitbook.io/typescript/interface/extends</a></p>
<ul>
<li>여러개의 interfece를 확장에 활용할수도 있음</li>
</ul>
<pre><code>interface Car {
    color: string;
    wheels: number;
    start(): void;
}

interface Toy {
    name: string;
}

interface ToyCar extends Car, Toy {
    price: number;
}</code></pre></div></div>

2taesung.log

Taesung Lee

=> Object에선 특정 속성값들의 정보가 없기 때문.
1. ? 옵셔널
interface User {
    name: string;
    age: number;
    gender?: string;
}
let user: User = {
    name: 'xx',
    age: 30
}
선언시 속성값이 선택으로 됨
2. readonly
3. []
grade에 무슨 뜻이 있는건 아님.
=> key와 벨류를 유기적으로 생성할 수 있게 해줌
4. 문자열 리터럴 타입
type Score = 'A' | 'B' | 'C' | 'F';
interface User {
    name: string;
    age: number;
    gender?: string;
    readonly birthYear: number;
    [grade:number]: Score;
}
let user: User = {
    name: 'xx',
    age: 30,
    birthYear: 1,
}
for (let i=0; i<2; i++) {
    user[i] = 'A'
}
console.log(user)
=> 다른 값이 개입하면 에러 
5. interface function
interface Add {
    (num1: number, num2:number): number;
}
const add: Add = function(x, y) {
    return x+y;
}
=> 함수도 이렇게 input, output 타입 특정 가능
6. class 에 적용 implements
interface Car {
    color: string;
    wheels: number;
    start(): void;
}
class Bmw implements Car {
    color;
    wheels = 4;
    constructor(c:string) {
        this.color = c;
    }
    start() {
        console.log('go..')
    }
}
let a = new Bmw('black');
console.log(a)
a.start();
7. interface extends
interface Car {
    color: string;
    wheels: number;
    start(): void;
}
class Bmw implements Car {
    color;
    wheels = 4;
    constructor(c:string) {
        this.color = c;
    }
    start() {
        console.log('go..')
    }
}
let a = new Bmw('black');
console.log(a)
a.start();
interface Benz extends Car {
    door: number;
    stop(): void;
}
const benz: Benz = {
    color: 'black',
    wheels: 4,
    door: 5,
    start() {
        console.log('go');
    },
    stop() {
        console.log('stop');
    }
}
console.log(benz)
https://yamoo9.gitbook.io/typescript/interface/extends
여러개의 interfece를 확장에 활용할수도 있음
interface Car {
    color: string;
    wheels: number;
    start(): void;
}
interface Toy {
    name: string;
}
interface ToyCar extends Car, Toy {
    price: number;
}

[ts] 인터페이스

댓글