반응형 프로그래밍 개발/Typescript11 Typescript 타입 가드 타입 가드 타입가드는 자동으로 타입 범위를 좁혀주는 타입스크립트의 기능이다. 생산성과 가독성이 높아지는 효과를 볼 수 있고 as와 같은 극단적인 기능을 쓰지 않아도 된다. 기본 코드 function print(value: number | string){ if(typeof value === 'number') { console.log((value as number).toFixed(2)); } else { console.log((value as string).trim(2)); } } 위의 코드에서 as는 타입을 강제로 주입하는 기능으로 어쩔 수 없을때만 사용해야한다. 만약 if 조건문에 number 말고도 string 또한 허용된다면 버그가 생길 위험이 있기 때문이다. 원래 if문을 통해 value의 타입을 .. 2021. 5. 11. Typescript 타입 추론 타입 추론 타입을 일일이 정하면서 하면 생산성이 떨어질 수 있다. 그래서 자바스크립트처럼 평범하게 코드를 작성해도 타입이 자동으로 추론하여 정해지는 기능이 있다. let v1 = 123; let v2 = 'abc'; v1 = 'a'; //오류. 숫자 타입이 들어와야함 v2 = 456; // 오류. 문자열 타입이 들어와야함 위의 코드처럼 자바스크립트처럼 평범하게 작성하여도 타입스크립트에서는 v1과 v2에 들어간 값에 대해 타입을 자동으로 추론하여 타입을 지정할 수 있다. const v1 = 123; const v2 = 'abc' let v3: typeof v1 = 234; //v3 타입 오류. 대신 let과 달리 값의 변화에 엄격한 const는 타입이 123 및 'abc' 그 자체가 되며 typeof로 v.. 2021. 5. 11. Typescript 조건부 타입 조건부 타입 기본 문법 type IsStringType = T extends string ? 'yes' : 'no'; type T1 = IsStringType type T2 = IsStringType T에들어온 타입이 string이면 yes, number 이면 no가 되는 조건부 문법을 사용하는 기능이다. 자바스크립트의 삼항 연산자 문법을 사용하여 값을 다루는 것처럼 보이지만 타입스크립트에서의 위의 코드는 값이 아닌 타입에 대한 것이라고 봐야한다. union과 조건부 타입 type IsStringType = T extends string ? 'yes' : 'no'; type T1 = IsStringType type T2 = IsStringType | IsStringType ; type Array2 = A.. 2021. 5. 10. Typescript 맵드 타입(mapped type) 맵드 타입(mapped type) 기본문법 type T1 = { [K in 'prop1' | 'prop2']: boolean }; 맵드 타입으로 만들어지는 것은 객체이기 때문에 중괄호로 감싸있다. 그리고 중괄호 안에 대괄호가 있는데 대괄호안에는 key 부분을 나타내는 것이며 in라는 키워드가 맵드 타입을 정의해준다. 즉 위의 코드르 보면 in 뒤에 붙어있는 union 문자열이 타입의 key로서 속성으로 boolean이라는 타입을 각각 정의받게 된다. 마치 함수를 사용하는 것처럼 이용 가능하다. 입력된 인터페이스의 모든 속성 바꾸기 interface Person { name: string; age: number; } type MakeBoolean = { [P in keyof T]?: boolean}; co.. 2021. 5. 10. Typescript 재네릭 재네릭 재네릭은 함수 이름 오른쪽에 을 이용해서 작성할 수 있으며 안에 이름은 원하는 이름을 정하면 된다. 안의 이름은 동적으로 타입이 정해질 것이며 매개변수 쪽 및 함수 안의 구현하는 쪽에서 사용할 수 있다. 함수를 호출할때 을 이용하여 안에 타입 정보를 입력해주면 동적으로 타입이 이때 정해지는 것이다. 타입스크립트는 더 편리성을 위하여 함수 호출시 을 입력하지 않아도 매개변수로 넣어준 값의 타입을 분석 후 재네릭 타입 설정이 자동으로 되는 이점도 있다. function makeArray(defaultValue: T, size: number): T[]{ //T로 함수 호출시 정해준 타입이 들어온다. const arr: T[] = []; for( let i = 0; i < size; i++){ arr.p.. 2021. 5. 7. Typescript 타입 호환성 타입 호환성 타입 호환성은 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것이다. 타입 호환성을 위해서는 컴파일 타입에 호환되지 않는 타입을 찾아내어야 한다. 예를 들어 어떤 변수가 다른 변수에 할당 가능하기 위해서는 해당 변수의 타입이 다른쪽 변수의 타입에 할당 가능해야하는데 할당 가능의 판단 조건은 값의 집합을 생각하면 쉽다. 즉 어느 변수 타입이 들어갈 수 있는 값이 작으면 들어갈 수 있는 값이 자신보다 많은 변수 타입에 할당될 수 있다. function func1(a: number, b: number | string){ const v1: number | string = a; const v2: number = b; // 오류 할당 x } function func2(a: 1 | 2){ const.. 2021. 5. 7. Typescript 인터페이스(Interface) 인터페이스(Interface) 기본 interface interface Person { name: string; age: number; } const p1: Person = { name: 'jin', age: 23}; const p2: Person = { name: 'seok', age: 'ten'} //age 오류 interface라는 기능을 이용하면 따로 타입 지정하는 코드를 분리할 수 있게 된다. interface Person { name: string; age?: number; } const p1: Person = { name: 'jin'}; interface 안에서도 선택 속성을 사용할 수 있다. age에 선택 속성을 적용시켰기 때문에 Person interface을 지정한 p1의 객체에 age.. 2021. 5. 6. Typescript 함수 타입 함수 타입 function getText(name: string, age: number): string { const nameText = name.substr(0, 10); const ageText = age >= 35 ? 'senior' : 'junior'; return `name:${nameText}, age: ${ageText}`; const v1: string = getText('mike', 23) // 통과 const v2: string = getText('mike', '23') //'23' age 타입 오류 const v3: number = getText('mike', 23) //v3 함수 반환 타입 오류 타입스크립트의 함수 타입은 위와 같은 코드가 기본이다. 매개변수에 타입을 각각 정할 수 .. 2021. 5. 5. Typescript enum 타입 enum 타입 enum 타입이란 자바스크립트에는 없고 타입스크립트에만 있는 것인데 각각 enum 타입으로 열거형을 사용하여 이름이 있는 상수들을 정의할 수 있게된다. enum Fruit { Apple, Banana = 5, Orange, } console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange) // 0 5 6 위의 코드를 보면 enum 타입을 이용하여 객체 형식의 열거형으로 타입들의 상수들을 정의할 수 있게되었다. 이때 초기화 되지 않은 열거형의 첫번째 값은 '0'으로 시작하며 만약 Apple = 1 이라고, 값을 지정해 주면, 다음부터는 자동증가하여 Fruit.Apple 은 1, Banana 은 2, Orange 는 3가 된다. "use strict"; Obje.. 2021. 5. 5. Typescript 기본 타입 정의하기 타입 정의하기 타입스크립트는 타입을 원하는대로 정의할 수 있다. const size: number = 123; const isBig: boolean = size >= 100; const msg: string = isBig ? '크다' : '작다'; const values: number[] = [1, 2, 3]; const values2: Array = [1, 2, 3]; const data: [string, number] = [msg, size]; 위와 같이 변수 옆에 ': 타입'을 해주면 타입스크립트에서는 타입을 인식하여 변수에 정해진 타입과 다른 것이 들어오면 곧바로 오류가 발생했다는 것을 알려준다. console.log('typeof 123 =>', typeof 123) console.log('ty.. 2021. 5. 5. Typescript 기본 및 실행하기 Typescript 이란? 타입스크립트는 동적 타입인 자바스크립트와 달리 동적 타입이며 타입 오류가 컴파일시 발생하도록 하여 코드의 생산성을 높여주는 장점을 가지고 있다. 하지만 그만큼 진입 장벽이 타입 오류를 발생하지 않아 곧바로 컴파일 할 수 있는 자바스크립트에 비해 높은 것이 단점이기도 하다. 타입스크립트 시작하기 위한 설치 1. 타입스크립트를 이용하기 위해서는 기본적으로 Node.js 프로그램이 깔려있어야 한다. 2. 작업하고 싶은 폴더를 만들고 그 폴터 디렉토리로 터미널에서 지정한 후 'npm init -y'을 입력하여 package.json을 생성하여 npm 작업을 할 수 있도록 한다. 3. 'npm install typescript' 을 입력하여 타입스크립트 모듈을 다운받는다. 4. 타입스크.. 2021. 5. 4. 이전 1 다음 반응형
