목록Typescript (56)
개발새발
자 스크립트에서 특정 값을 변수에 저장해서 변수의 이름 대신 사용할 수 있는 것처럼 타입 스크립트에서도 특정 타입을 특정 이름에 저장할 수 있다. type A = string;const str: A = 'hello'; 타입 별칭string 타입을 A라는 이름으로 저장하면, 이제 타입으로 A를 사용할 수 있고, string과 동일한 타입이 된다.. 이렇게 기존 타입에 새로 이름을 붙인 것을 타입 별칭(type alias)이라고 한다. 타입 별칭은 type 키워드를 사용해 선언할 수 있고, 대문자로 시작하는 단어로 만드는 것이 관습이다. // 함수 타입을 직접 지정const func: (value: number, unit: string) => string = (value, unit) => value + u..
타입스크립트의 특수 타입 총정리 (any, unknown, void, {}, never)타입스크립트는 자바스크립트보다 정확한 타입 검사를 지원하기 위해 몇 가지 특수 타입을 제공한다. any, unknown, void, {}, never 타입이 그것이다. any 타입타입 검사를 포기하는 타입. any 타입을 사용하면 모든 값이 허용 되지만 타입 스크립트의 타입 검사 장점을 무력화하기 때문에 지양해야 한다. let value: any = "hello";value = 123; // ✅ 가능 (문자열 → 숫자로 변경)value = true; // ✅ 가능 (숫자 → 불리언 변경)console.log(value.toFixed()); // 🚨 `boolean`인데도 `.toFixed()`가 실행됨 → 오류 ..
타입스크립트에는 타입을 위한 새로운 연산자{operator)가 있다. 유니언 타입과 유니언 타입은 자바스크립트의 비트 연산자와는 다른 역할을 수행 한다. 유니언 타입유니언 타입은 하나의 변수가 여러 타입을 가질 수 있 는 가능성을 표시 한다. 유니언 타입은 하나의 변수가 여러 개의 타입을 가질 수 있도록 정의하는 방법이며, 유니언 타입을 사용할 때는 파이프(|) 연산자를 사용한다. let strOrNum: string | number = "hello"; strOrNum = 123; strOrNum 변수는 문자열(string) 또는 숫자(number) 를 가질 수 있기 때문에 "hello"도 가능하고, 123도 가능하다. 배열에서 유니언 타입 const arr1: (string | number..
값(Value)과 타입(Type)의 차이, 그리고 typeof 활용타입스크립트를 배우다 보면 값과 타입의 개념이 헷갈릴 수 있다. 값은 일반적으로 자바스크립트에서 사용하는 값을 가리키고, 타입은 타입을 위한 구문에서 사용하는 타입을 가리킨다. 타입을 값으로 사용할 수는 없다! 그러므로 우리는 타입으로 사용할 수 있는 값과 타입으로 사용할 수 없는 값만 구분하면 된다 구분설명값(Value)실제 프로그램에서 사용하는 데이터 (3, 'hello', {} 등)타입(Type)변수, 함수, 객체 등이 가질 수 있는 값의 형식을 정의하는 것 const num: number = 123; // ✅ 'number'는 타입const str: string = "hello"; // ✅ 'string'은 타입const obj..
배열은 타입 [] 또는 Array〈타입〉으로 표기 한다. 여기에서 표기법을 제네릭이다. const arr3 = [1, 3, 5]; // const arr3: number[] const arr4 = [1, ‘ 31, 5] ; // const arr3: (string | number)[ ] const arr5 = []; // const arr3: any[] 그러나 이런 방식에는 문제가 있는데, 아래와 같은 오류가 발생할 수 있다. const array = [123, 4, 56]; array[3].toFixed(0); // ❌ 런타임 오류 발생! array는 [123, 4, 56]으로 선언되었고, 타입스크립트는 이를 number[](숫자 배열)로 자동 추론한다.그런데, array[3]은 존재하지 않는..
변수를 let로 선언하면 자유롭게 대입할 수 있는 JS에 비해서 TS는 표기한 타입과 일치하는 값만 대입할 수 있기 때문에 JS에 비해 자유도를 제한 받는다. 사실 let의 경우 원시 자료형에 대한 리터럴 타입을 표기하는 경우는 거의 없다. 애초에 그 목적으로 const 변수가 있기 때문이다. const str = 'hello'; 다만 리터럴 타입이 아닌 자료형 타입은 let과 함께 자주 사용된다. const obj: { name: 'zero' } = { name: 'zero' };const arr: [1Z 3, 'five'] = [1, 3, 'five'];const func: (amount: number, 니nit: string) => string = (amount, unit) => amount..
타입 추론이란?function plus(x: number, y: number): number { return x + y;}const result1: number = plus(1, 2); const result2: number = plus(1, 2); 이 코드에서 result1은 number로 타입을 부여했지만 result2는 타입을 부여하지 않았다. 그렇지만 TS는 타입 추론을 해주므로 명시적으로 타입을 부여해주지 않아도 된다. 다만 매개변수에는 반드시 타입을 부여해야 한다. 매개변수 x와 y는 암묵적으로 any 타입을 가지고 있기 때문이다. const str1: 'hello' = 'hello'; 그럼 이 타입 부여는 무슨 뜻일까? 이 코드에서 str1의 타입은 일반적인 string이 아니라,..
타입스크립트는 타입을 위한 구문이 있는 자바스크립트이다. // JSconst hello = 'world'; function add(xz y) { return x + y;} const person = { name: 'zero'z age: 28z } // TSconst hello: string = 'world';function add(x: number, y: number): number { return x + y;} interface Person { name: string, age: number, } const person: Person = { name: 'zero', age: 28, }; 타입은 데이터의 형태를 의미한다. 여기서 데이터의 형태란 자바스크립트에서 배운 문자열, 숫자, 객체 등 의 자료형이다...