반응형
let user:object; //객체 생성
user ={
name : 'xx',
age : 30
}
//console.log(user.name);
//에러발생 - object에는 특정 속성값에 대한 정보가 없기 때문에
//: 프로퍼티를 사용해 객체를 사용하기 위해서는 인터페이스 사용해야 한다.
interface User{
name : string;
age : number;
gender? : string;
readonly birthYear? : number;
}
let user2 : User={
name : 'xx',
age : 30
}
let user3 : User={
name : 'xx',
age : 30,
gender : 'male'
}
let user4 : User={
name : 'xx',
age : 30,
gender : 'male',
}
//타입 명시, 프로퍼티 반드시 필요
console.log(user2.age);
//존재하는 프로퍼티를 보여줌
user2.age=10;
//user2.gender="male"
//에러발생
user3.gender="male"
//입력을 해도 되고 안해도 되는 속성은 옵셔널
//user4.birthYear : 1990;
//읽기전용은 최소 선언시 할당한 값을 수정 불가
//학생유저
interface User2{
name : string;
age : number;
gender? : string;
readonly birthYear? : number;
1? : string;
2? : string;
3? : string;
4? : string;
}
//문자열 인덱스 서명 추가
interface User3{
name : string;
age : number;
gender? : string;
readonly birthYear? : number;
[grade:number] : string;
//학년은 숫자, 학점은 문자 -> 키는 숫자, 값은 문자
}
let user5 : User3={
name : 'xx',
age : 30,
gender : 'male',
1 : 'A',
2 : 'B'
}
//학점은 한 글자 -> 문자열 리터럴 타입 이용
type Score = 'A' | 'B' | 'C' | 'F';
interface User4{
name : string;
age : number;
gender? : string;
readonly birthYear? : number;
[grade:number] : Score;
//학년은 숫자, 학점은 문자 -> 키는 숫자, 값은 문자
}
let user6 : User3={
name : 'xx',
age : 30,
gender : 'male',
1 : 'A',
2 : 'B'
}
//인터페이스를 이용한 함수정의
interface Add{
//(인자) :리턴 타입
//(num1:number, num2:number) :void
(num1:number, num2:number) :number;
}
const add :Add = function(x,y){
return x+y;
}
//인터페이스로 정의한 함수와 형태가 같아야 한다.
add(10,20);
//add('10','20');
//add(10,20, 1);
//형태가 다르면 에러 발생
interface IsAdult{
(key:number):boolean;
}
const c:IsAdult = (age) => {
return age > 19;
}
c(33);
//인터페이스를 이용한 클래스 정의 -implements로 구현
interface Car{
color: string;
wheels: number;
start(): void;
}
//구현
class Bmw implements Car{
color ="red";
wheels = 4;
start(){
console.log('go...');
}
}
//생성자 이용한 구현
class Benz implements Car{
color;
wheels = 4;
constructor (c:string){
this.color=c;
}
start(){
console.log('go...');
}
}
const bmw = new Bmw();
const benz = new Benz('red');
//인터페이스의 확장 : extends로 상속
interface Audi extends Car{
door: number;
stop(): void;
//상속한 속성 외에 추가로 정의
}
class Audi implements Audi{
color;
wheels;
constructor (c:string, w:number){
this.color=c;
this.wheels=w;
}
stop(){
console.log('stop...');
}
}
const audi = new Audi('white', 4);
const audi2 : Audi= {
color :"red",
wheels : 4,
door: 4,
stop(){
console.log('stop');
},
start(){
console.log('go...');
}
}
//다중 상속
interface Toy{
color : string;
name: string;
}
interface ToyCar extends Car, Toy{
price : number;
}
반응형
'JavaScript > TypeScript' 카테고리의 다른 글
타입스크립트 클래스 (0) | 2024.02.05 |
---|---|
타입스크립트 리터럴, 유니온/교차타입 (0) | 2024.02.02 |
타입스크립트 함수 (0) | 2024.02.01 |
타입스크립트 DOM (0) | 2024.02.01 |
타입스크립트 기본타입 (0) | 2024.01.31 |