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변수를 사용..
타입 확정 전 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..
일반적인 함수 사용법 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) { } 함수(); //가능 ..
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] 기본 타입의 경우 소괄호( )를 생략할 수도 있었지만, 두 케..
변수 만들 때 타입 정하기 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 변수명: { 변수명 : 타입 } = { 변수명 : 값 }으로 설정할 수 있다. 하지만, 번거롭게 모든 변수에 꼭 타입을 명시할 필요는 없다. 왜냐하면 변수 생성 시 자..
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..
작업폴더 경로로 들어간다. 터미널을 오픈한다. 명령어를 입력한다. 개발중인 React 프로젝트에 설치하는 경우 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 새로운 React 프로젝트를 개발하는 경우 npx create-react-app my-app --template typescript my-app 부분은 개인적인 폴더명을 기입하면 된다. 일반 HTML, CSS, JS 웹 개발의 경우는 ts파일을 알아듣지 못하기 때문에 .ts 파일을 -> .js파일로 변환하는 작업이 필요한데, 리액트나 뷰 프로젝트 경우에는 이처럼 간단한 bash 명령어 하나로 해결할 수 있다.
자바스크립트는 타입에 관대함. (Dynamic typing) - 타입을 알아서 변수에 맞게 변경하고 관리. - 타입 에러 처리가 없음. 타입스크립트는 타입에 엄격함. - 친절한 에러메시지 출력. - 타입 관련한 버그들을 잡기 수월. 소규모 프로젝트에서는 활용점을 크게 느낄 수 없지만 대규모 프로젝트의 경우 tpye관련 버그들이 많이 발생할뿐더러 특히 다른 사람이 작성한 코드를 수정해야 할 경우 타입스크립트로 작성했다면 그러한 이슈를 확연히 줄일 수 있다고 한다.
