📌 TypeScript
: 자바스크립트에서 확장된 언어
기본 특징
-
TypeScript is a superset to JavaScript.
-
statically typing (정적 타입 기능)
자바스크립트: 동적 타입 언어 -
브라우저에서 실행할 수 없다.
-> 자바스크립트 형태로 컴파일해야 한다.
-> 이 과정에서 타입 표기가 삭제된다. but 코드 작성 과정에서 알 수 없던 오류를 알려준다.
-> 오류가 있어도 컴파일한 자바스크립트 파일을 반환한다.
변수 선언 키워드가var로 변환되므로 추가 설정이 필요하다.
설치
$ npm install typescript //해당 프로젝트에 타입스크립트 설치
$ npx tsc [컴파일 대상] //컴파일 명령어1️⃣ Type
기본 타입은 any로 간주된다.
변수에 저장할 타입을 지정하지 않는 것이다.
따라서 type을 지정하지 않아도 동작한다.
-> 하지만 타입스크립트를 사용하는 주된 목적에서 벗어나게 된다.
Primitives
number,string,boolean,null,undefined,symbol- start with lower case
upper case -> 자바스크립트 객체를 가리킨다.let age: number; //variable: 저장할 type age = 12 //ok age = '12' //error!let isOpen: boolean; isOpen = true;let hobbies: null; hobbies = "sining" //error! //null 타입으로 선언했기 때문에 그 외 다른 자료형을 할당하려고 하면 에러가 발생한다.
More complex types
string[]: 문자열 배열 타입
number[]: 숫자 배열 타입
...let hobbies: string[]; hobbies = ['Sports', 'Cooking'] //ok hobbies = ['Sports, '1'] //error!
- 객체 타입은
{}중괄호로 정의한다.let person: { name: string; age: number; };
- 객체를 요소로 갖는 배열 타입은? =>
{}[]let person: { name: string; age: number; }[];
2️⃣ Type inference 타입 추론
let name = "young";
name = 123; //error!위와 같이 문자열 타입 변수에 숫자를 재할당 할 수 없다.
타입스크립트는 타입 추론을 통해 할당된 값의 타입을 파악하고 이를 변수의 타입으로 사용한다.
이후 다른 타입으로 재할당 하면 에러가 발생하게 된다.
타입 추론 기능이 있기 때문에 일반적으로 하나의 변수가 하나의 타입만을 사용하려면
사용자가 명시적으로 타입 정의를 하지 않아도 된다.
3️⃣ Union Type
하나의 변수가 하나 이상의 타입을 가지게 한다.
이를 통해 값과 타입을 보다 유연하게 정의할 수 있다.
유니온 타입을 사용할 경우 타입 정의를 반드시 작성해야 한다.
let course = string | number = "fisrt section";
course = 2; //ok
let something = string | string[];4️⃣ Type Aliases 타입 별칭
동일한 타입의 정의가 반복될 경우, 이를 저장하여 사용할 수 있다.
불필요한 코드의 중복을 방지하고, 유지 보수가 편리해진다.
코드를 보다 간결하게 작성할 수 있게 한다.
type Person = {
name: string;
age: number;
}[];
let person: Person;
let people: Person[]; //형태 변경도 가능5️⃣ Functions & Types
function add(a: number, b: number) {
return a + b;
}위의 경우 return 값의 타입을 통해 함수 타입을 추론할 수 있게 된다.
결과값이 항상 number이기 때문에 함수의 반환 타입이 number로 추론된다.
이를 명시적으로 표기하면 아래와 같다.
function add(a: number, b: number): number {
return a + b;
}반드시 작성해야하는 경우가 아니라면, 작성하지 않는다.
function printConsole(value: any) {
console.log(value);
}위와 같이 함수의 return 값이 없을 경우, void 타입을 갖는다.
null, undefined와 비슷하지만 함수에 return 값이 없다는 것을 뜻한다.
void는 함수만이 갖는 특수한 타입이다.
함수 타입을 사용할 때에는 매개변수의 타입 뿐만 아니라, 반환 값의 타입 또한 생각해야 한다.
to be continued...
