TS for JS Programmers
현대 프로그래밍 언어에서 TypeScript와 JavaScript의 관계는 다소 독특하다.
TypeScript은 JavaScript 위에 레이어로서 자리잡고 있는데, JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가한다.
이 레이어가 TypeScript 타입 시스템이다.
JavaScript는 이미 string , number , object , undefined 같은 원시 타입을 가지고 있지만, 전체 코드베이스에 일관되게 할당되었는지는 미리 확인해 주지 않는다. TypeScript는 이 레이어로서 동작한다.
이는 이미 존재하고 잘 동작하는 JavaScript 코드는 동시에 TypeScript 코드라는 의미지만, TypeScript의 타입 검사기는 사용자가 생각한 일과 JavaScript가 실제로 하는 일 사이의 불일치를 강조할 수 있다.
타입 추론
TypeScript는 JavaScript 언어를 알고 있으며 대부분의 경우 타입을 생성해줄 것이다.
예를 들어 변수를 생성하면서 동시에 특정 값에 할당하는 경우, TypeScript는 그 값을 해당 변수의 타입으로 사용할 것이다.
let helloWorld = "Hello World";타입 정의하기
JavaScript는 다양한 디자인 패턴을 가능하게 하는 동적 언어이다.
때문에 몇몇 디자인 패턴은 자동으로 타입을 제공하기 힘들 수 있는데, 이러한 경우에 TypeScript는 TypeScript에게 타입이 무엇이 되어야 하는지 명시 가능한JavaScript 언어의 확장을 지원한다.
다음은 name: string 과 id: number 을 포함하는 추론 타입을 가진 객체를 생성하는 예제이다.
const user = {
name: "Hayes", // string
id: 0, // number
};이 객체의 형태를 명시적으로 나타내기 위해서는 interface 로 선언한다.
(변수 선언 뒤에 : TypeName 의 구문을 사용)
interface User {
name: string;
id: number;
};
const user = {
name: "Hayes", // string
id: 0, // number
};해당 인터페이스에 맞지 않는 객체를 생성하면 TypeScript는 경고를 준다.
// @errors: 2322
interface User {
name: string;
id: number;
};
const user = {
username: "Hayes", // name이 아니라 username으로 되어있음
id: 0,
};인터페이스는 함수에서 매개변수와 리턴 값을 명시하는데 사용되기도 한다.
// @noErrors
interface User {
name: string;
id: number;
}
function getAdminUser(): User {
//...
}
function deleteUser(user: User) {
// ...
}- JavaScript에서 사용할 수 있는 적은 종류의 원시 타입이 이미 있다.
boolean, bigint , null , number , string , symbol , object 와 undefined 는 인터페이스에서 사용할 수 있다.
- TypeScript는 몇 가지를 추가해 목록을 확장한다.
any (무엇이든 허용합니다)
unknown (이 타입을 사용하는 사람이 타입이 무엇인지 선언했는가를 확인하십시오)
never (이 타입은 발생될 수 없습니다)
void ( undefined 를 리턴하거나 리턴 값이 없는 함수)
