[typescript] interface

최영진·2023년 1월 17일
0

typescript

목록 보기
2/9
post-custom-banner

interface

1. object

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

let user : User = {
  name: 'youngjin',
  age: 30
}

interface 로 type을 미리 지정하여 사용가능.

처음 명시할때 없다면 error 발생!

interface User {
  name: string;
  age: number;
  gender? : string;  // 옵셔널로 처리해주기.
}

let user : User = {   // 에러발생하지 않음.
  name: 'youngjin',
  age: 30
}

2. readonly

처음 입력때만 값이 들어가고 이후 수정 불가.

interface User {
  readonly name: string;
}

let user : User = { 
  name: 'youngjin',
}

user.name = 'jin'  // 에러발생!

3. 여러 인자 type 지정

type number 인 a , 그 값은 string 으로 여러 인자를 받을 수 있다.

interface User {
  [a: number] : string;
}

4. type 사용

여러 인자 사용시 값이 지정되어 있을 경우,
다른 값이 사용되지 않게 미리 지정!

string 에 Choi, Kim, Lee 값만 넣을 수 있음. 그 외 error

type Lastname = 'Choi' | 'Kim' | 'Lee';

interface User {
  [a: string] : Lastname;
}

5. 함수의 정의

interface 함수 {
 (인자) : 리턴 
}

interface Add {
 (n1:number, n2:number) : number;
}

const add : Add = function(n1,n2){  // 함수
  return n1 + n2;
}

const add: Add = (n1,n2) =>{  // 화살표함수
  return n1 + n2;
}
  

6. interface 의 확장(extends)

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

interface OldUser extends User {
 local: string; 
}

let user : OldUser = {   // local 을 쓰지 않아 error발생
  name: 'youngjin',
  age: 30
}

2가지 이상의 확장도 가능!

interface Name{
  name: string;
}
interface Age{
  age: number;
}

interface User extends Name, Age{
  local: string;
}

let user : User = {
  name: 'youngjin',
  age: 30,
  local: 'Incheon'
}
profile
안녕하시오.
post-custom-banner

0개의 댓글