많은 타입스크립트 문법중 자주 쓰일 것 같은 문법만 정리함.

타입 지정

변수

let name:string = 'dawoon'
let age:number = 30
let check:boolean = true;
let nullData:null = null;
let anyType:any = null; // 어떤 타입이든 지정
let doubleType:string | number = 10 // 두개 이상의 타입이 들어올 수 있을때
let week:string[] = ['mon','tue','wed']; // 문자열로만 구성된 배열
let day:number[] = [1,2,3]; // 숫자로만 구성된 배열
let day:Array<number> = [1,2,3]; // 위와 같은 기능 표현만 다름
let stringAndNumber:[string,number,string?] = ['test',2]; // 혼합 되어있는 배열 타입에 ?를 붙일 경우 생략 가능

함수

기본 사용법

함수 인자와 반환값에 타입을 지정할 수 있음

function test (name:string):number{
	return 1;
}
function test (name:string):void{ // 반환값이 없을 경우
	...
}

인자의 기본값

인자가 전달되지 않을 때 사용할 기본값을 지정할 수 있다. 인자가 전달될 경우 기본값이 아닌 전달된 인자를 받게된다.

function test(name:string,age:number = 123):number{
...
}

인자 생략

생략할 수 있는 인자를 인자 이름 뒤에 물음표를 붙여서 지정한다.

function test(name:string,age?:number):number{
...
}

인터페이스 interface

interface

인터페이스는 미리 선언된 규칙을 의미함 타입스크립트에선 다음과 같은 범주에 정의된다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

interface personType {
	name:string;
  	age:number;
  	address?:string; // ? 가 붙을경우 생략 가능
}

const personData:personType = {
    name:'test',
    age:1,
// 	phone:'01012341234' 선언되지 않은 타입은 에러 발생
}

function personInsert(person:personType){ // 들어올 함수 인자를 선언
	console.log(person.name)
} 

위의 인터페이스가 선언한 타입으로 객체의 속성 타입을 정의할 수 있다. 인터페이스 속성을 사용할 경우 속성을 선택적으로 적용할 수 있을 뿐 아니라 인터페이스에 정의되어 있지 않은 속성에 대해 인지 시켜줄 수 있다는 장점이 있다.
속성을 선택적으로 적용하기 위해선 ? 키워드를 쓰기 때문에 정의되지 않은 속성을 추가하는 것을 제어하여 엄격하게 관리할 수 있다.

읽기 전용

인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성을 의미한다.
문법은 다음과 같이 readonly 속성을 앞에 붙인다.

interface personType {
	name:string;
    readonly age:number; // 해당속성을 수정하려고 할경우 에러 발생
}

교차 타입

& 를 활용해서 교차 타입을 선언할 수 있다 두개의 인터페이스 타입이 모두 들어가 있지 않을 경우 에러를 발생 시킨다.

interface personType {
	name:string;
    readonly age:number;
}

interface itemType {
	itemName:string;
    itemNumber
}

const personData:personType & itemType= {
    name:'test',
    age:1,
    itemName:"",
    itemNumber:5
}

interace 확장

extends 키워드를 사용하여 기존 인터페이스에 추가 타입을 선언하여 새로운 새로운 인터페이스를 선언할 수 있다.

interface personType {
	name:string;
    readonly age:number;
}

interface Developer extends personType {
    skill: string;
  }
  

const personData:Developer = {
    name:'test',
    age:1,
    skill:'ts'
}