반응형
📝리터럴
/** ---- 리터럴 ---- **/
function printText(s: string, alignment: "left" | "right" | "center") {
// ...
}
printText("Hello, world", "left");
// 예시2
interface Options {
width: number;
}
function configure(x: Options | "auto") {
// ...
}
configure({ width: 100 });
configure("auto");리터럴로 선언한 값만 사용 가능
📝유니온 타입
/** ---- 유니온 타입 ---- **/
function printId(id: number | string) {
console.log("Your ID is: " + id);
}
printId(101); // OK
printId("202"); // OK두개의 타입을 허용합니다
📝익명 함수
/** ---- 익명 함수 ---- **/
interface Minus {
(num1 : number, num2 : number):number;
}
const minus: Minus = (x, y) => {
return x - y;
}
console.log(minus(1,5)); // -4
📝Interface
/** ---- interface ---- **/
// 인터페이스는 ES6가 지원하지 않는 타입스크립트만의 특징으로 JS컴파일 후에 사라집니다.
interface Car {
color: string;
wheels: number;
start() : void;
}
/** ---- interface extend interface ---- **/
// interface끼리 확장은 가능하지만 Java처럼 Interface 그 자체로는 사용을 못한다
interface Stuff {
color: string
}
interface Mouse extends Stuff {
name: string
}
📝Class
/** ---- class extends class ---- **/
class Cup {
color: string;
constructor(color: string) {
this.color = color;
}
sayMyName(): void{
console.log(this.color);
}
}
class GlassCup extends Cup{
name: string;
constructor(color: string, name: string) {
super(color);
this.name = name;
}
sayMyName() {
console.log("glassCup");
}
}
let glassCup = new GlassCup("blue","france cup")
console.log(`glassCup.name : ${glassCup.name}`) // glassCup.name : france cup
glassCup.sayMyName(); // glassCup- 클래스의 경우 constructor가 필요하다 그렇지 않으면 에러 발생한다
- this의 경우 클래스 안의 변수를 찾아간다 this를 사용하지 않으면 class 밖에 있는 변수를 찾아간다
Getter, Setter
class C {
_length = 0;
get length() {
return this._length;
}
set length(value) {
this._length = value;
}
}getter와 setter를 선언할 수 있다
오버라이드
class Base {
greet() {
console.log("Hello, world!");
}
}
class Derived extends Base {
greet(name?: string) {
if (name === undefined) {
super.greet();
} else {
console.log(`Hello, ${name.toUpperCase()}`);
}
}
}
const d = new Derived();
d.greet(); // Hello, world!
d.greet("reader"); // Hello, READER오버라이드할 때 상위 클래스의 형태를 포함하고 있지 않으면 에러가 발생한다 위의 코드의 경우는 optional처리가 되어있어서 상관 없지만 그렇지 않으면 에러 발생합니다
public, protected, private, static
/** public **/
class Greeter {
public greet() {
console.log("hi!");
}
}
const g = new Greeter();
g.greet();
/** protected **/
class Greeter {
public greet() {
console.log("Hello, " + this.getName());
}
protected getName() {
return "hi";
}
}
class SpecialGreeter extends Greeter {
public howdy() {
// OK to access protected member here
console.log("Howdy, " + this.getName());
}
}
const g = new SpecialGreeter();
g.greet(); // OK
g.getName();
// Property 'getName' is protected and only accessible within class 'Greeter' and its subclasses
/** private **/
class Base {
private x = 0;
}
const b = new Base();
// Can't access from outside the class
console.log(b.x);
// Property 'x' is private and only accessible within class 'Base'.
/** static **/
class MyClass {
static x = 0;
static printX() {
console.log(MyClass.x);
}
}
console.log(MyClass.x);
MyClass.printX();- public의 경우 외부에서 코드를 제어할 수 있습니다
- protected는 외부에서 코드를 제어할 수 없고 extends했을 때는 해당 클래스 내부에서는 사용이 가능합니다
- private은 protected랑 비슷하지만 하위 클래스에서도 멤버에 대한 엑세스 허용이 되지 않습니다
- static의 경우는 클래스의 객체를 만들어서 쓰는게 아니라 클래스 자체를 수정할 수 있습니다
📝Abastract Class
class Derived extends Base {
getName() {
return "world";
}
}
const d = new Derived();
d.printName();
class Derived extends Base {
//Non-abstract class 'Derived' does not implement inherited abstract member 'getName' from class 'Base'.
// forgot to do anything
}추상 클래스의 경우 상속받아서 사용하며 추상 메서드는 구현이 필요하다
📝Class Implements Interface
/** ---- class implements interface ---- **/
class BMW implements Car{
color;
wheels = 4;
constructor(color: string) {
this.color = color;
}
start(){
console.log("go....");
}
}
const bmw = new BMW('green');
bmw.start(); // go....
console.log(bmw); // BMW { wheels : 4, color : 'green' }
/** ---- class implements interface(2) ---- **/
interface A {
x: number;
y?: number;
}
class C implements A {
x = 0;
}
const c = new C();
c.y = 10;
// Property 'y' does not exist on type 'C'.인터페이스를 상속받을 때 Optional인 경우 해당 속성은 생성되지 않습니다
📝Type
/** ---- Type ---- **/
type Animal = {
name: string;
}
/** ---- Type Extension ---- **/
type Bear = Animal & {
honey: boolean;
}
const bear = getBear();
bear.name;
bear.honey;
/** ---- Type vs Interface ---- **/
// interface 기능을 Type이 대부분 사용 가능하지만 Type은 재선언이 불가능
interface Window {
title: string;
}
interface Window {
ts: TypeScriptAPI;
}
type Window = {
title: string;
}
type Window = {
ts: TypeScriptAPI;
}
// Error: Duplicate identifier 'Window'.
🔗 참고 및 출처
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
반응형