[TypeScript] 기본 문법

타입 선언하기

타입은 소문자, 대문자를 구별하기 때문에 주의해야 한다

TypeScript 에서 타입은 모두 소문자 다

 

문자열

let str: string = "안녕??";

 

 

숫자

let num: number = 1;

 

 

boolean

let check: boolean = false;

 

 

null

let n: null = null;

 

 

undefined

let u: undefined = undefined;

 

 

object

let obj: object = { name: "흰둥이" , addr: "https://greed-yb.tistory.com/" };
// obj.name 으로 값을 못가져온다

-------------------------------------------------------------------------------

type test = {
    name: string,
    addr: string
}

let obj: test = {
    name: "흰둥이",
    addr: "https://greed-yb.tistory.com/",
};

// obj.name 으로 값을 가져올수 있다

 

 

 

배열

    let arr: Array<number> = [1, 2];
    let arr: number[] = [1, 2];
    
    let arr: Array<string> = ["흰둥이", "https://greed-yb.tistory.com/"];
    let arr: [string, number] = ["흰둥이", 1];

 

 

 

any

let test: any = "흰둥이";

test = 1;

test = true;

타입을 체크할 필요가 없는 경우 사용

 

 

 

 

타입 별칭 선언하기

type 은 interface 와 달리 새로운 타입을 생성해 주는 것이 아니라 별칭을 선언해 주는 것이다

그래서 interface 는 가능한 extends 를 사용할 수 없다

type testString = string;
let str: testString = "흰둥이";

type test = {
    name: string,
    addr: string
}

 

 

 

 

 

함수 선언하기

function hello(name: string) {
	return `hello ${name}`;
}

let test = function(name: string) {
	return `hello ${name}`;
}

let test = (name: string) {
	return `hello ${name}`;
}

// a: 인자타입, b: 인자타입 , :반환타입
function sum(a: number , b: number): number {
	return a+b;
}

 

 

 

 

 

Interface 선언하기

 

타입 체크를 위해 사용되며, 변수, 함수, 클래스에 사용할 수 있다

 

변수로 활용하기

interface Info {
	name: string,
        addr: string
}

// Interface Info 타입으로 선언
let test: Info = {name: "흰둥이" , addr: "지구"}

 

 

 

함수로 활용하기

interface Info {
	(name: string): string;
}

// Interface Info 함수로 선언
let test: Info = function(name: string) {
	 return `hello ${name}`;
}

 

 

 

 

클래스에 활용하기

interface Info {
	name: string;
        addr: string;
        
        userInfo(): string;
}

class Test implements Info {
  constructor (
    public name: string,
    public addr: string
  ) { }
  
  userInfo(): string {
    return `hello ${this.name}`;
  }
}

 

 

 

 

extends 상속받기

interface Test {
	age: number;
}


interface Info extends Test {
	name: string,
        addr: string
}

 

 

---

이 외에도 문법이 많지만 자주 사용할 것 같지가 않아서

간단한 문법 위주로 정리하였다

단순하게 JavaScript 에서 타입을 선언해서 

사용하는 것이 TypeScript 라고 들었는데

React 를 처음 공부하면서 TypeScript 까지 하려니 이게 어디 문법인지 헷갈려서 정리를 해 보았다