typescript 1

typescript

정적 타입 시스템(static type system)을 도입한 자바스크립트

 

정적 타입 언어(statically typed language)에서는 프로그램의 예상 동작을 타입을 통해 나타내고,

그 예상에 맞게 동작할 지의 여부를 타입 검사기(type checker)를 통해 실행 전에 확인할 수 있다. 

 

다음과 같이 타입스크립트는 컴파일러에 의해 자바스크립트 코드로 컴파일된다.

 

타입스크립트

type Language = 'TypeScript' | 'JavaScript' | 'Python' | 'Rust' | 'Haskell';
interface Person {
  favoriteLanguages: Array<Language>;
}
function preferTypeScript(person: Person): boolean {
  return person.favoriteLanguages.includes('TypeScript');
}

자바스크립트

function preferTypeScript(person) {
    return person.favoriteLanguages.includes('TypeScript');
}

타입을 분석하는 방식을 기준으로 프로그래밍 언어를 크게 둘로 나눌 수 있다. 

프로그램이 실제로 실행 될 때에 타입 분석을 진행하는 동적 타입 언어(dynamically typed language)와 

프로그램을 실행해보지 않고도 런타임 이전에 진행하는 정적 타입 언어(statically typed language)다.

정적 타입의 장점

① 프로그램이 실제로 실행되기 전에 상당수의 오류를 잡아낼 수 있다.

② 소스 코드에 대한 정적 타입 분석이 가능하다면 컴파일러 및 코드 에디터가 코드를 실행하지 않고도 프로그램에 대해

    훨씬 더 많은 정보를 알 수 있다. 그리고 이 정보는 코드 작성 과정에서 유용하게 사용 가능하다.
    대표적인 예시가 바로 에디터의 자동 완성 기능이다. 만약 타입 시스템이 어떤 변수의 타입 정보를 정확히 안다면, 

    해당 변수의 멤버로 존재할 수 있는 변수만을 자동 완성 후보로 추천할 수 있다.

③ 타입은 프로그래머의 의도를 기술하는 주석과 같은 역할을 한다.

    주석이나 변수명과는 다르게, 타입 정의와 다르게 동작하는 프로그램은 실행 자체가 불가능하다.

④ 자바스크립트의 상위집합이다.

    모든 자바스크립트 코드는 타입스크립트 코드다. 때문에 타입스크립트 컴파일러는 확장자만 바꾸면, 

    심지어는 (특정 옵션을 켠다면) 확장자를 바꾸지 않고도, 자바스크립트 코드를 이해한다. 

    뿐만 아니라 타입스크립트는 최신 ECMAScript 표준 및 여러 유용한 프러포절들을 지원한다.

 

타입스크립트 구성요소

① 언어 명세(specification)

    .ts(또는 .tsx) 확장자를 갖는 타입스크립트 코드가 어떤 의미를 갖는지에 대한 약속이다.

② 컴파일러(tsc)

    타입스크립트 컴파일러는 타입스크립트 코드를 명세에 맞게 해석한 후 대응되는 자바스크립트 코드를 출력한다.

    코드를 읽고 구문을 해석하는 파서(parser), 타입 정보에 모순이 없는지 검사하는 타입 검사기(type checker),

    브라우저가 실행 가능한 자바스크립트 파일을 뱉어내는 에미터(emitter)등이 포함되어 있다.

 

---

타입스크립트 문법

타입 표기를 사용한다. 타입 표기는 식별자 또는 값 뒤에 콜론(:)을 붙여 value: type 의 형태로 표기한다.

const areYouCool: boolean = true;
const answer: number = 42;
const typescript: string = "great";
const greetings: string = `
Hello, Readers!
Welcome to TypeScript.
`;
const hasType: Object = {
  TypeScript: true,
  JavaScript: false
};

타입의 종류

① boolean

    자바스크립트의 boolean에 대응하는, 참 또는 거짓을 나타내는 타입이다.

let isDone: boolean = false;

② number

    JavaScript와 마찬가지로 TypeScript의 모든 숫자는 부동 소수점 값이다.

    TypeScript는 16 진수 및 10 진수 리터럴 외에도 ECMAScript 2015에 도입 된 2 진수 및 8 진수를 지원한다.

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

③ string

    JavaScript와 마찬가지로 TypeScript는 문자열 데이터를 둘러싸기 위해 큰 따옴표(") 나 작은 따옴표 (')를 사용한다.

    여러 줄에 걸쳐 있고 표현식이 포함될 수있는 템플릿 문자열을 사용할 수도 있다. 

    이 문자열은 backtick / backquote (`) 문자 로 둘러싸여 있으며 포함 된 표현식은 ${ expr }이다.

let color: string = "blue";
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.

I'll be ${ age + 1 } years old next month.`;

let sentence: string = "Hello, my name is " + fullName + ".\n\n" +
    "I'll be " + (age + 1) + " years old next month.";

④ null / undefined

    null 타입과 undefined 타입은 각각 null과 undefined라는 하나의 값만을 갖는다.

    이 두 값을 자기 자신의 타입, void 타입 이외의 타입에 할당하려 하면 타입 에러가 발생한다.

const nullValue: null = null;
const undefinedValue: undefined = undefined;
const numberValue: number = null; // TS2322: Type 'null' is not assignable to type 'number'

⑤ any

    any 타입은 모든 타입과 호환 가능하다.

    모든 값의 타입을 any 로 지정할 수 있고, any 타입의 변수에는 모든 값을 할당할 수 있다.

let bool: any = true; 
bool = 3; 
bool = 'whatever'; 
bool = {}; 

또한 any 타입 값의 메소드를 호출할 시에도 타입 검사가 아예 수행되지 않는다. 

이 때 해당 실제로 존재하지 않는다면 타입 검사는 통과하되 런타임 에러가 발생할 것이다.

bool.nonExistingMethod(); 
bool.whatever(false); 

any 타입은 타입스크립트 타입 시스템의 비상 탈출구(escape hatch)이다. 

any는 타입 정의를 제공하지 않는 라이브러리, 일단 무시하고 넘어가고 이후에 정확히 적고 싶은 부분 또는

코드 작성 시점에 형태를 알 수 없는 값 등의 타입 표기에 유용하다. 

하지만 any를 남용하면 타입 안정성에 구멍이 뚫린 코드가 되어 타입스크립트를 사용하는 의의가 사라지므로 

꼭 필요한 경우에만 사용해야 한다.

 

⑥ void

    void는 null과 undefined 만을 값으로 가질 수 있는 타입이다. 

    아무런 값도 반환하지 않는 함수의 반환 타입을 표시할 때 사용한다.

function nothing(): void { }

⑦ never

    never는 아무런 값도 가질 수 없는 타입이다. 

function alwaysThrow(): ??? { 
  throw new Error(`I'm a wicked function!`); 
} 

의미상으로 never 타입은 – 그 이름이 암시하듯 – 절대 존재할 수 없는 값을 암시한다. 

따라서 never 타입의 변수에는 null, undefined를 포함해 어떤 값도 할당할 수 없다. 

위의 alwaysThrow 함수는 항상 에러를 throw 하므로 어떤 값도 반환하지 않는다. 

이 때, 이런 함수의 반환 타입을 never 타입을 사용해 나타낼 수 있다.

function alwaysThrow(): never { 
  throw new Error(`I'm a wicked function!`); 
}

⑧ array

    배열 타입은 자바스크립트 Array 값의 타입을 나타내는데 쓰인다. 원소 타입 뒤에 대괄호[ ]를 붙여 표현한다.

    배열은 두 가지 방법 중 하나로 작성 될 수 있다. 

 

첫 번째로 요소 유형을 사용하여 해당 요소 유형의 배열을 나타낸다.

let list :  number [] = [ 1 , 2 , 3 ];
let list2 : string [] = ['1', '2', '3'];

두 번째 방법은 일반 배열 유형을 사용한다. Array<elemType>

let list :  Array < number > = [ 1 , 2 , 3 ];
let list2 : Array < string > = ['1','2','3'];

⑨ tuple

    튜플 타입을 이용해 원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의할 수 있다.

    튜플 타입 변수는 정확히 명시된 개수 만큼의 원소만을 가질 수 있다. 

    만약 타입 정의보다 더 많은, 혹은 더 적은 원소를 갖는 배열을 할당한다면 에러를 낸다.

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

let a: [string, number] = ['1', 2, 3];
// error TS2322: Type '[string, number, boolean]' is not assignable to type '[string, number]'.
//   Types of property 'length' are incompatible.
//     Type '3' is not assignable to type '2'.

튜플 타입의 값을 Array 프로토타입의 메소드를 통해 조작하는 것은 금지되지 않는다.

예를 들어 아래와 같은 코드는 에러를 내지 않는다.

const x: [string, number] = ['hello', 10]; 
x.push(42); // no error

 

---

참고사이트

https://ahnheejong.gitbook.io/ts-for-jsdev/01-introducing-typescript/intro

https://github.com/Microsoft/TypeScript-Handbook/tree/master/pages