타입스크립트(Typescript)란?
자바스크립트(Javascript)와 100% 호환되는 언어로, 이름처럼 type이 중요해진 JS라고 볼 수 있다.
JS에서는 변수의 타입을 지정하지 않는다.
let a = 3;
const PI = 3.14;이 경우, 변수의 타입이 잘못 지정되거나 외부에서 받아온 데이터의 타입을 잘못 이해해서 오류가 발생할 수 있다.
따라서, 사용하기는 조금 까다롭지만 안전한 프로그래밍이 가능한 TS의 인기가 올라가고 있다.
타입 지정하기
let isDone: boolean = true;
const str: string = 'hello';
let num: number = 2;위와 같이 '변수명: 타입' 으로 타입을 지정한다.
let array: number[] = [1, 2, 3]; // Array<number>
const strArr: Array<string> = ['hello', 'world'];
const objArr: Array<object> = [
{ item: 'value1' },
{ item: 'value2' }
];배열은 위와 같이 지정한다.
objArr.map((obj: any) => {
console.log(`item: ${obj.item}`)
})
/*
*item: value1
*item: value2
*/map() 메서드를 활용하면 배열을 순회하면서 요소들을 호출한다.
'any'는 모든 타입을 사용할 수 있다.
const foo = (obj: object): void => {
console.log(obj);
};
const boo = (obj: Object): void => {
console.log(obj);
}
// foo('hi')
// Argument of type 'string' is not assignable to parameter of type 'object'.
boo('hi')object : 원시 타입(숫자형, 문자형, 불린형)이 아닌 타입만 할당 가능
Object : 모든 타입 할당 가능
function foo2(a: number, b: number): number {
return a + b;
};
const boo2 = (a: number, b: number): number => {
return a + b;
};함수의 타입 지정은 위와 같이 한다.
let a: null = null;
// let x: null = 2;
let b: undefined = undefined;
// let y: undefined = null;null과 undefined도 타입으로 지정해야하고, 동일한 이름의 값만 할당할 수 있다.
let myName: any = 'Woojin';
let myNameLength: number = (<string>myName).length;
let yourName: any = 'Lee';
let yourNameLength: number = (yourName as string).length;any는 상술했듯 모든 타입을 할당할 수 있는데, 대신 변수의 타입을 알 수 없다.
length 함수처럼 특정 타입이어야만 사용할 수 있는 것들에는 위와 같은 방법으로 타입을 지정해줘야 한다.
(근데 지정 안해도 typeof 로는 string이라고 나온다. 뭐지?)
인터페이스(interface)
객체 지향 언어인 JS.
객체(Object)를 많이 사용하는데, TS에서는 객체의 타입을 지정할 수 있는 방법을 만들어놓았다.
인터페이스는 객체의 프로퍼티들의 타입을 지정해놓은 틀의 개념이다.
interface Closet {
name: string;
shirt: number;
pants: number;
sunglass?: number; <?: 선택적 프로퍼티>
hat?: number;
}위와 같이 객체에 지정할 인터페이스를 선언한 다음,
const ohmygirl: Array<Closet> = [
{
name: '효정',
shirt: 5,
pants: 2,
},
{
name: '아린',
shirt: 2,
pants: 8,
hat: 2 // 선택적!
}
];객체의 타입을 위에서 선언한 인터페이스로 지정한다.
선택적 프로퍼티는 인터페이스 선언 시 물음표를 키값에 붙인다.
해당 프로퍼티는 객체에 존재해도 되고 안 해도 된다.
interface Sopt {
season: number;
group: string[];
part: string[];
president: string;
introduce(number): string[];
}
const currentSopt: Sopt = {
season: 30,
group: ['YB', 'OB'],
part: ['King the Server', 'Plan', 'Design', 'Android', 'Web', 'iOS'],
president: 'Kim',
introduce: function (this.season) { // 매개변수는 예시를 위해 넣었고, 쓰이지 않음.
return this.part.map(name => {
console.log(`솝트 내 파트는 ${name} 등이 있어요!`);
return `솝트 내 파트는 ${name} 등이 있어요!`
});
}
};위와 같이 인터페이스에 '함수'도 프로퍼티로 넣을 수 있다.
매개변수와 결과값의 타입을 지정해야 한다.
매개변수가 없다면 공백을, 결과값이 없다면 void를 넣어준다.
interface Member {
name: string;
group: string;
}
interface Dinner {
member: Member[];
shuffle: {
(array: Array<Member>): Array<Member>;
};
organize: {
(array: Array<Member>): void;
};
}위의 코드처럼, 인터페이스 안에 인터페이스를 사용할 수도 있다.
shuffle이라는 함수의 매개변수 array의 타입을 Array<Member>로 지정하고
그 결과값도 Array<Member>로 지정한 코드이다.
* 본 포스팅은 SOPT 30th 서버 파트 1주차 세미나를 듣고 복습을 위해 작성한 글입니다.
서팟장 잡채님 만세.