TypeScript는 JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가한다.
JavScript는 string, number, object, undefined 같은 타입을 가지고 있지만, 할당되었는지 미리 확인해 주지 않는다.
타입 정의하기(Defining Types)
객체의 형태를 명시적으로 나타내기 위해서는 interface로 선언한다.
const user = {
name: "Hayes",
id: 0,
};
interface User {
name: string;
id: number;
}
const user:User = {
name: "Hayes",
id: 0,
}
해당 interface에 맞지 않는 객체를 생성하면 TypeScript는 경고를 준다.
TypeScript는 JavaScript와 마찬가지로 객체 지향 프로그래밍을 지원한다.
interface User{
name:string;
id:number;
}
class UserAccount {
name:string;
id:number;
constructor(name:string,id:number){
this.name=name;
this.id=id;
}
}
const user:User = new UserAccount("Murphy",1);
인터페이스는 함수에서 매개변수와 리턴 값을 명시하는데 사용되기도 한다.
interface User {
name: string;
id: number;
}
function getAdminUser(): User {
//...
}
function deleteUser(user: User) {
// ...
}
JavaScript에서 사용했던 boolean, bigint, null, number, string, symbol, object, undefined는 당연히 사용할 수 있고, 여기에 더하여
any (무엇이든 허용)
unknown (타입이 무엇인지 확인)
never (이 타입은 발생될 수 없다)
void (undefined를 리턴하거나 리턴 값이 없음)
interface를 우선적으로 사용하고, 특정 기능이 필요할 때 type을 사용해야 한다.
타입 구성 (Composing Types)
여러가지 타입을 이용하여 새 타입을 작성하기 위해 Union과 Generic을 사용한다.
유니언(Unions)
타입이 여러 타입 중 하나일 수 있음을 선언하는 방법이다.
예를 들어 boolean 타입을 true 또는 false로 설명할 수 있다.
type MyBool = true | false;
유니언 타입이 가장 많이 사용된 사례 중 하나는 값이 string 또는 number의 리터럴 집합을 설명하는 것이다
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
function getLength(obj: string | string[]) {
return obj.length;
}
// 이건 array 또는 string을 받는 함수라는 뜻이다.
제네릭(Generics)
제네릭은 이전 글에서 공부했었는데, 타입에 변수를 제공하는 방법이다.
제네릭이 없는 배열은 어떤 것이든 포함할 수 있다.
제네릭이 있는 배열은 배열 안의 값을 설명할 수 있다.
type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;
구조적 타입 시스템 (Structural Type System)
타입 검사가 값이 있는 형태에 집중한다.
구조적 타입 시스템에서 두 객체가 같은 형태를 가지면 같은 것으로 간주된다.
interface Point {
x: number;
y: number;
}
function printPoint(p: Point) {
console.log(`${p.x}, ${p.y}`);
}
// "12, 26"를 출력합니다
const point = { x: 12, y: 26 };
printPoint(point);
여기서 point 변수는 Point 타입으로 선언된 적이 없지만, TypeScript는 타입 검사에서 point의 형태와 Point의 형태를 비교하여 같은 형태이기 때문에, 통과한다.
TypeScript 설치
2가지 방법으로 설치할 수 있다.
- npm을 이용 (Node.js 패키지 매니저)
- TypeScript의 Visual Studio 플러그인 설치
npm install -g typescript
코드 컴파일
tsc temp.ts
'프론트엔드 > TypeScript' 카테고리의 다른 글
| Generic (0) | 2022.07.12 |
|---|
