[Typescript] 타입스크립트 타입 기능

 

 

타입스크립트 기초

 

 

 

728x90

 

 

1. 타입 추론

타입스크립트에서는 명시적인 변수의 초기화를 수행하면 타입 추론을 통해 자동적으로 타입이 결정된다.

const aaa = 10;
console.log(age.legnth); // error! aaa는 number타입이므로 length 속성이 없음.

 

 

2. 타입 어서션

타입스크립트가 구체적인 타입을 알 수 없는 경우 타입을 정해줄 수 있다.

const aaa: any = 'aaa';
const bbb: number = aaa as number;

 

다른 언어의 타입 캐스트와 비슷하고, 런타임 시 영향이 없으며 컴파일 과정에서만 사용한다.

 

 

3. 타입 앨리어스

타입 앨리어스는 타입 지정의 별명을 덧붙이는 기능이다.

type 타입명 = 값

type Aaa = string

 

타입명은 보통 대문자로 시작한다.

 

- 예시

type Point = {
    x: number;
    y: number;
}

function printPoint(point: Point) {
	console.log(point.x);
    console.log(point.y);
}

printPoint({x: 10, y: 10});

 

함수도 타입 앨리어스로 만들 수 있다.

type Formatter = (a: sring) => string

function printName(aaa: string, formatter: Formatter) {
	console.log(formatter(aaa));
}

 

 

4. 인터페이스

타입스크립트의 인터페이스는 타입 앨리어스와 비슷하고, 확장성이 높다.

interface Point {
	x: number;
    y: number;
}

function printPoint(point: Point) {
	console.log(point.x);
    console.log(point.y);
}

printPoint({x: 1, y: 2, z: 3}); // error!

interface Point {
	z: number;
}

printPoint({x: 1, y: 2, z: 3});

 

인터페이스는 나중에 추가가 가능하다.

인터페이스에서 클래스의 작동 타입을 정의하고, 클래스에서 implements를 사용해 클래스 구현을 위임할 수 있다.

interface Point {
	x: number;
    y: number;
    z: number;
}


// 인터페이스의 변수를 모두 사용해야 에러가 안난다.
class classPoint implements Point {
	x: number;
    y: number;
}


class classPoint implements Point {
	x: number;
    y: number;
    z: number; // 추가
}

 

인터페이스에 extends를 사용해 다른 인터페이스를 확장할 수 있다.

interface PointX {
	x: number;
}

interface PointY {
	y: number
}

interface Point extends PointX, PointY {}

const aaa: Point = {
	x: 1,
    y: 2
}

 

인터페이스는 클래스나 데이터의 한쪽 측면을 정의한 타입, 즉, 인터페이스에 매치하는 타입이라도 그 값 이외에 다른 필드나 메소드가 있음을 전제로 한다.

 

타입 앨리어스는 객체의 타입 자체를 의미한다.

 

 

5. 클래스

자바스크립트의 클래스에 타입을 붙일 수 있다.

class Point {
	x: number;
    y: number;
    
    constructor(x: number=0, y: number=0) {
    	this.x = x;
        this.y = y;
    }
}

const aaa = new Point();
console.log(aaa.x, aaa.y); // 0, 0

const bbb = new Point(10, 0);
console.log(aaa.x, aaa.y); // 10, 0

 

클래스에 extends를 사용해 다른 클래스를 상속할 수 있다.

// 바로 위에서 만든 Point 클래스 상속
class Ttt extends Point {
	z: number;
    
    constructor(x: number = 0, y: number = 0, z: number) {
        super(x, y);
        this.z = z;
    }
}

const aaa = new Ttt();
console.log(aaa.x, aaa.y, aaa.z); // 0, 0, 0

const bbb = new Ttt(1, 1, 1);
console.log(aaa.x, aaa.y, aaa.z); // 1, 1, 1

 

인터페이스의 implements 기능으로 클래스에게 구현을 강제할 수 있다.

interface Point {
	x: number;
    y: number;
    sayPoint: () => string; // 인수 없이 string 값 반환
}

class Ttt implements Point {
	x: number;
    y: number;
    
    constructor(x: number, y: number) {
    	this.x = x;
        this.y = y;
    }
    
    sayPoint(): string {
    	return `${x}, ${y}`;
    }
}

const aaa = new Ttt();
aaa.x = 1;
aaa.y = 1;

console.log(aaa.sayPoint()); // 1, 1

 

 

6. 접근 수정자

타입스크립트에는 접근 수정자로 public, private, protected를 제공한다. 지정 안할 경우 public으로 인식한다.

public: 어디서든 접근 가능

private: 같은 클래스에서만 접근 가능

protected: 상속했을 경우 접근 가능

 

 

 

https://link.coupang.com/a/bo3FAk

위키북스 실전 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."