TypeScript_ 2. 타입스크립트 설치와 기본문법
🔹 리액트 프로젝트에 타입스크립트 설치하기
🔶 타입스크립트 설치
🔹 기본설치
yarn add –g typescript //현재 컴퓨터에 설치 yarn add typescript //로컬로 설치(현재 위치의 폴더에 설치)
🔹 리액트 프로젝트에 타입스크립트 설치하기
// 기존에 있는 react에 설치하기. yarn add --save typescript @types/node @types/react @types/react-dom @types/jest
//새로운 리액트 프로그램 타입스크립트로 시작하기 npx create-react-app my-app --template typescript
🔹 패키지 설치하기
yarn add styled-components @types/styled-components
🔶 타입스크립트 기본 문법
🔹 기본 타입
- Boolean
- Number / String / Object / Array
- Tuple
- Ennum
- Any
- Void
- Null / Undefined / Never
🔹 타입 설정
◻ 변수에 타입 설정
//string으로 타입설정 const name:string= 'eunsu'
변수 타입에 맞지 않았을 경우, 애러가 남.
let age:number = 30; age ="서른살"
할당된 타입과 다르다는 애러가 뜬다! 신기해잉
◾ 변수 => 배열, 오브젝트 element
// 배열, 오브젝트 안 element 타입설정. let 이름 :string[] = ['kim', 'park'] let 나이 :{ age : number } = { age : number }
◾ 변수 => 여러가지 데이터 타입 설정
// text 의 데이터 타입은 number거나 string let text: number | string = "Hello World";
◾ 변수 => type변수로 데이터 타입 설정
이걸 literal type이라고 함.
type nameType = number | string; const name:nameType = "Joo Eunsu"
◻ 함수에 타입 설정
◾ 함수 => parameter 타입 설정
const plus = (a: number, b: number) => { return a + b; }; console.log(plus(3, 5)); //8
◾ 함수 => parameter 타입 설정 심화
const test = (a: number | string) => { return a *3; }; //error ! type설정 해야 함. const test = (a: number | string) => { if (typeof a === "number") { return a * 10; } };
어느정도 살짝 감은 잡힌다. 타입을 다 설정해 줘야 하는고만,,,
Author And Source
이 문제에 관하여(TypeScript_ 2. 타입스크립트 설치와 기본문법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@holicholicpop/TypeScript-2.-타입스크립트-설치와-기본문법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)