TypeScript

TypeScript

함수 및 methods에 type alias 사용법

arrow function function 함수(){ } // 일반 함수 선언 let 함수 = () => { } // arrow 함수 선언 우선 함수 선언 방법은 두 가지로 분류할 수 있다. 1. 일반 함수 2. arrow 함수 =>의 뜻은 function이랑 같음. function type-alias type 함수타입 = (a :number) => number; 함수의 타입을 저장하기 위한 선언방법 => type 함수타입명 = (파라미터 : 타입) => 리턴타입 let 함수 : 함수타입 = function (a) { return a+1 } 선언한 타입함수를 사용해 보자. => let 함수명 : 함수타입명 = function(파라미터) {리턴 값} 이렇게 let을 사용하여 변수처럼 함수에도 type-al..

TypeScript

Literal Types

Literal Type 사용법 let name :'hong'; let age :20; 변수 : Literal타입 형태로 선언 name = 'hong' name = 'kim' //에러 발생 name이라는 변수는 'hong' 타입으로 선언했기 때문에 'kim'타입은 올 수 없음. let 방향: 'left' | 'right'; 방향 = 'left'; or 연산자 사용 가능. => 방향 = 'left' or 'right' 타입만 사용 가능. function 함수(a: 'hello'):(1 | 0){ return 1 } 함수('hello') 함수도 마찬가지로 1. 파라미터 타입에 Literal타입으로 선언 가능. 2. return타입 또한 Literal타입 사용 시 그 값만 리턴 가능. as const 문법 사용..

TypeScript

타입 정의가 길고 복잡하다면 type alias & readonly

type alias(변수) 사용 전 let 동물 :string | number | undefined; 1. 타입이 복잡하거나 2. 나중에 또 재활용할 타입이라면 type alias(변수) 사용 후 type Animal = string | number | undefined; let 동물 :Animal; 1. type 키워드를 사용. 2. 변수명은 첫 문자 대문자 관례 이렇게 사용하면 타입도 변수처럼 저장하여 사용할 수 있다. 특히 object 타입에 사용한다면? type 사람 = { name : string, age : number, } let teacher :사람 = { name : 'john', age : 20 } object 타입의 경우 선언이 길고 복잡한 편이다. -> 이와 같이 type변수를 사용..

TypeScript

타입 확정하기 (Narrowing & Assertion)

타입 확정 전 function 함수(x :number | string){ return x + 1 //에러 발생 } number | string과 같은 union 타입은 타입을 확실하게 정해줘야 함. Narrowing 방법 function 함수(x :number | string){ if (typeof x === 'number') { return x + 1 } else if (typeof x === 'string') { return x + 1 } else { return 0 } } if문 + typeof 연산자를 이용하여 타입을 체크하는 방법을 Narrowing 방법이라고 칭함. else문의 경우 return 하지 않는 조건문 발생 시 에러가 발생할 수 있어서 else문까지 조건을 해주는 습관이 필요. Na..

TypeScript

함수에 타입 지정하는 법

일반적인 함수 사용법 function 함수(x){ return x * 2 } 함수(2); (x) = 파라미터 return = 리턴 값 타입스크립트 함수 사용법 function 함수(x :number) :number { return x * 2 } x:타입 = 파라미터 타입 : 우측 타입 = return 타입 void 타입 function 함수(x :number) :void { return x * 2 //에러 발생 } void = return 할 자료가 없는 경우 사용 return 키워드를 지워야 함. function 함수(x :number) { x * 2 } : void를 생략해도 void 타입으로 오토캐스팅됨. 파라미터가 옵션인 경우 function 함수(x? :number) { } 함수(); //가능 ..

TypeScript

타입을 미리 정하기 애매할 때 (union, any, unknown)

Union-type let 이름: string | number = 'hong'; let 나이: (string | number) = 20; OR( | ) 연산자를 이용하여 타입 1 or 타입 2를 설정할 수 있다. let 리스트 : (number | string )[] = [1,'2',3]; let 오브젝트 : {data : string | number} = {data : '123'} array와 object도 마찬가지도 union타입을 설정할 수 있다. 주의할 점 var 배열1: number | string[] = [1,'2',3] // 1 or ['1','2','3'] var 배열2: (number | string)[] = [1,'2',3] 기본 타입의 경우 소괄호( )를 생략할 수도 있었지만, 두 케..

TypeScript

타입스크립트 기본 타입 정리 (primitive types)

변수 만들 때 타입 정하기 let 이름 : string = 'Hong'; //string let 나이 : number = 20; //number let 학생 : boolean = true; //boolean 변수명 : 타입으로 설정할 수 있다. array 타입의 경우 let 가족 : string[] = ['father', 'mother', 'sister', 'brother'] //list 변수명 : 타입명[ ]으로 설정할 수 있다. Object 타입의 경우 let 내정보 : {age : number} = {age : 20} //object 변수명: { 변수명 : 타입 } = { 변수명 : 값 }으로 설정할 수 있다. 하지만, 번거롭게 모든 변수에 꼭 타입을 명시할 필요는 없다. 왜냐하면 변수 생성 시 자..

TypeScript

TypeScript 컴파일 세부설정 (tsconfig.json)

tsconfig.json 파일에 붙여 넣기 { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "ESNext", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext' "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 "checkJs": true, // 일반 js 파일에서도 에러체크 여부 "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react' "declaration": t..

www.seok.com
'TypeScript' 카테고리의 글 목록 (3 Page)