본문 바로가기

TypeScript

 (24)
유니온 타입 유니온 타입을 이용해 “여러 경우 중 하나”인 타입을 표현할 수 있다. 어떤 타입이 가질 수 있는 경우의 수를 나열할 때 사용하는 유니온 타입으로 함수의 반환 타입을 표현할 수 있다. 문법 유니온 타입은 가능한 모든 타입을 파이프(|) 기호로 이어서 표현한다. “ A 또는 B 타입일 수 있는 타입”을 A | B 로 쓰는 식이다. square 함수의 타입은 아래와 같이 적을 수 있다. function square(value: number, returnString: boolean = false): string | number { /* 본문 동일 */ } const stringOrNumber: string | number = square(randomNumber, randomBoolean); 타입 별칭 문법을 ..
제네릭 여러 타입에 대해 동작하는 함수를 정의하되, 해당 함수를 정의할 때는 알 수 없고 사용할 때에만 알 수 있는 타입 정보를 사용하고 싶다. 제네릭은 바로 그러한 기능을 제공한다. 타입 변수 함수를 호출하는 시점이 되어야만 알 수 있는 값을 함수 내부에서 사용하기 위해서는 그 값을 담아둘 매개변수가 필요하다. 마찬가지로, 요소를 사용하는 시점에서만 알 수 있는 타입을 담아두기 위해서는 타입 변수(type variable)가 필요하다. 타입 변수와 타입의 관계는 매개변수와 인자 값의 관계와 비슷하다. 컨벤션 상 타입스크립트의 타입 변수는 대문자로 시작하며 PascalCase 명명법을 사용한다. 제너릭 함수 function getFirstElem(arr: T[]): T { /* 함수 본문 */ } const l..
함수 함수의 타입을 결정하기 위해서는 다음 두 가지 정보가 필요하다. 매개변수(parameter)의 타입 반환값(return value)의 타입 (반환 타입) function sum(a: number, b: number): number { return (a + b); } function logGreetings(name: string): void { console.log(`Hello, ${name}!`); }함수 값의 타입 표기 const yetAnotherSum: (a: number, b: number) => number = sum; const onePlusOne: () => number = () => 2; const arrowSum: (a: number, b: number) => number = (a, b)..
타입 별칭 타입 별칭(type alias)을 이용해 이미 존재하는 타입에 다른 이름을 붙여 복잡한 타입을 간단하게 쓸 수 있다. 또한, 프로그래머의 의도를 보다 명확하게 나타낼 수 있다. 타입 별칭 정의 **type NewType = Type;** 별칭을 갖게 될 타입(위에서는 `Type`)의 자리엔 기본 타입을 포함한 모든 타입이 올 수 있다. type UUID = string; type Height = number; type AnotherUUID = UUID; type Animals = Animal[]; type User = { name: string; height: number; };
객체 객체 타입 const user: { name: string; height: number; } = { name: '김지혜', height: 170}; - 콜론(`:`)의 우변에는 값 대신 해당 속성의 타입이 들어간다. - 구분자로 콤마(`,`) 뿐만 아니라 세미콜론(`;`)을 사용할 수 있다. 선택 속성 함수의 선택 매개변수와 비슷하게 속성명 뒤에 물음표(`?`)를 붙여 해당 속성이 존재하지 않을 수도 있음을 표현할 수 있다. const userWithUnknownHeight: { name: string; height?: number; } = { name: '김수한무' };읽기 전용 속성 속성명 앞에 readonly 키워드를 붙여 해당 속성의 재할당을 막을 수 있다. reado..
배열과 튜플 배열 배열 타입은 자바스크립트 Array 값의 타입을 나타내는데 쓰인다. 원소 타입 뒤에 대괄호([])를 붙여 표현한다. const pibonacci: number[] = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]; const myFavoriteBeers: string[] = ['Imperial Stout', 'India Pale Ale', 'Weizenbock'];튜플 튜플 타입을 이용해 원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의할 수 있다. const nameAndHeight: [string, number] = ['김지혜', 170]튜플 타입 변수는 정확히 명시된 개수 만큼의 원소만을 가질 수 있다..
기본 타입 불리언 자바스크립트의 boolean에 대응하는, 참 또는 거짓을 나타내는 타입이다. const isTypeScriptAwesome: boolean = true; const doesJavaScriptHasTypes: boolean = false; 숫자 숫자를 나타내는 타입이다. 자바스크립트에서는 정수, 부동 소수점 등의 구분이 따로 없고 모든 수가 IEEE754 표준을 따르는 부동소수점이고, 타입스크립트의 number 타입도 마찬가지다. const yourScore: number = 100; const ieee754IsAwesome: number = 0.1 + 0.2; // 0.30000000000000004 문자열 문자열을 나타내는 타입이다. ES6 템플릿 리터럴 역시 string 타입의 값이다. con..
기초 문법 타입 표기 (Type Annotation) 타입스크립트 코드에서 어떤 변수 또는 값의 타입을 표기하기 위해 타입 표기를 사용한다. 타입 표기는 식별자 또는 값 뒤에 콜론( : )을 붙여 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 };

티스토리툴바