[TypeScript] 함수와 method에 type alias 지정하기
·
TypeScript/기초
1. 함수에 type alias? 함수에는 들어갈 파라미터와 return에 타입을 지정할 수 있다. 여기서 함수의 타입에도 type alisa로 저장해서 쓸 수 있다. function add(x: number, y: number): number { return x + y } x와 y를 더해서 return 해주는 함수를 하나 만들었다. type NumOut = (x:number, y: number) => number; 따로 NumOut이라는 type으로 빼서 사용할 수 있다. 이때, 선언할 때는 화살표 함수 방식으로만 선언이 가능하다. type NumOut = (x:number, y: number) => number; let add :NumOut = function(x,y) { return x + y; }..
[TypeScript] Literal Type
·
TypeScript/기초
1. Literal Type ? 자바스크립트로 개발을 하다가 특정 변수는 1의 값만 가지게 하고 싶을 때가 있다. 그럴 경우 보통은 const 키워드를 사용해 const num = 1; 처럼 선언해서 사용한다. 그런데, 1 또는 0을 가질 수 있게 제한하고 싶은 경우에는 어떻게 해야할까? 그럴 때 바로 Literal Type을 이용해서 선언하면 된다. 사용하면 미리 정해둔 데이터만 변수가 가질 수 있게 만들어준다. 2. Literal Type 사용법 TypeScript로 타입을 지정할 때 string, number 같은 타입만 선언할 수 있는 것이 아니다. 일반 글자같은 것도 타입이 될 수 있다. let seo: "개발자"; let kim: "백수"; " 개발자 " 와 " 백수 " 같은 타입도 만들 수 ..
[TypeScript] type 키워드 & readonly
·
TypeScript/기초
Type Aliases 타입스크립트로 코드를 작성하다보면 let 동물 :string | number | undefined; 길고 복잡하게 타입을 나열하는 경우가 많아진다. 긴 타입 정의가 보기 싫거나, 나중에 또 사용하는 타입인 경우에는 따로 변수에 담아서 사용할 수 있다. 타입을 변수처럼 만드는 것을 type 키워드를 통해서 가능하다. type 키워드를 사용하는 것을 type alias 라고 한다. type Animal = string | number | undefined; let 동물 :Animal; type 변수명 = 타입 종류 타입을 변수처럼 만드는 alias 문법이다. 일반적으로 타입 변수를 만들때는 대문자로 시작한다. type 키워드는 특징이 있는데, 바로 재정의가 불가능하다. type Nam..
[TypeScript] 타입 확정하기
·
TypeScript/기초
함수에 Union을 사용하면... function 더하기(x: number | string) { // return x + 1; 에러 발생 } x는 숫자 또는 문자이기 때문에 +1을 해도 분명 코드상 문제가 없지만 에러를 발생시킨다. TypeScript는 number 타입 또는 string 타입만 + 연산이 가능한데, 현재 x는 number | string 타입이기 때문에 + 연산이 불가능하여서 에러가 발생한다. 즉, 아직 파라미터의 타입이 확실하지 않기 때문에 파라미터 조작 시 에러가 발생하는 것이다. function 함수(x? :number) :number { // return x + 1 에러 발생 } 또 이런 코드도 타입스크립트에서는 에러가 발생한다. x의 타입이 number 혹은 undefined ..
[TypeScript] 함수에 타입 지정하기
·
TypeScript/기초
함수에는 2곳에 타입을 지정할 수 있다. 함수에는 총 두 군데 타입 지정이 가능하다. 1. 함수에 들어오는 자료 ( 파라미터 ) 2. 함수에서 나가는 자료 ( return ) function 함수( props :number) :number { return props * 2 } 파라미터로 받는 타입은 파라미터 옆에 적어주면 된다. 그리고 함수에서 return 되는 자료의 타입을 정해주고 싶으면, 함수명() 옆에 적어주면 된다. 설정을 해주면 파라미터와 리턴 값이 이상하면 에러를 나타낸다. - 파라미터에 타입을 지정하면 필수 파라미터가 된다. void 타입 함수에만 void라는 타입을 사용할 수 있다. ' 아무것도 리턴하지 않는다 ' 를 뜻하는 타입으로 리턴할 자료가 없는 함수의 타입으로 사용한다. func..
[TypeScript] 추가 타입
·
TypeScript/기초
1. Union Type 특정 변수에 string또는 number 와 같이 변수 하나에 타입을 두개 주고 싶은 경우에 사용하는 타입이다. let 이름: string | number = "seo"; Union Type으로 string과 number를 지정한 경우 변수에는 string 또는 number만 들어올 수 있다. 그리고 값을 할당하는 순간 타입은 string 또는 number로 변하게 된다. array, object 자료를 만들 때 Union Type을 쓰려면 어떻게 할까? let arrayType: (number | string)[] = [1,"2",3] let objectType: {data : number | string} = {data : "123"} 배열을 사용할 때는 ()를 사용해서 타입..
[TypeScript] 기본 타입 정리
·
TypeScript/기초
변수에 타입 선언하기 타입스크립트는 변수를 만들 때 변수의 타입을 선언할 수 있다. let 이름: string = 'seo' ' 변수명: 타입 ' 으로 선언이 가능하다. 변수에 타입을 지정한 경우 해당 변수에 다른 타입을 할당하면 에러가 발생한다. var 이름 = "seo"; // 이름 = 123; --- 에러 기본 타입 종류 자주 쓰는 타입으로 string, number, boolean이 있다. let 이름 :string = 'seo'; let 나이 :number = 200; let 결혼 :boolean = false; 외에도 null, undefined 등이 있지만 자주 사용하는 타입은 아니다. array or object 타입 선언 여러 가지 자료를 한번에 저장할 때 array 또는 object 자..
[TypeScript] 컴파일 시 세부 설정
·
TypeScript/기초
1. tsconfig.json 기본적으로 TypeScript 프로젝트에는 tsconfig.json이 존재한다. 여기선 ts 파일들을 js 파일로 어떻게 변환할 것인지 세부 설정이 가능하다. { "compilerOptions": { "target": "es5", "module": "commonjs", } } target은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다. es5 외에도, es2016, esnext 등 원하는 자바스크립트 버전을 설정할 수 있다. module은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 사용할 지 정하는 곳이다. commonjs는 require 문법, es2015, esnext는 import 문법을 사용한다. 일반적으론 IE 호환성을..