TypeScript (1)
타입스크립트 ?
자바스크립트는 타입 시스템이 없는 동적 프로그래밍 언어로, 약한 타입 언어라고 표현할 수 있으며 비교적 유연하게 개발할 수 있는 환경을 제공하는 한편 런타임 환경에서 쉽게 에러가 발생할 수 있는 단점을 가집니다. 타입스크립트는 이러한 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있습니다.
타입스크립트의 기능
- 크로스 플랫폼 지원: 자바스크립트가 실행되는 모든 플랫폼에서 사용할 수 있습니다.
- 객체 지향 언어: 클래스, 인터페이스, 모듈 등의 강력한 기능을 제공하며, 순수한 객체 지향 코드를 작성할 수 있습니다.
- 정적 타입: 정적 타입을 사용하기 때문에 코드를 입력하는 동안에 오류를 체크할 수 있습니다.(단 에디터 혹은 플러그인의 도움의 필요)
- DOM 제어: 자바스크립트와 같이 DOM을 제어해 요소를 추가하거나 삭제할 수 있습니다.
- 최신 ECMAScript 기능 지원: ES6 이상의 최신 자바스크립트 문법을 손쉽게 지원할 수 있습니다.
TS 연습하기 - Playground
타입스크립트 공식 페이지에서 제공하는 REPL로, 작성한 내용이 컴파일러 옵션에 따라 어떻게 자바스크립트로 변환되는지 바로 확인할 수 있다.
타입 기본(Types) annotation
일반 변수, 매개 변수(Parameter), 객체 속성(Property) 등에 : TYPE과 같은 형태로 타입을 지정하기
예시
function add(a: number, b: number) {
return a + b;
}
const sum: number = add(1, 2);
console.log(sum); // 3a와 b는 number타입이어야한다고 매개변수에 지정, 만약 인수로 문자열이 들어온다면 에러가 발생한다.
타입 선언
Boolean
let isBoolean: boolean;
let isDone: boolean = false;Number
let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d; // 61453
let binary: number = 0b1010; // 10
let octal: number = 0o744; // 484
let infinity: number = Infinity;
let nan: number = NaN;String
let str: string;
let red: string = 'Red';
let green: string = "Green";
let myColor: string = `My color is ${red}.`;
let yourColor: string = 'Your color is' + green;Array
문법은 근본적으로 어떤 값이 있든지 타입주석 []가 접두어 처럼 붙는다. (예: :boolean[])
배열은 다음과 같이 두 가지 방법으로 타입을 선언할 수 있다.
// 문자열만 가지는 배열
let fruits: string[] = ['Apple', 'Banana', 'Mango'];
// Or
let fruits: Array<string> = ['Apple', 'Banana', 'Mango'];
// 숫자만 가지는 배열
let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];
// Or
let oneToSeven: Array<number> = [1, 2, 3, 4, 5, 6, 7];유니언 타입(다중 타입)의 ‘문자열과 숫자를 동시에 가지는 배열’도 선언 방법
let array: (string | number)[] = ['Apple', 1, 2, 'Banana', 'Mango', 3];
// Or
let array: Array<string | number> = ['Apple', 1, 2, 'Banana', 'Mango', 3];배열이 가지는 항목의 값을 단언할 수 없다면 any를 사용할 수 있다.
let someArr: any[] = [0, 1, {}, [], 'str', false];인터페이스(Interface)나 커스텀 타입(Type)을 사용할 수도 있다.
인터페이스는 다수의 타입 어노테이션 안에는 하나의 이름을 가진 어노테이션으로 구성되어 있다.
interface IUser {
name: string,
age: number,
isValid: boolean
}
let userArr: IUser[] = [
{
name: 'Neo',
age: 85,
isValid: true
},
{
name: 'Lewis',
age: 52,
isValid: false
},
{
name: 'Evan',
age: 36,
isValid: true
}
];읽기 전용 배열은 readonly 키워드나 ReadonlyArray 타입을 사용하면 된다.
읽기 전용이라면 수정이 불가능하다.
let arrA: readonly number[] = [1, 2, 3, 4];
let arrB: ReadonlyArray<number> = [0, 9, 8, 7];
arrA[0] = 123; // Error - TS2542: Index signature in type 'readonly number[]' only permits reading.
arrA.push(123); // Error - TS2339: Property 'push' does not exist on type 'readonly number[]'.
arrB[0] = 123; // Error - TS2542: Index signature in type 'readonly number[]' only permits reading.
arrB.push(123); // Error - TS2339: Property 'push' does not exist on type 'readonly number[]'.
Tuple
Tuple 타입은 배열과 매우 유사하다.
튜플은 정해진 타입의 고정된 길이(length) 배열을 표현한다.
let tuple: [string, number];
tuple = ['a', 1];
tuple = ['a', 1, 2]; // Error - TS2322
tuple = [1, 'a']; // Error - TS2322열거형(Enum)
Enum은 숫자 혹은 문자열 값 집합에 이름(Member)을 부여할 수 있는 타입으로, 값의 종류가 일정한 범위로 정해져 있는 경우 유용하다. 기본적으로 0부터 시작하며 값은 1씩 증가
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;
// 이넘은 인덱스 번호로도 접근할 수 있습니다.
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];
//만약 원한다면 이넘의 인덱스를 사용자 편의로 변경하여 사용할 수도 있습니다.
enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thorany
Any는 모든 타입을 의미한다.
기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입이다.
anything!!!!
let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];Void
변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입
let unuseful: void = undefined;
function notuse(): void {
console.log('sth');
}Never
함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입
// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
while (true) {
}
}참고 자료
https://heropy.blog/2020/01/27/typescript/
https://joshua1988.github.io/ts/guide/basic-types.html#void
https://radlohead.gitbook.io/typescript-deep-dive/type-system
